두번째 프로젝트를 마치고

 

코드잇 스프린트 - FE 부트캠프 에서 2번째 팀프로젝트 경험을 회고하려 한다.

마무리한지는 2주 정도 지났는데 그새 마지막 프로젝트를 코앞에 두고 급히 포스팅 !! !

---

서비스 소개 : 할일 관리 협업 툴 
프로젝트 기간 : 2024.10.18 - 2024.11.05
[깃허브](https://github.com/fe9-4/taskify)
[배포 링크](https://www.taskify.kr/)

새로운 일정관리 | Taskify

 

주요 기능
1. 유저 기능
2. 대시보드, 컬럼, 카드, 댓글 - CRUD
3. 멤버 초대, 관리 기능 

 

기술 스택 : Next.js v.14 App router, 타입스크립트 v.5, 리액트 v.18

CSS : 테일윈드 

Next.js 를 선택한 이유? 

유연한 파일 기반 라우팅 : 각 페이지와 api 엔드 포인트를 직관적으로 관리
- 개발 및 배포 용이성 : Next.js에 최적화된 vercel 호스팅 플랫폼을 사용하여 빠르게 개발하고 신속하게 기능 추가 및 배포 
- httpOnly 쿠키를 활용한 인증 구현 -> API 라우터를 사용해 클라이언트가 쿠키를 직접 다루지 않고 서버에서 요청마다 인증 상태를 확인할수있어 보안성 높임

 

패키지 및 라이브러리
- Zod - 데이터 스키마 지정 
- Jotai - 전역 상태 관리 
- 리액트 쿼리 - 데이터 fetch, 캐싱
- 리액트 훅폼

---

 

- 내가 기여한 점

버튼 공통 컴포넌트 구현

시안에 나와있는 버튼이 크기와 구성이 제각기라서 나름대로 효율적으로 구현하고자 했지만 생각처럼 쉽지는 않았다.

공통 컴포넌트는 다양한 페이지와 상황에 걸쳐 사용되므로 확장성을 고려한 설계가 중요하다는 점을 깨달았다!

초반에 이 점을 놓쳐서 여러 번에 걸쳐 컴포넌트를 수정해야했다.

 

사이드바 - 대시보드 조회 및 추가 기능

모바일 UX 를 개선하기 위해 사이드바 확장 기능을 추가했다.

 

관리 페이지 - 대시보드 정보 수정, 멤버 관리 (초대 및 삭제) 

리액트 훅 폼을 사용해볼 수 있었다.

 

사이드바와 관리 페이지에서는 각각, 개별 api 응답을 받아왔다가 이후에 리액트 쿼리를 이용해 공통적으로 쓰이는 데이터를 받아옴 

-> 초반에 전 서비스에 걸쳐 어떤 데이터가 어디에서 쓰이는지를 먼저 파악하는게 중요하다는걸 배울 수 있었다. 

(공통적으로 쓰이는 데이터가 있다면 리퀘스트가 불필요하게 중복되지 않도록 & 서버 데이터가 수정될 때 업데이트 연동을 위해) 

 

- 새롭게 배운 것

Next.js app router, tailwind, 기타 라이브러리 등 처음 사용해보는 것들이 많아서 러닝커브도 꽤 있었고, 제대로 사용 못해본 것들도 많다. 그래서 더 나의 부족한 점을 깨닫고 열심히 배울 수 있는 좋은 기회였다.

 

app router 를 쓰긴 했지만 대부분 클라이언트에서 처리해줘야하는 것들이 많아서 서버 컴포넌트를 제대로 활용해보진 못했다.

 

그리고 tailwind 도 처음 사용해봤다. 좋다는 얘기를 많이 들어서 기대(?) 했는데, 막상 써보니 모바일 first로 하는것도 낯설고 스타일마다 계속 문서 찾아봐야해서 뭐야 좋다며!? 이러다가 적응이 되긴 하더라 ㅎ 나중에는 거의 문서 검색없이 사용했다. vs code에서 intellisense 를 같이 쓰는것도 매우 도움이 되었다.

module css만 쓰다가 tailwind를 썼더니 장단점을 확실하게 느껴볼 수 있었다. (별도 파일 만들고 import 하는 과정 생략 / 클래스 이름 만들지 않아도됨 / 스타일 코드가 너무 길어짐 )

 

그 외의 아쉬운 점들은 ...

프로젝트 초반에 유저 플로우를 작성해보긴 했지만 나중에 다시 보니 단순히 페이지를 나열한것밖에 안되는것같아서 아쉬움이 있었다. 실제로 유저가 서비스를 사용하는 일련의 흐름을 이해하는 것이 중요하다는걸 배웠다.

 

그리고 데이터 연결하는 것도, 우선 ui 만들고 목데이터로 구현해둔 다음에 나중에 api 연동하는게 효율적이었겠다 하는 아쉬움이 있었다.

 

브랜치 전략 : 팀원 별 브랜치를 사용해서 여러 기능 PR 이 겹쳐지고, 리뷰하기 어려웠음. 

- 이전의 프로젝트보다 기능이 많아지면서 기능별 브랜치를 사용하는게 좋았겠다는 팀원들이 공통된 의견이었다.

 

개발 일정 관리가 부족했다.

구현할 기능을 세분화 하고, 각 파트마다 어느정도 기간이 걸릴지 산정하고, 완료 후에 다시 한번 일정을 체크하는 게 미흡했다.

---

다음 프로젝트에서 개선한 부분 

최종 프로젝트 시작 전까지 2주의 시간이 남아서 중급 프로젝트 주제 중 가장 난이도가 낮은 프로젝트를 골라서 

세미 (?) 프로젝트를 진행했다 

 

이전 프로젝트에서 아쉬웠던 부분을 하나씩 개선해서 적용해볼 수 있었다. 

- 목데이터를 활용해서 UI 구현 먼저 하고, 이후에 데이터 연결하기

- 1 feature 1 branch

- 깃허브 프로젝트 로드맵을 활용한 개발 일정 관리 

 

자세한 회고는 별도로 포스팅 해야겠다.