Rollingpaper 배포 주소: https://rolling-api-14-7.vercel.app/

코드잇 프론트앤드 기초 프로젝트 회고

이번 코드잇 스프린트에서 저는 첫 프로젝트를 경험했습니다. 주어진 여러 기초 시안 중에서 우리 팀은 롤링페이퍼 프로젝트를 선택했고, 짧은 개발 기간 동안 숨 가쁘게 달려와 마침내 성공적으로 완료할 수 있었습니다. 프로젝트 기간 동안, 특히 프로젝트 경험이 부족한 팀원들과 함께였기에 저는 리더로서 더욱 정신없는 시간을 보냈습니다.

1. 프로젝트 소개

• 프로젝트 인원: 4명 (프론트 4명)
• 프로젝트: 롤링페이퍼 웹페이지
• 깃허브 링크: https://github.com/FE14-Team7-Project1/rolling-paper
• 협업: Github, Jira, Discord
• 기술 스택:
  • Frontend: React, Styled-Component
  • Backend: 외부 API 활용
• 나의 역할:
  • API 구성 및 커스텀 hooks 개발
  • 메인페이지, 롤링페이퍼 페이지, 메세지 카드, 모달, 카카오 공유, toast, 개발
  • 시연 영상 및 프로젝트 발표

2. 개발 전 프로젝트 기획

피그마:

다이어그램:

우리 팀은 프로젝트 초기 단계에서 피그마 시안을 면밀히 분석하고 주요 기능들을 도출했습니다. 이를 바탕으로 사용자 다이어그램을 작성하여 서비스 흐름을 명확히 파악하고, 각 페이지의 요소 및 기능들을 세부적으로 정의했습니다. 또한, 효율적인 개발을 위해 필요한 공통 컴포넌트들을 사전에 선정하여 코드 재사용성을 높이고 개발 속도를 향상시켰습니다.

폴더 구성:

저희는 주요 기능과 사용자 흐름을 명확히 파악한 후, 프로젝트 폴더 구조를 설계하는 단계에 돌입했습니다. 팀원들과 미팅을 통해 프로젝트 구조를 구체화하고, 효율적인 개발 환경을 구축하는 데 집중했습니다.

기본적인 폴더 구조를 설정하고, components 폴더 내에 common과 domain 폴더를 추가하여 컴포넌트들을 체계적으로 관리할 수 있도록 구성했습니다. 개발 과정에서 추가적인 폴더들이 생성되기도 했지만, 초기 설정했던 기본 구조를 유지하며 프로젝트를 진행했습니다.

모든 기초 구성이 완료된 후, 저희는 효율적인 프로젝트 관리를 위해 지라(Jira)를 도입하기로 결정했습니다. 이를 위해 프로젝트의 큰 목표인 에픽(Epic)과 세부적인 작업 단위인 스토리(Story)를 정의하고, 위 사진과 같이 이슈들을 생성했습니다. 생성된 이슈들은 스프린트 단위로 나누어 관리하며 개발을 진행했습니다.

특히, 짧은 개발 기간을 고려하여 스프린트를 총 3개로 구성하고, 각 스프린트 기간을 4일로 설정하여 집중적인 개발을 진행했습니다. 스프린트 단위로 작업을 분배하고 관리함으로써, 팀원들은 각자의 역할과 목표를 명확히 인지하고 효율적으로 협업할 수 있었습니다.

2. 개발 과정

잘된점:

저희 팀은 매일 스크럼 미팅을 통해 개발 진행 상황을 공유하며 유기적으로 협업했습니다. 덕분에 팀원 모두가 개발 기간을 철저히 준수했고, 프로젝트를 순조롭게 진행할 수 있었습니다.

기초 프로젝트였던 만큼 기술적인 어려움은 크지 않았습니다. React Vite를 기반으로 프로젝트를 구성하고, 페이지 파일, 라우터 설정, API 설계, 공통 컴포넌트 등 필요한 요소들을 효율적으로 분담하여 기간 내에 완료했습니다.

특히, API 관련 코드를 깔끔하게 커스텀 훅으로 분리하여 팀원들의 사용 편의성을 높였고, 데이터 처리 과정에서 발생하는 문제점을 최소화했습니다.

이렇게, 프로젝트 초기 단계에서 기초 구성을 탄탄하게 다져놓은 덕분에 공통 컴포넌트와 스타일을 활용하는 데 어려움이 없었고, 오히려 개발 생산성을 향상시키는 데 큰 도움이 되었습니다.

또한 이번에 처음으로 카카오톡 API를 활용하면서 카카오 데브툴에 대한 지식도 얻어가고 직접 프로젝트에 반영을 해보니 큰 어려움도 없었기애 다음 기회도 또 사용하게 된다면 자신있게 개발을 맡을 수 있을거 같습니다.

아쉬웠던 점:

개발 과정에서 Styled-Component를 처음 접하게 되면서 스타일 분리 및 관리 방법에 대한 어려움을 겪었습니다. 평소 Tailwind를 선호했던 저에게는 Styled-Component의 스타일링 방식이 다소 낯설게 느껴졌고, 개발 속도가 느리다고 생각했습니다.

하지만 Styled-Component를 사용하면서 스타일 내에서 JavaScript를 실행할 수 있다는 점과 스타일 분리를 통해 코드 가독성을 높일 수 있다는 장점을 발견했습니다. 덕분에 다음 프로젝트에서는 Styled-Component를 더욱 능숙하게 활용할 수 있을 것 같습니다.

또한, PR(Pull Request)을 활용했지만, 코드 리뷰 및 피드백이 충분하지 않았던 점이 아쉬웠습니다. 다음 프로젝트에서는 PR을 적극적으로 활용하여 코드 품질을 높이고 팀원 간의 코드 리뷰를 활성화할 계획입니다.

3. 롤링페이퍼 사이트 프리뷰

4. 후기

짧은 개발 기간은 우리 팀에게 큰 도전이었습니다. 모든 팀원이 빠르게 적응하고 협력해야만 했고, 특히, 프로젝트 경험이 부족한 팀원들이 있었기에, 저는 그들의 진행 상황을 면밀히 살피고 필요한 지원을 제공하는 데 집중했습니다.

기술적인 문제나 스프린트 기간 조금 넘어갈 때도 있었지만 저는 팀원들과 함께 문제 해결 방법을 모색하고, 원활한 커뮤니케이션을 유지하기 위해 데일리 스크럼과 디스코드를 활용한 소통을 노력해야 했었습니다. 특히 리더로서, 저는 팀원들이 프로젝트에 집중할 수 있도록 미리 기획도 짜오고 폴더 구성을 만들어 좋은 개발 환경을 조성하고, 각자의 역할을 명확히 하여 효율적인 협업을 이끌어내고자 했었습니다. 이러한 과정을 통해 저는 리더십뿐만 아니라 문제 해결 능력, 팀워크의 중요성을 다시 한번 깨달을 수 있었습니다.

이번 프로젝트는 저에게 큰 성장의 기회를 제공했습니다. 구체적으로 저는 styled-component의 활용, client API 설계, 프로젝트 구조 설계 등을 얻어간거 같아서, 앞으로 이러한 기술들을 또 사용하게 되면 자신감을 가지고 임할 수 있을 것 같습니다.