[ Dev Log] 박지훈 / 2021-07-04

## 오늘은 어떻게 프로젝트에 기여했나요?

- Next.js에 redux 적용 (리팩토링)
- 추후를 위해 Next.js 작동 개념 제대로 파악하기
- 에러 / 경고 핸들링

### Redux Ducks pattern 으로 파일정렬 ( 추후 팀원과 상의후 필요시 수정 )

**ducks pattern 규칙**
- 모든 reducer함수는 reducer란 이름으로 export default 해야함
- action 생성자들을 함수형태로 export 해야함
- action 타입은 `'npm-module' or 'app이름'/reducer/ACTION_TYPE` 형식이어야함 (굳이 왜이렇게 하는지 모르겠다)

store 위치 예시는 아무리찾아도 없길래
`redux/store/index.js` 에 위치시켰다

### legacy 경고 메세지 이유
**next-redux-wrapper 6버전의 사용방법을 쓰지않았기때문**
5버전까진 Provider 태그로 redux 상태관리 대상 컴포넌트에 감싸줘야됐지만 (최상위컴포넌트에 적용시 모든컴포넌트가 관리대상)
6버전이후부턴 next-redux-wrapper가 알아서 store를 실은 후 자동으로 감싸준다( 감싸면 오히려 에러 발생 )

### next-redux-wrapper 6버전 이후 적용방법
store생성후 store를 next-redux-wrapper의 createWrapper로 감싸준다

_app.js로 가서 store를 import후 적용


해당 콘솔이 뜨면 성공 (확실 x - 출처:https://dev-doodle92.tistory.com/43)

### Store 합치기
next.js에서 생성한 redux store와 client에서 생성한 redux store는 다르기 때문에 이 둘을 합쳐야 한다.
서버에서 생성한 스토어의 상태를 `HYDRATE`라는 액션을 통해서 클라이언트에 합쳐주는 작업이 필요

https://user-images.githubusercontent.com/75489611/124394685-7b842980-dd3b-11eb-8d38-a164904287fe.mov

### Next.js 제대로 알기
노션페이지에 정리중 - https://www.notion.so/NEXT-JS-a7105acc979e4d65ac106c075c038580

## 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- next 구동방식의 개념이해가 너무 안됐다 (특히 메소드관련)
- next.js에 redux 적용하는 방법
- 패키지 버전 업데이트시 적용방법이 다른점
- 각종 에러 / 경고메세지

## 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] 팀원들과 논의후 태스크분배
- [ ] 타이머 상태 리팩토링
- [ ] 되도록 빨리 디자인 기획 / css 진행