본문 바로가기

전체 글

 (67)
[REACT] react router 사용해보기 리액트 라우터를 처음 사용해보고 간단히 정리한 내용입니다 참고로 리액트 라우터 v6를 사용했습니다 1. 라우팅이란? 간단히 설명하면 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는 것을 말합니다. 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트 관리하기 위해 필요한 것이 라우팅 시스템입니다. 2. react router 사용해보기 리액트에서 라우트 시스템을 구축하기 위한 방법은 여러가지가 있지만 가장 인기있고 라우팅 기능만을 익히는데 적합한 react router를 사용해보겠습니다. 2.1. 설치 yarn add react-router-dom 2.1. 프로젝트에 라우터 적용해보기 프로젝트에 리액트 라우터를 적용할 때는 BrowserRouter라는 컴포넌..
[JS] 함수 헷갈리는 부분 : 값을 넘기는 것과 참조값을 넘기는 것의 차이 리액트를 공부하며 유튜브를 클론 코딩하던 중 혼자 해결하지 못하고 있던 부분이 있어서 강사님 코드와 비교해보니 //내 코드 onClick = {onVideoClick(video)} //강사님 코드 onClick = {()=> onVideoClick(video)} 위 코드처럼 강사님은 화살표 함수를 사용하셨다 이해가 잘 안가서 Q&A 게시판을 살펴보니 나와 같은 고민을 하는 사람이 많아서 신기했다ㅎㅎ 결론적으로 위 두 코드의 차이점은 ↓ //onVideoClick을 호출하고 리턴되는 값 자체를 value1에 할당하는 것 const value1 = onVideoClick(video) //onVideoClick을 호출할 함수를 value2에 할당하는 것, 참조값을 전달하는 것 const value2 = () ..
[JS] callback 오늘은 자바스크립트 공부하면서 지겹게 들었던 콜백에 대해 정리해 보려고 합니다. (1) 콜백함수에 대해 아주 간단하게 설명하면 콜백함수란? 정의: 함수 안에 파라미터로 들어가는 함수 용도: 순차적으로 실행하고 싶을 때 씀 특징: 콜백함수가 필요한 함수들에만 콜백함수 사용 가능 (addEventlListener, setTimeOut,,,) (2) 콜백함수 예시 document.querySelector(".button").addEventListener("click", function(){ }) //addEventListener 안에 들어있는 함수가 콜백함수 //click 이벤트 발생 후 순차적으로 실행 (3) 콜백함수 만들어 보기 //순차적으로 1, 2 나오도록 하고 싶다면? function first(파라..
[면접] react와 vue의 차이 오늘 정말 가고 싶었던 스타트업의 인턴 면접을 보았다. 공부한지 6개월도 안되었는데 이렇게 첫 면접을 보게 되어서 너무 기쁘고 첫 면접이 가장 가고 싶었던 곳이라 정말 감사했다. 그치만 기술 질문을 딱 하나 주셨는데 그걸 대답못했다…바로 react와 vue의 차이!!!!!!! 아쉬운 마음에 집가는 길에 간단하게 정리해본다 리액트와 뷰의 차이점을 가장 간단하게 설명하면 리액트는 만들때 자유도가 높고 뷰는 이미 기능이 다 정해져있는 느낌이라는거..? 기본적으로 리액트는 라이브러리고 뷰는 프레임워크이다. 라이브러리는 필요할때 불러서 쓰거나 뺄 수 있는데 프레임워크는 부분적으로 사용이 불가능하고 프레임워크가 제공하는 문법에 따라서 작동해야 한다 그리고 리액트는 자바스크립트에 더 가깝고 뷰는 html, css ,..
[React] HOOK 맛보기 (State hook, Effect hook) react hook은 기존 Class 코드를 작성할 필요 없이 함수 컴포넌트에서 state와 life cycle method를 이용할 수 있도록 도와줍니다. 굳이 기존의 Class 컴포넌트들을 함수형으로 다 바꿀 필요는 없지만 코드의 유지보수성과 가독성을 위해서 상황에 따라 Hooks를 사용하는 게 더 좋을때도 있다고 하니 배워보려 합니다!! 오늘은 useState와 useEffect에 대해서 알아보도록 하겠습니다. 1. useState -함수형 컴포넌트에서 상태를 관리해야 할 때 사용 -실제의 state 값과 업데이트 할 수 있는 함수 두 개를 리턴 (아래 예시에서는 count와 setCount 두 가지 호출) ※ hooks에서는 this 사용하지 않음 2. useEffect -리액트 컴포넌트가 렌더링..
[NodeJS] MongoDB Model & Schema 유저와 관련된 데이터를 저장하기 위해 Model과 Schema를 만들어 보겠습니다. model: 스키마를 감싸주는 역할 schema: 하나 하나의 정보를 지정해주는 것 Model과 Schema 만들어 보기 (1) modesl라는 폴더를 만들어 준 후, 'User.js'라는 이름의 파일을 만들어 주세요. (2) 순서는 mongoose 모듈을 가져온 후 Schema를 만들고 Model로 감싸준 후 export해주는 겁니다! //mongoose 모듈 가져오기 const mongoose = require("mongoose"); //Schema 생성하기 const userSchema = mongoose.Schema({ name: { type: String, maxlength: 50, }, email: { type..
[NodeJS] Mongo db와 연결하기 (1) 먼저 몽고db에 회원가입을 해주세요! (2) 로그인 후 새로운 클러스터를 만들어 줍니다! cloud provider의 경우 아무거나 선택해도 상관없는 것 같은데 전 aws를 사용했습니다 region의 경우 free 지역 중에 가까운 곳을 선택해주세요! 전 서울을 선택했습니다. cluster tier의 경우 MO Sandbox를 클릭해주세요 cluster name의 경우 원하는 이름을 입력해주세요 (3)create cluster를 클릭해주세요 (4) 체크리스트를 하나 하나 수행해주면 되는데 먼저 몽고DB 유저를 생성해 주겠습니다. -체크리스트에서 'Create your first database user'를 클릭해주세요 -username과 password를 입력하고 create MongoDB Use..
[NodeJS] NODE와 EXPRESS 다운로드 하고 Hello World 출력하기 프로젝트에서 회원가입, 로그인, 로그아웃 기능을 구현하기 위해 간단하게 node js를 배워보려고 합니다. 간단하게 hello world부터 출력해보겠습니다! (1) 먼저 node를 설치합니다 node 설치 방법 1. 먼저 노드가 설치되어 있는지 확인 -터미널에 node -v 입력하고 버전 나오면 깔려있는 것 2. 안깔려 있는 경우 노드 공식 홈페이지에서 다운로드 (되도록이면 안정적인 버전으로 다운로드 하자!) (2) 원하는 폴더로 이동 후 package.json을 만들기 위해 터미널에 npm init을 입력합니다 (3) 해당 폴더로 이동 후 index.js 파일을 만들어 줍니다. 이 index.js가 백엔드의 시작점이라고 합니다. (4) express를 설치해줍니다. express 설치 방법 -터미널에..

티스토리툴바