기초 프로젝트 Rolling 25.08.09 ~ 25.08.26
"직접 만날 수 없을 때, 주인공 몰래 준비해야할 때, 롤링을 이용해보세요!"
코드잇 스프린트 부트캠프에 참여해서 처음으로 팀 프로젝트를 진행했다. 2주동안 팀원들과 함께 React, JS로 차력쇼를 한 기분이 들었다. 아직 타입스크립트도, 넥스트js도 배우지 않은 상황에서 최대한 배운것을 활용하고 검색으로 정보를 끌어모아서 완성한 기분이 들었다. 팀장을 맡아서 약간의 부담도 있었지만 좋은 팀원들을 만나서 무사히 잘 끝낼 수 있다고 생각한다. 팀원들이 다른 팀에 가서도 팀 프로젝트를 잘 하면 좋겠다.
어떻게 만들었나
주제선정이유
주어진 주제 중에 골라야 했는데 컴포넌트가 많은 프로젝트, CRUD를 익힐 수 있는 프로젝트를 고르게 되었다. 그리고 선정과정에서 롤링에 대해 이야기 할때 팀원들 모두 여러 개선사항에 대한 이야기를 해서 해당 주제를 선택하게 되었다. 프로젝트와 관련된 figma, notion, swagger문서를 본 후 선택했다. 우리팀은 6명이었고, 컴포넌트를 기준으로 나누어 개발을 시작하기로 했기 때문에 컴포넌트가 가장 많은걸 골랐다.
주제 선정 이후 vite와 react, node.js, tailwindcss의 버전을 정하였다. 당시 팀원 중 한명이 스타일은 tailwindcss를 사용하고 싶다며 제안해왔고 우리팀 모두 클래스명을 짓는데 시간이 많이 쓰이는 편이라 다들 동의하였다. tailwindcss v4가 리액트와 충돌이 발생한다는것을 알게되어 v3으로 하게 되었고, node도 lts중 안정적인 버전으로 고르게 되었다.
팀장이 repository를 만들면 된다고 해서 이왕 할거 팀으로 만들자! 하는 마음에 organization도 만들고, 팀원들을 초대하고 repository를 만들었다. 우리팀의 flow는 다음과 같다.
- 팀 Repository(이하 upstream)에 main(배포용) / develop(개발 통합용) 브랜치를 만든다.
- 개인 Repository에 fork한다.
- 각자 브랜치를 만들어서 로컬에서 작업한다.
- 자신이 작업한 브랜치를 upstream/develop에 PR을 올린다.
- 코드리뷰를 진행 한 후 개선이 필요하면 그 branch에서 수정을 진행하고 push 한다.
- 개선 후 develop에 merge한다. 이때 최소 팀원 1명의 approve가 필요하다.
- 각자의 repository develop 브랜치와 작업중인 branch를 최신화 한다.
[upstream repository]
│
├── main (배포용)
│
└── develop (작업 병합용)
│
▼
fork 개인 repository
│
▼
(create branch) 로컬 작업
│
▼
PR → upstream/develop
│
(코드 리뷰 진행)
│
개선 필요 시 → 수정 후 push
│
▼
upstream/develop merge
│
▼
개인 develop & 작업 branch 최신화
여러 컨벤션
파일명, 폴더구조, 커밋, PR, JSDoc 컨벤션을 정해서 노션에 정리하였고 최대한 지킬 수 있도록 노력하였다. (관련 노션 페이지)
User Flow
무엇을 담당했는지
- 초기 프로젝트 셋팅
- User Flow 작성
- 노션, 리드미 등 문서 관리
- 텍스트 에디터 생성
- 메세지 작성 페이지 및 관련 컴포넌트 생성
- 데일리스크럼, 팀 미팅 등 일정 및 회의 주도
- 발표자료 준비 및 발표
- 프로젝트 배포
| 텍스트 에디터 | 페이지 및 컴포넌트 |
|---|---|
 |  |
개선 진행한 부분
- 폰트 설정 부분
| BEFORE | AFTER |
|---|---|
 | |
폰트를 일괄적용하는 시안이었으나, 텍스트 에디터 내부에 폰트 선택을 추가하여 사용자가 원하는대로 폰트 복수 적용 가능하도록 변경했다.
- 프로필이미지 업로드
| BEFORE | AFTER |
|---|---|
 |  |
API에서 제공하는 이미지만 선택 가능하였으나 cloudinary를 이용해서 사용자가 이미지를 업로드하고, 해당 이미지를 프로필로 등록 할 수 있도록 개선했다.
3. tanstack query의 invalidate 적용
메세지 작성 후 뒤로가기를 누르면 메세지 작성 페이지로 넘어가는 것이 아닌, 롤링페이퍼 리스트를 볼 수 있는 페이지로 이동하도록 설정했다.
배운것
- react-quill 라이브러리 사용법
- 컴포넌트를 어떻게 나누면 좋을것인가
- 컴포넌트의 활용법
- 컨벤션을 정할때 무엇을 세세하게 정하고 가야 하는가 - 폴더구조
- JSDoc의 유용함
- 팀원들과 의사소통의 중요성
- 내가 2주라는 시간동안 하루에 어느정도 집중해서 개발을 할 수 있는지
- tanstack query 맛보기 활용법
- cloundinary 맛보기 활용법
- vercel을 활용해서 배포할때의 기본적인 유의점, 설정방법 등
- vercel에서 SEO관련 배포를 하려면 먼저 정적파일을 생성해서 같이 배포해야 한다는 점
- Lighthouse의 존재, 접근성 라벨 적용하기
추가로 해보고 싶은 부분
- message 컴포넌트 분리하기
- editor 컴포넌트 분리하기
- 다른 editor 라이브러리 활용해보기
- 셀렉트박스 공통 컴포넌트로 만들어보기
- 이미지 업로드(cloudinary) 공부하기
- tanstack query 공부하기
아쉬운점
- 스켈레톤 UI를 담당 페이지에 적용하지 못한것
- cloudinary, tanstack query등을 많이 공부하지 못하고 코드를 적용한 것
- 프로젝트 시작 전 개인과제 프로젝트를 좀 열심히 할걸 하는 후회가 들었다.
- github의 issue, wiki등을 활용하지 못한 것
- storybook을 시도해보지 않은 것
좋았던 점
- 팀원들이 컨벤션을 최대한 지키려고 했던 점
- 의사소통을 할 때 예의를 지키려고 노력하고, 서로 의견을 들어주고, 배려해주었던 점. 그리고 활발하게 의사소통이 되었고 변경사항을 적용한 점.
- 컴포넌트부터 개발을 시작해서 각자 공통으로 사용하는 컴포넌트를 어떻게 사용할것인지 팀원들이 논의하고 해결해 나간 점.
- 피그마와 기본 요구사항 외에 UX개선을 위해 고민해서 각자 맡은 부분을 수정한 것
느낀점
첫 팀 프로젝트에서, 내가 모든것을 잘 알고 있는 상태가 아닌채로, 팀장을 하게 되어 부담이 있었는데 팀원들이 정말 중요하다는 것을 다시한번 느낄 수 있었다. 그리고 어려운것을 해야 성장한다는것을 많이 깨달았다. 내가 설치한 라이브러리(react-quill)는 최대한 공부하며 코드를 짜보려고 노력했는데 에디터 커스터마이징에 시간이 걸리다보니 다른 라이브러리 활용에 있어서 할애할 수 있는 시간이 부족했다. 틈틈히 공부를 해야겠다고 느꼈다.
