Codeit FE Sprint 4기 - 3팀
개별 역할☝️
- 구승모
- 로그인 & 회원 가입 관리
- 페이지 : 마이 페이지
- 김재성
- 컬럼, 카드 도메인
- 페이지 : 대시보드 페이지
- 로컬 스토리지 -> 쿠키, 미들웨어
- 무한 스크롤
- Dnd 적용
- 노은수
- git flow 초기 설정, 레포지토리 관리
- 무중단 배포 및 도메인 연결
- 페이지: 수정 페이지
- react Query: 서버 상태 초기 설정
- 페이지 네이션
- 윤아영
- 초대 도메인
- 페이지 : 마이 대시보드, 수정 페이지
- 무한 스크롤
- 이동현
- 페이지 : 마이 대시보드, 랜딩 페이지
- 페이지네이션, 무한 스크롤
- Dnd 적용
- 스켈레톤
2024年04月15日(월) ~ 04.30(화)
스마트하게 자신의 일정을 관리하는 서비스
https://taskify-six-eta.vercel.app/
next.js Typescript Figma NPM NodeJS GitHub Visual Studio Code
Tailwind css React Query zustand ESLint
git clone https://github.com/only-arrow-function/Taskify.git
npm i
npm run dev
- 회원가입 버튼을 통해, 회원 가입 페이지로 이동
- 로그인 버튼을 통해, 로그인 페이지로 이동
- 헤더
- 헤더에서 현재 대시보드 이름, 프로필
- 프로필을 통해, 마이 페이지로 이동
- 사이드 메뉴
- 대시보드 조회 (페이지네이션)
- 대시보드 생성
- 회원 정보 수정
- 프로필 이미지 변경
- 로그인 및 회원 가입
- 유효성 검사
- 개별 대시보드 생성 (페이지네이션)
- 다른 이용자의 초대 수락 (무한 스크롤)
- 컬럼 생성, 삭제(무한 스크롤)
- 각 컬럼의 카드 생성, 삭제
- 각 카드 별 댓글 생성, 삭제
- 자신이 생성한 대시보드인 경우 접근 가능
- 대시보드 이름 변경, 색상 변경
- 대시보드 삭제
- 대시보드 초대
- 대시보드 맴버 조회
✅ 개발 실력 대비, 미흡했던 커뮤니케이션
✅ 각자의 일리 있는 주장이 끊임없이 누적.
✅ 타협이 어려웠던 개발 가치관
✅ tailwinnd.config.ts 파일에 적용 경로에서 벗어날 경우 tailwind가 인식하지 못함.
해결 방안
- 테일윈드는 클래스 이름을 추출할 때 끊어지지 않은 완전한 문자열로 존재하는 클래스만 인식. 즉, font-${fontWeight}와 같이 사용 불가. 따라서, 조건에 맞는 객체를 만들어서 사용.
- 클래스 이름을 모아둔 객체를 분리해서 사용하였는데, 클래스가 미적용. 이유는, tailwinnd.config.ts 파일에 적용 경로에서 벗어날 경우 tailwind가 인식하지 못함.
- tailwinnd.config.ts의 적절한 경로에 배치.
✅ Redux, context-api와는 다소 결이 다른 zustand 시스템을 올바르게 이해하지 못하고 개발을 진행.
설명 & 해결 방안
- zustand는 객체 자체를 반환한다(클래스의 인스턴스를 리턴) : provider가 존재하지 않는다.
- 즉, 훅으로 사용할 경우, 이미 생성된 객체에, 상태를 저장하는 구조다. (원리 : https://react.dev/reference/react/useSyncExternalStore)
- 따라서, 전역적으로 사용할 상태를 엄밀히 분리해야 한다. (모달의 토글 훅을 zustand로 관리해, 같은 페이지에서 모든 모달이 뜨는 이슈 발생.)
✅ SWR VS react-Query : 간편함 vs 폭 넓은 생태계
설명 & 해결 방안
- useSWRInfinite VS useinfinitequery: 무한 스크롤과 페이지네이션의 쿼리 키 관리의 어려움. 특히, 뮤테이션에서 문제가 발생.
- SWR의 뮤테이션은 자유도가 높은 대신, 전역적으로 흩어지는 서버 상태 쿼리를 관리하기 난해해 진다고 판단.
✅ useInfiniteQuery를 사용하는데 커서 기반 페이지네이션일 때.
해결 방안
- initialPageParam는 필수인데, 첫 api 요청할 때 cursorId params가 존재하면 안 된다.
- initialPageParam을 0으로 해서 분기 처리
✅ next의 useRouter로 파라미터값을 가져와서 SWR로 비동기 데이터 패칭을 진행하는 로직에서, 파라미터값을 가져오기 전에 SWR이 먼저 실행 되어서 id값에 undefined가 뜨는 이슈 발생
해결 방안
- 서버쪽 동작과 클라이언트쪽 동작이 비동기로 순서가 엉키면서 발생하는 이슈로 판단
- 프리렌더링을 이용해서 getServerSideProp으로 파라미터값을 가져와서 페이지에 전달하는 방식으로 수정
✅ accessToken을 localStorage로 관리 -> 페이지에서 localStorage에 접근해서 분기하려니 1차적으로 유저화면에 페이지가 렌더링되고 넘어가는 이슈 발생
해결 방안
- 클라이언트에서 localStorage접근하기 때문에 페이지가 렌더링 되는 모습이 보였다가 이동하는 문제로 판단
- 서버측에서 localStorage에 접근이 불가하기 때문에 토큰 관리를 서버에서도 접근 가능한 쿠키형태로 변환 후 middleware를 추가해서 서버에서 쿠키를 검사해서 리다이렉트 시키는 방식으로 변경
- 단, 로그인 렌딩페이지 회원가입 페이지는 middleware작동 제외
✅ "기술 스택의 전환"
- 기간이 짧은 프로젝트이기에 기술 스택을 바꾸는 점이 팀한테는 치명적일 수 있지만, 스프린터이기 때문에 긍정적인 의미로 다른 기술 스택을 전환했던 것이 가장 큰 의미.
- 프로젝트 진행이 매끄럽진 않았지만, 어떠한 환경에가더라도 적응할 수 있다라는 자신감을 키웠고, 그만큼 많이 배워갈 수 있었음.