I T H

회원가입을 마치고, 이제 react with typescript + node.js(mongodb)환경에서의 로그인을 구현해보자! 로그인은 사용자로부터 id와 패스워드를 받아서 백앤드로 전달하고 백앤드에서 토큰을 만들어서 다시 프론트앤드로 보내주게 된다. 그리고 받은 토큰을 가지고 headers의 authorization에 토큰정보를 넣어서 백앤드로 보낸다. 백앤드에서 secret key를 이용해서 프론트에서 받은 토큰이 유효한 토큰인지 확인후 유효하다면 사용자 데이터를 보내게된다. 이번 챕터는 백앤드에서 토큰을 받아오는 부분까지, 다음챕터부터는 나머지부분을 다뤄보도록 하겠다. - Frontend [ pages / types / login.ts ] - 로그인페이지의 타입들을 모아놓은 파일 export in..

- 백앤드 : node.js / mongoDB를 사용 - 백앤드 구조는 다음과같이 설정하였다. 데이터를 주고받는데에 효과적이고 중간에서의 매개역할과 같은 middleware 와 컬렉션(=테이블) 스키마를 관리하는 model, url경로를 효과적으로 관리하는 route로 설정함. 1. node.js의 환경을 만들어보자! 1) npm init - npm init를 적게 되면 package.json파일이 뜰 것이다. 2) npm install express - save - express를 다운로드 받자. - espress는 node.js를 빠르고 편하게 사용할수 있게 도와주는 프레임워크임. 3) 전에 받아놨던 dependencies 라이브러리들이 있다면 복사 붙여넣기 해주자. - 전에 했던 프로젝트들이 있다면..

frontend의 회원가입의 흐름과, 어떤함수들을 사용하고, 타입스크립트를 어떻게 적용하는지에 대해 작성할 것임. 들어가기에 앞서 이번챕터의 사용할 훅들과 함수들을 미리 알아보자! - useForm: form을 관리하는 커스텀훅으로 state와 onChange함수의 많은 양을 줄이고 반복적인 코드의 양을 줄일 수 있다. 회원가입과 같이 입력받을 컬럼들이 많을 경우 사용하면 유용할 훅이라고 볼수있다. useFrom은 여러가지의 리턴 props을 가지고 있다. 필자는 register, handleSubmit, reset, watch 등을 사용했다. - 입력받을 변수 타입들에 대한 ts파일을 만들어서 import해서 사용함. - 지난 챕터에서 미리 만들어둔 useAddDispatch를 사용해 리듀서를 호출할 ..

이번시간에는 상태관리 라이브러리인 리덕스를 사용해보겠다. tsx파일에서의 리덕스 적용과 리덕스를 효율적이고 복잡하지 않게 로직을 짤수있는 라이브러리인 redux-toolkit을 사용할 예정. - 리덕스 툴킷을 사용하면 createSlice를 통해 action과 reducer를 효과적으로 사용할 수 있다. 흐름: ui -> action -> reducer -> store -> ui 사이클이 형성된다. Redux hooks의 기술 - useDispatch : action을 생성해준다. 즉 버튼클릭과 같은 이벤트 실행시 reducer를 호출하고 reducer는 새로운 store를 생성함. action 객체가 바로 store에 전달되는것이 아닌 reducer를 통해 store의 상태값을 변환시켜주는 것임. re..

이번시간에는 전체 레이아웃 틀을 만들고, react-router-dom hooks를 사용해보겠다. 레이아웃을 설정하기에 앞서 사용할 css 라이브러리를 선택하고, 적용시켜보자! 필자는 tailwindCss를 적용시켜보겠다. 1. TailwindCss 라이브러리 적용 https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com 해당 사이트에 들어가면 친절하게 install과정부터 사용법까지 나와있다. - Using ..