[TIL] 리액트 심화 주차 팀 과제_리덕스 툴킷

리덕스 프로젝트 만들고 toolkit 추가

npx create-react-app [프로젝트 명] --template redux

npm i redux

npm i react-redux

npm install @reduxjs/toolkit

npm install styled-components

npm install react-router-dom --save

ESLint, Pretteir  설치 명령어

npm install eslint prettier --save-dev

npx eslint --init

npx install-peerdeps --dev eslint-config-airbnb

npm install --save-dev eslint-plugin-prettier

npm install --save-dev --save-exact prettier

npm install --save-dev eslint-config-prettier

 

https://synuns.tistory.com/48

[ESLint / Prettier] 레퍼런스 모아보기

[ Error ] Function component is not a function declaration

https://velog.io/@han1368/ESLint-%EC%A0%81%EC%9A%A9-%EC%8B%9C-%EC%83%9D%EA%B8%B4-%EC%9D%B4%EC%8A%88Function-component-is-not-a-function-declaration

ESLint 적용 시 생긴 이슈_Function component is not a function declaration

이렇게 설정했는데 계속 오류나서 화살표 함수를 function으로 다 바꿈

[ VS Code ] Auto Fix On Save 가 없을 때

https://minemanemo.tistory.com/98

[VS Code] ES Lint: Auto Fix On Save 없을 때

[ Error ] missing in props validation

이 오류는 아래 링크에서 해결

https://haerim95.tistory.com/41

[React] missing in props validation 뭔데?

Git commit message

여기를 참고해서 commit message를 적었다.

https://inpa.tistory.com/entry/GIT-%E2%9A%A1%EF%B8%8F-Gitmoji-%EC%82%AC%EC%9A%A9%EB%B2%95-Gitmoji-cli

[GIT] ⚡️ Gitmoji 사용법 정리 (+ 깃모지 툴 소개)

내 폴더를 내 branch에 push할 때 commit message를 바꾸고 싶었다.

git commit --amend

이 명령어로

 

💄 Add details page UI

📝 Update .eslintrc.js, package.json, package-lock.json

📝 Add .prettierrc

📝 Add logo.png

💄 Update common components UI

🎨 Improve features folder

📝 Add diarySlice.js

 

이렇게 바꾸고

git log

commit message 기록을 본 뒤

git push origin soobin

이렇게 했더니 에러가 떴다.

[ Error ] failed to push some refs to 'https://github.com/123456soobin-choi/Gamseong-Diary.git'

git push -u origin soobin --force

강제로 푸시했더니 깃허브에 반영은 됐는데 commit message 가 하나로 보인다..!

 

 

ㅇ 오늘 한 일

- 팀 회의 준비

• favicon 만들기 - index.html 에 적용
• 폴더 및 파일 세팅
• code convention - eslint, prettier 설정
• 메인, 상세, 글쓰기 페이지 연결해서 테스트

- 팀 회의 및 노션 정리

• MVP(Minimum Viable Product) 정하기
• code convention 논의
• Git 협업 및 commit message, Issues 논의
• Git Issues - Set up templates
• project references 공유

- 팀 과제 프로젝트 시작

• 상세페이지 View 만들고, styled-component 적용
• [common] Header, Input, Button 바꾸기
• eslint, prettier 오류 해결법 링크 남기기
• Git 내 branch에 push

- 기술 매니저님께 질문과 답변

 

ㅇ 오늘 느낀 점

 아침에는 너무 막막했는데 프로젝트를 시작하니 아직 css까지만 해서 그런지 재밌다. features라는 폴더 안에 페이지별 폴더를 만들고 그 페이지별로 기능을 담은 컴포넌트를 만들면 된다고 한다. 내일은 CRUD 기능을 다 구현하고 redux toolkit 까지 적용해야겠다.

 

ㅇ 내일 할 일

 - 팀 과제 기능 구현 완료