I T H

- 백앤드 : 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 ..

- myschedule project는 나의 스케줄에 관련된 모든 데이터를 관리하는 프로젝트임 - frontend 환경은 react with typeScript, backend 환경은 node.js, db는 mongoDB를 사용할 예정이다. 1. 먼저 프로젝트 이름을 정하고, 폴더이름을 만든다. - my-schedule 폴더 아래 front-react폴더와 back-node-mongodb 폴더를 만들었음. 2. 타입스크립트가 적용된 탬플릿이 포함된 리액트를 install 해보자! - front-react폴더로 이동후 Terminal - newTerminal 클릭 후 아래와 같이 설치한다. - typeScript 탬플릿과 함께 리액트를 현재경로( " ./ ")에 설치한다는 뜻임. - 설치가 정상 완료됬을때..