TIL_221222_ React App Project

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. React App Project 시작

• 다 같이 SA 작성해서 제출
• notion을 활용해 프로젝트 상세히 정리
• git 기초 작업
  • 폴더 구조
  • 브랜치 생성

문제

• 다 같이 폴더구조 짜고 실행해보는데 pathname을 읽어오는데 undefined 오류가 떴다. 다 제대로 한 것 같은데 계속 안 돼서 튜터님 도움!

시도 및 해결

• 일단 slice도 잘못돼있어서 손 봤는데 그게 문제가 아니었다. 문제는 app.jsx에서 Router를 import하는데 경로가 잘못됐다. from router-dom이 아니라 from shared/Router 이렇게 되어 있어야 했다.
• Router를 먼저 만들고 App.js에서 import하지 않고 먼저 import를 했더니 일어난 문제였다.
• 이 문제라는 걸 알고 나니 저번에 같은 문제로 TIL에 적었던 게 떠올랐다.. 진짜 박대가리ㅎ

문제 및 해결, 알게된 것

• 드디어 main에서 다들 clone을 하고 yarn start하는데 오류가 났다.
  • npm update를 하니 문제 해결!
  • pakage.json에 있는 pakage를 다시 받아와 update해준 것!

알게된 것

• main clone 후 각자 작업할 브랜치로 이동했는데 메인과 코드가 좀 달랐다.
  • 당연함.. 브랜치를 이동했으니 git pull origin main해서 main과 똑같이 만들어줬어야 했다.

알게된 것

• 팀원이 추천으로 Thunk 대신 React Query 사용
• 데이터 가져오기 = useQuery
• 데이터 수정하기 = useMutation
• 주의할 것: query instance가 하나 일때 5번 호출하면 키가 같기 때문에 함수는 1번만 호출이 되지만 옵셥은 5번이 불러와진다.
  -> 그래서 react-query 자체를 customHook으로 만들기도 하지만 option에 있는 것들은 여전히 그 수 만큼 불러와진다.

---

프로젝트 진행

• 로그인, 페이지별 Header 변경 구현하기
  • Layout에서 header만 컴포넌트로 분리
  • 로그인 버튼을 누르면 로그인 페이지로 이동하기
  • 로그인이 됐을 땐 '글 작성, 마이페이지' 보이기
    -> id 유무에 따라 다르게 보이기
  • 'my page'에서는 '글 작성'보이기
    -> 페이지별로 다르게 보이기
  • 잠시 보류
• 다른 작업 하다 이 부분은 손 못대고 다른 팀원이 맡아서 함!

---

• Thunk 대신 react query를 쓰기로 해서 다 같이 공부했다.
  • 튜터님에게 질문했는데 react query를 쓰면 리덕스를 거의 안 쓰게 된다고 하셔서 리덕스에 대한 이해를 더 하고자 하는 마음에 다 같이 이번엔 react query말고 리덕스(thunk 등)을 쓰기로 했다.