API 서버와 통신해서 작동하는 댓글 프로젝트를 Redux를 통해 구현
- 댓글 조회, 추가, 수정, 삭제 기능 구현
- 댓글 추가, 삭제시 1페이지로 이동, 수정 시 페이지 유지, 입력 폼 초기화 구현
redux-toolkit
이 제공하는createAsyncThunk
이용하여 비동기 처리를 할 함수 구현extraReducers
에서 각 api 호출 함수의 상태에 따라 state를 처리- 각 promise 결과에 따라
pending
,rejected
를 이용해 loading, error에 대응
totalCount
에 전체 페이지 갯수를 담고 한 페이지 당 4개 씩 보이게 구현- 페이지 클릭시
getPagingComments(pageNum)
함수를 이용해 해당 페이지로 이동 - 댓글을 추가, 삭제시
getTotalComments()
함수를 호출해 페이지 갯수 컨트롤
- 댓글 불러오기, 작성, 수정, 삭제가 동작하도록 기능 구현
- 페이지네이션
- 댓글 작성, 수정, 삭제 후 동작
- 댓글 작성하고 난 뒤: 다른 페이지에 위치하고 있었더라도 1페이지로 이동, 입력 폼 초기화
- 댓글 수정하고 난 뒤: 현재 보고있는 페이지 유지, 입력 폼 초기화
- 삭제하고 난 뒤: 1페이지로 이동
- Redux 환경설정은 자유롭게 진행
- Redux-saga or Redux-thunk 자유롭게 선택 가능
- 미들웨어 사용안하는 것도 가능
- Redux logger, Redux-Devtools 설정 필수
- Redux를 이용한 비동기 처리 필수
$ git clone https://github.com/Jooseulgi/redux-comment.git
$ cd redux-comment
$ yarn install
$ yarn run api //http://localhost:4000/comments
$ yarn start //http://localhost:3000/
- TypeScript
- 컴파일 단계에서 오류 확인이 가능해 코드의 안정성을 주고 redux 관련 type 공부를 위해 선택했다.
- Axios
- fetch와 비교해 서버로부터 데이터를 받은 후, json으로 변환할 필요가 없는 장점이 있다.
- instance를 제작하여 fetch보다 가독성 높은 코드를 작성할 수 있어 선택했다.
- Redux-Toolkit
CreateSlice
를 통해 Action과 Reducer를 한번에 정의할수있고CreateAsyncThunk
를 통해 thunk 미들웨어를 내장하고있어서 추가로 비동기를 위한 외부 라이브러리를 설치할 필요가 없다.- redux의 단점인 보일러플레이트 코드가 줄어든다는 장점에서 toolkit을 사용했다.
- Styled-Components
- 'CSS IN JS' 방식으로 원하는 스타일이 가능하고 props를 활용한 조건부 렌더링 작업을 하고 싶어서 Styled-Components를 선택했다.
redux-comment
├─ 📁 data # json-server data가 있는 폴더입니다.
├─ 📁 public
├─ 📁 src
│ ├─ 📁 components # comment 관련 components가 모여있는 폴더입니다.
│ ├─ 📁 store # redux 관련 코드가 있는 폴더입니다.
│ │ ├─ 📁 features # redux action, reducer로 구성된 폴더입니다.
│ │ └─ index.ts
│ ├─ 📁 types # 타입 선언 폴더입니다.
│ ├─ App.tsx
│ ├─ GlobalStyle.tsx
│ └─ index.tsx
├─ ⚙️ .eslintrc.json
├─ ⚙️ .gitignore
├─ ⚙️ .prettierrc.json
├─ ⚙️ package-lock.json
├─ ⚙️ package.json
├─ README.md
├─ ⚙️ tsconfig.json
└─ ⚙️ yarn.lock