✨프로젝트 소개

👨‍💻 Members

Codeit FE Sprint 4기 - 3팀

멤버 소개👀

구승모

김재성

노은수

윤아영

이동현

개별 역할☝️

• 구승모
  
  • 로그인 & 회원 가입 관리
  • 페이지 : 마이 페이지
• 김재성
  
  • 컬럼, 카드 도메인
  • 페이지 : 대시보드 페이지
  • 로컬 스토리지 -> 쿠키, 미들웨어
  • 무한 스크롤
  • Dnd 적용
• 노은수
  
  • git flow 초기 설정, 레포지토리 관리
  • 무중단 배포 및 도메인 연결
  • 페이지: 수정 페이지
  • react Query: 서버 상태 초기 설정
  • 페이지 네이션
• 윤아영
  
  • 초대 도메인
  • 페이지 : 마이 대시보드, 수정 페이지
  • 무한 스크롤
• 이동현
  
  • 페이지 : 마이 대시보드, 랜딩 페이지
  • 페이지네이션, 무한 스크롤
  • Dnd 적용
  • 스켈레톤

🎞 Duration

2024.04.15(월) ~ 04.30(화)

☀️ Project Topic

스마트하게 자신의 일정을 관리하는 서비스

💻 Site

https://taskify-six-eta.vercel.app/

🛠️ Skills & Tools

📚 Library

💬 Community

🚢 Deploy

---

✨로컬 환경 - 설치 및 실행 가이드

1. Getting the sources

git clone https://github.com/only-arrow-function/Taskify.git

2. Install packages

npm i

3. Run development server

npm run dev

---

✨ Feature

1. 랜딩 페이지 (컴포넌트 명: pages/index.tsx)

• 회원가입 버튼을 통해, 회원 가입 페이지로 이동
• 로그인 버튼을 통해, 로그인 페이지로 이동

2. 도메인 레이아웃 (컴포넌트 명: components/dashboard/header & layout, components/side-menu)

• 헤더
  • 헤더에서 현재 대시보드 이름, 프로필
  • 프로필을 통해, 마이 페이지로 이동
• 사이드 메뉴
  • 대시보드 조회 (페이지네이션)
  • 대시보드 생성

3. 마이 페이지 (컴포넌트 명: pages/mypage/index.tsx)

• 회원 정보 수정
• 프로필 이미지 변경

3. 회원가입 & 로그인 페이지 (컴포넌트 명: pages/login/index.tsx, pages/signup/index.tsx)

• 로그인 및 회원 가입
• 유효성 검사

4. 마이 대시보드 페이지 (컴포넌트 명: pages/my-dashboard/index.tsx)

• 개별 대시보드 생성 (페이지네이션)
• 다른 이용자의 초대 수락 (무한 스크롤)

5. 대시보드 페이지 (컴포넌트 명: pages/dashboard/[id]/index.tsx)

• 컬럼 생성, 삭제(무한 스크롤)
• 각 컬럼의 카드 생성, 삭제
• 각 카드 별 댓글 생성, 삭제

6. 대시보드 수정 페이지 (컴포넌트 명: pages/dashboard/[id]/edit/index.tsx)

• 자신이 생성한 대시보드인 경우 접근 가능
• 대시보드 이름 변경, 색상 변경
• 대시보드 삭제
• 대시보드 초대
• 대시보드 맴버 조회

---

💡 Git branch strategy : Git flow

---

✨ Problem & solution

개발 환경 및 협업 관련

⚠️ 소통의 부재

✅ 개발 실력 대비, 미흡했던 커뮤니케이션

⚠️ 긴 토의 시간

✅ 각자의 일리 있는 주장이 끊임없이 누적.

✅ 타협이 어려웠던 개발 가치관

기능 구현 요소 관련

⚠️ 테일윈드에서 클래스 이름 적용 문제

✅ tailwinnd.config.ts 파일에 적용 경로에서 벗어날 경우 tailwind가 인식하지 못함.

해결 방안

• 테일윈드는 클래스 이름을 추출할 때 끊어지지 않은 완전한 문자열로 존재하는 클래스만 인식. 즉, font-${fontWeight}와 같이 사용 불가. 따라서, 조건에 맞는 객체를 만들어서 사용.
• 클래스 이름을 모아둔 객체를 분리해서 사용하였는데, 클래스가 미적용. 이유는, tailwinnd.config.ts 파일에 적용 경로에서 벗어날 경우 tailwind가 인식하지 못함.
• tailwinnd.config.ts의 적절한 경로에 배치.

⚠️ zustand: 다른 전역 상태 라이브러리와는 다른 시스템.

✅ Redux, context-api와는 다소 결이 다른 zustand 시스템을 올바르게 이해하지 못하고 개발을 진행.

설명 & 해결 방안

• zustand는 객체 자체를 반환한다(클래스의 인스턴스를 리턴) : provider가 존재하지 않는다.
• 즉, 훅으로 사용할 경우, 이미 생성된 객체에, 상태를 저장하는 구조다. (원리 : https://react.dev/reference/react/useSyncExternalStore)
• 따라서, 전역적으로 사용할 상태를 엄밀히 분리해야 한다. (모달의 토글 훅을 zustand로 관리해, 같은 페이지에서 모든 모달이 뜨는 이슈 발생.)

⚠️ SWR -> React-Query 마이그레이션

✅ SWR VS react-Query : 간편함 vs 폭 넓은 생태계

설명 & 해결 방안

• useSWRInfinite VS useinfinitequery: 무한 스크롤과 페이지네이션의 쿼리 키 관리의 어려움. 특히, 뮤테이션에서 문제가 발생.
• SWR의 뮤테이션은 자유도가 높은 대신, 전역적으로 흩어지는 서버 상태 쿼리를 관리하기 난해해 진다고 판단.

⚠️ react-Query 라이브러리와 제공받은 api와의 호환성

✅ useInfiniteQuery를 사용하는데 커서 기반 페이지네이션일 때.

해결 방안

• initialPageParam는 필수인데, 첫 api 요청할 때 cursorId params가 존재하면 안 된다.
• initialPageParam을 0으로 해서 분기 처리

⚠️ 서버와 클라이언트 비동기 처리 이슈

✅ next의 useRouter로 파라미터값을 가져와서 SWR로 비동기 데이터 패칭을 진행하는 로직에서, 파라미터값을 가져오기 전에 SWR이 먼저 실행 되어서 id값에 undefined가 뜨는 이슈 발생

해결 방안

• 서버쪽 동작과 클라이언트쪽 동작이 비동기로 순서가 엉키면서 발생하는 이슈로 판단
• 프리렌더링을 이용해서 getServerSideProp으로 파라미터값을 가져와서 페이지에 전달하는 방식으로 수정

⚠️ 토큰값 없을 시 login페이지로 리다이렉트 처리 중 페이지 렌더링되는 이슈

✅ accessToken을 localStorage로 관리 -> 페이지에서 localStorage에 접근해서 분기하려니 1차적으로 유저화면에 페이지가 렌더링되고 넘어가는 이슈 발생

해결 방안

• 클라이언트에서 localStorage접근하기 때문에 페이지가 렌더링 되는 모습이 보였다가 이동하는 문제로 판단
• 서버측에서 localStorage에 접근이 불가하기 때문에 토큰 관리를 서버에서도 접근 가능한 쿠키형태로 변환 후 middleware를 추가해서 서버에서 쿠키를 검사해서 리다이렉트 시키는 방식으로 변경
• 단, 로그인 렌딩페이지 회원가입 페이지는 middleware작동 제외

✨ 프로젝트 진행하면서 의미있었던 점

✅ "기술 스택의 전환"

• 기간이 짧은 프로젝트이기에 기술 스택을 바꾸는 점이 팀한테는 치명적일 수 있지만, 스프린터이기 때문에 긍정적인 의미로 다른 기술 스택을 전환했던 것이 가장 큰 의미.
• 프로젝트 진행이 매끄럽진 않았지만, 어떠한 환경에가더라도 적응할 수 있다라는 자신감을 키웠고, 그만큼 많이 배워갈 수 있었음.

---

🙏QnA