Recoil , react-query를 사용한 이유
기존 리덕스에서 상태관리를 하려면 기본적인 client단 상태관리 로직인데도 아래처럼 초기세팅을 해줘야 할게 많습니다. 전역state가 추가 될 때 마다 store에 reducer도 넣어줘야 되고
또 서버와의 통신을 하기위해서는 reateAsyncThunk를 써야하는데 로직이 createAsyncThunk, extraReducers 등을 통해 일일히 초기 세팅을 해줘야 해서 불편한 감이 있었습니다.
이런 불편함을 해소하기 위해서 Recoil 과 React-query를 도입하였습니다. 초기설정도 간단하고 보기에도 코드가 직관적이라서 더 좋은것 같습니다.
Recoil
React-query
CRA(Create-React-App) 명령어 없이 Webpack을 초기 설정 후 프로젝트 진행
기본적으로 CRA는 webpack과 babel등이 다 세팅 된 상태인데 하나하나 세팅한 이유는 번들러 동작원리에 대해서도 궁금했고, 리액트 프로젝트가 어떻게 만들어지는지 궁금해서 CRA 없이 프로젝트를 진행 했습니다.
webpack.config.js 파일을 생성 후 초기세팅 해준 코드입니다.
초기설정을 할때 파일을 읽어오는 시작점을 entry 속성으로 설정할 수 있고, .js파일로 진입점을 사용하면 됩니다. 반대로 번들 된 결과물도 설정 할 수 있으며 반환된 파일들은 dist 폴더로 이동하게 됩니다.
그외에 패키지들을 추가할 때에는 require명령어로 추가해준 후 변수를 사용합니다.
그리고 경로별칭을 지정해 줄수있습니다. 저희는 src로 바로 접근하기 위해서 골뱅이로 접근할수 있게 설정을 하였습니다.
그외에 babel로더를 사용하기 위해 module에 규칙을 추가 하였고, ts loader, css-loader 등 사용하고 싶은 파일을 정규식으로 지정 후 설정해 주었습니다.
그리고 환경변수 세팅을 해주기 위해서는 cra와 다르게 dotenv를 설치해 줘야하고 전역에 변수선언 한 dotenv 변수를 new webpack.DefinePlugin({
에 할당해 줘야 합니다.
1) 미구현 된 MVP 기능
2) 추가/개선 할 기능과 그 이유
전체 UI/UIX
헤더
일정 만들기
관광지 상세 페이지