코드잇 풀스택 2기 - Part 3 - 중급프로젝트 - Docthru

# 코드잇 풀스택 2기 - Part 3 - 중급프로젝트 - Docthru 개인 개발 리포트: 이강수 (kipid) ## PH

• 2024-12-06 : First posting.

## TOC ## npm install 에러시 ``` npm install --legacy-peer-deps ```/ ## font-size: var(--XXpx) 적극 활용 ## color, background-color: var(--prime-yellow/red/blue/orange) or var(--brand-black/white) or var(--gray-0 ~ 900) 적극 활용 ## queryClient.invalidateQueries({ queryKey: ['todos'] }) 캐싱 (Caching) 을 무효화 할 때 쓰는 명령어. ## dev branch update 시 ``` (feature/my-job 브랜치에서 작업 도중 다른 팀원에 의해 dev가 merge 된 경우) git checkout dev git pull upstream dev git checkout feature/my-job git merge dev ```/ ## Vercel 2gi-docthru-3team-fe :: Settings 에서 ``` Install Command: npm install --include=optional sharp ```/ 바꿔줘야 함. ## 팀원별 구현 기능 상세 및 담당 업무 이강수(FE리더)

• 번역 챌린지 조회
  - 목록 조회
  - 상세 조회
  - 참여 현황 조회
• 번역 챌린지 참여
  - 챌린지 도전/포기
  - 번역 작성 (에디터로 번역 작성, 임시 저장 및 불러오기, 원문 확인)
  - 번역 제출
• 번역 챌린지 신청 관리
  - 신청 목록 조회
• 챌린지 관리
  - 작업물 수정/삭제
  - 하트 남기기 기능
• 나의 챌린지 관리
  - 참여 중인 챌린지 목록 조회
  - 완료한 챌린지 목록 조회
  - 신청한 챌린지 목록 조회

## 문제해결 문제 상황: 캐싱이 된 데이터들이 서버의 데이터 변화에도 프론트에서 반영이 안되는 문제 발생. 원인 분석: 기본적으로 Next.js 는 캐싱된 데이터를 우선적으로 사용한다는 것을 알게 됨. 해결방법: queryClient.invalidateQueries({ queryKey: ['challenges'] }) 와 같은 함수로 캐싱을 무효화 시킴. queryKey 가 배열 형식일 때, 제일 앞쪽 key 만 입력 시 invalidate 된다는 것도 쓰면서 알게 됨. 배운점 및 개선사항: tanstack query 가 많은 장점이 있는 만큼 더 자세히 공부해 볼 필요성을 느낌. ## RRA

1. https://github.com/Fs2Part3Team3/2gi-docthru-3team-fe
2. https://github.com/Fs2Part3Team3/2gi-docthru-3team-be