댓글 프로젝트

📌 프로젝트 소개.

목표

API 서버와 통신해서 작동하는 댓글 프로젝트를 Redux를 통해 구현

개발 기간

2022/09/16 ~ 2022/09/19

📌 배포.

https://comments-fe-5.netlify.app/

📌 프로젝트 설치 및 시작.

프로젝트 클론

$ git clone https://github.com/wanted-pre-onboarding-frontend-6/pre-onboarding-assignment-week-3-2-team-5.git

패키지 설치

$ npm install

서버 실행

$ npm run api
$ npm run start

📌 팀원 소개

김성용(팀장)	성민규	임상빈	이재하	박세리
FE Developer	FE Developer	FE Developer	FE Developer	FE Developer

📌프로젝트 과정 소개

• Git 전략

• 커밋 컨벤션 및 코딩 컨벤션

📌 프로젝트 구조

open

├─apis
├─components
│  ├─Button
│  ├─Input
│  └─Select
├─context
├─hooks
├─pages
│  └─components
├─reducer
├─saga
├─store
├─types
│  ├─api
│  └─style
└─utils

📌기술 스택

📌 요구 사항

• 댓글 불러오기, 작성, 수정, 삭제가 동작하도록 기능 구현
• 페이지네이션
• 댓글 작성, 수정, 삭제 후 동작
  • 댓글 작성하고 난 뒤: 다른 페이지에 위치하고 있었더라도 1페이지로 이동, 입력 폼 초기화
  • 댓글 수정하고 난 뒤: 현재 보고있는 페이지 유지, 입력 폼 초기화
  • 삭제하고 난 뒤: 1페이지로 이동
• Redux logger, Redux-Devtools 설정 필수
• Redux를 이용한 비동기 처리 필수

📌 Best Practice

💡redux-toolkit을 사용했습니다.

redux를 사용할 때면 프로젝트가 크지 않음에도 복잡한 코드를 작성해야 합니다. store를 설정해주는 과정이 복잡하고, redux를 좀 더 편하게 사용하기 위해서는 패키지를 많이 설치해야하며, boilerplate 코드가 비효율적으로 깁니다. 그렇기 때문에 이번 프로젝트에서 redux를 효율적으로 관리하기 위해서 redux-toolkit을 사용했습니다.

redux-toolkit의 createSlice는 자동적으로 immer를 내부적으로 사용하기 때문에 불변성을 편리하게 관리할 수 있고 reducer를 더 쉽고 간단하게 작성할 수 있습니다.

💡redux-thunk 대신 redux-saga를 사용했습니다.

redux-thunk를 사용할 때 고차함수 작성 등 코드 복잡도가 더 높다고 느껴지기 때문에 redux-saga를 선택하게 되었습니다. 그리고 api 작업 실패 시 재요청, 발생한 액션에 따라서 원하는 액션 디스패치 등 saga로는 thunk보다 비동기처리를 다양하게 처리할 수도 있습니다.