[코드잇 스프린트 FE 19기] 기초 프로젝트 - 롤링 회고

🔗 프로젝트 - 롤링

1. 🚨 Tailwind + cva + clsx + twMerge 조합에서 커스텀 유틸리티가 적용되지 않을 때

2. 🚨 PropTypes에서 JSDoc으로 — React 19 타입 관리 트러블슈팅

3. 🚨 낙관적 업데이트 — 이모지 반응 UI 미반영 트러블슈팅

4. [코드잇 스프린트 FE 19기] 기초 프로젝트 - 롤링 회고

---

코드잇 스프린트에서 진행한 약 2~3주간의 기초 프로젝트가 마무리되었다.

프로젝트가 끝난 지 2주 정도 지난 지금 간단하게 회고를 남겨보려 한다.

 

1️⃣ 프로젝트 개요

이번 팀 프로젝트로 진행한 프로젝트는 롤링(Rolling)이다.

롤링은 온라인에서 롤링페이퍼를 만들고 메세지와 이모지를 등록/조회/삭제 할 수 있는 서비스이다.

 

처음으로 진행한 프론트엔드 팀 프로젝트였기 때문에

기대 반, 걱정 반의 마음으로 시작했지만 결과적으로 잘 마무리할 수 있었다.

 

이번 프로젝트에서는 팀장을 맡아서

UI 구현, 에러 처리, 토스트 알림, API 연동등을 담당하였다.

 

2️⃣ 주요 경험 또는 배운 점

이번 프로젝트에서는 처음으로 Github Issue를 사용해보았다.

Issue 템플릿을 만들고, PR과 연결해보면서 깃허브 워크플로우에 좀 더 익숙해질 수 있었다.

마일스톤으로 전체 기간 관리도 해보고,

Wiki를 활용해 팀 컨벤션이나 커스텀 훅 사용 방법을 정리해서 협업 효율을 높이기 위해 노력했다.

 

기술적으로는 useContext를 사용해서 전역 상태 관리를 구현했다.

다만 구현할 때 Fast Refresh 관련 에러가 발생해서

Context 생성 파일, Provider 파일, Hook 파일을 모두 분리하는 방식으로 구현했었다.

지금 생각해보면 Jotai나 Zustand 같은 전역 상태 관리 라이브러리를 도입했더라면

파일을 좀 더 단순화할 수도 있었을 것 같다.

 

또한 클라이언트 상태와 서버 상태 불일치 문제를 직접 경험해보면서

이전에는 단순히 좋다고만 알았던 서버 상태 관리 라이브러리의 필요성을 체감하게 되었다.

→ 이 부분은 🚨 낙관적 업데이트 — 이모지 반응 UI 미반영 트러블슈팅 글에서 자세히 다루었다.

 

3️⃣ 아쉬웠던 점 & 다음 목표

🔹 팀 컨벤션

프로젝트 시작 전에 호기롭게 팀 컨벤션을 세세하게 정했었는데,

대체로 잘 지켰지만… 모두가 까먹고 지키지 못한 컨벤션이 있었다.

 

함수명 관련 컨벤션인데, async 함수명에 접미사로 async을 붙이기로 했지만

모두가 잊어서 흐지부지 되었다. 🫠

 

컨벤션을 너무 엄격하게 정하기 보다는,

ESLint로 제어 가능한 범위 내에서 관리하는 것이 좀 더 편리한 것 같다는 생각이 들었다.

 

🔹 상태 관리 라이브러리 도입

이번 프로젝트에서는 상태 관리 라이브러리를 사용하지 않았지만,

다음 프로젝트에서는 적극적으로 도입해볼 계획이다.

이를 통해 코드 구조를 더 깔끔하게 유지하고, 서버 상태 관리도 개선해보고 싶다.

 

🔹 코드 리뷰 & 일정 관리

프로젝트 기간 중 추석 연휴가 포함되어 일정에 여유가 있을 줄 알았지만,

팀원마다 작업 속도가 달라 실제로는 여유롭지 않았다.

 

또한 코드 리뷰와 공유가 충분히 이루어지지 않아 아쉬움이 남았다.

대부분 Gemini 코드 리뷰에 의존했고,

나 역시도 디자인 시안과의 차이, 중복 코드 정도만 검토했었다.

 

다음 프로젝트에서는 정기적인 코드 리뷰와 코드 공유 시간을 마련해서

팀원 간 협업의 완성도를 높여보고 싶다.

 

🎬 마무리

작은 프로젝트였지만, 협업 도구 활용과 상태 관리의 중요성을 직접 체감할 수 있었던 좋은 기회였다.

다음 프로젝트도 파이팅!🕺

 

📎 관련 링크

프로젝트 트러블슈팅

1. 🚨 Tailwind + cva + clsx + twMerge 조합에서 커스텀 유틸리티가 적용되지 않을 때

2. 🚨 PropTypes에서 JSDoc으로 — React 19 타입 관리 트러블슈팅

3. 🚨 낙관적 업데이트 — 이모지 반응 UI 미반영 트러블슈팅

 

프로젝트 GitHub

https://github.com/Sprint-19-Rolling/frontend

GitHub - Sprint-19-Rolling/frontend: Rolling - 롤링페이퍼

 

프로젝트 Wiki

https://github.com/Sprint-19-Rolling/frontend/wiki

Home

 

 

프로젝트 시연 영상

https://www.youtube.com/watch?v=PKDVtuITyT4