[월간 회고] 프론트엔드 데브코스 회고 (12.19~1.18)

😋팀 프로젝트

들어가며

이번 달 회고는 약 한 달간 진행한 팀 프로젝트에 대해 다뤄보려고 한다. 학교에서 수업 시간에 팀 프로젝트를 진행한 경험이 있지만 이렇게 많은 인원들로 협업 프로젝트를 진행하는 것이 이번이 처음이었고 협업 툴을 제대로 사용해서 프로젝트를 처음 진행해서 걱정 반 기대 반이었다..😥
https://github.com/prgrms-fe-devcourse/FEDC5_MatNam_Ducki

GitHub - prgrms-fe-devcourse/FEDC5_MatNam_Ducki

기획

프로젝트의 주제는 SNS였습니다. SNS의 컨셉을 팀원들과 회의를 통해 선정했는데 맛집 공유라는 컨셉이 선정되었다.

SNS의 기능은 로그인/로그아웃, 회원가입, 게시물 CRUD, 게시물 필터링, 댓글, 좋아요, 알림, 유저 간 메시지 기능을 구현했고 개발을 진행하면서 추가했으면 좋을 기능들은 회의를 통해 추가하기로 했다.

협업

Task 분담

Task 분담은 기능 명세서를 기준으로 본인이 맡은 역할에 따라 github issue에 작성하면서 분담을 했다. 기능 명세서를 큰 단위로 나누다 보니 처음 issue를 생성하고 개발을 진행할 때 어려움을 겪어서 조금 더 작은 단위로 Task를 나누어서 개발을 진행했습니다.

PR과 코드리뷰

우리 팀은 Git-flow 브랜치 전략을 선택했고, 이를 바탕으로 조금 커스텀하였다.
main, dev 브랜치로 나누고 dev 브랜치 기반으로 각 issue 별로 브랜치를 생성하였다. issue 별로 브랜치를 생성하여 작업을 해서 PR과 issue를 연결하여 PR을 작성할 때 매우 편리했다.

 

PR과 issue는 템플릿을 사용하여서 작성했고 PR을 작성하는 부분이 처음에는 귀찮았지만 프로젝트를 진행하면서 PR을 통해 서로의 진행사항을 알 수 있었고 팀원들 간의 비동기적인 소통도 가능해서 정말 중요하다는 것을 느꼈다.

 

코드 리뷰의 중요성을 많이 느꼈다. 구현한 기능을 코드 리뷰를 통해 approve가 되면 merge를 하였는데 코드 리뷰가 늦어져서 merge가 늦어지면 그만큼 개발이 지연이 되어서 최대한 빠르게 팀원들의 코드를 리뷰하려고 노력했다. 코드를 리뷰하면서 많이 배울 수 있었고 팀원분들이 더 좋은 구현 방식을 소개해주면서 놓친 부분을 피드백받을 수 있어서 너무 좋았다.

github Projects

github Projects에서 칸반 보드를 사용하여 일정 관리를 하였습니다. Issue와 Pull Request를 연동하여 사용하니까 정말 편했다.

👨‍💻배운점

재사용성 높이기

SNS를 구현하다 보니 자주 사용하는 컴포넌트가 많았다. Button 컴포넌트, Toast 컴포넌트, ReviewCard 컴포넌트 등 많은 컴포넌트를 여러 페이지에서 재사용했는데 이 부분에서 props를 어떻게 추상화할지 고민을 많이 했던거 같다. 필수 props를 최대한 출이고 optional하게 구현했다.
아쉬웠던 점은 메인 컬러와 사이즈를 빠르게 정한 후에 Button 컴포넌트를 구현했으면 조금 더 수월하고 편하게 컴포넌트를 만들었을거 같다.

협업

프론트엔드 파트에서 5명이 협업한 경험은 처음이어서 많이 혼란스러웠다. 처음에 갈팡질팡했고 어떻게 issue를 만들고 어떤 부분부터 시작해야지?? 5명이 같이 작업하는데 github 충돌을 최대한 안 발생시키도록 어떻게 작업하지?? 라는 생각을 많이 했다. 이런 사소한 생각을 가지면서 작업을 하니 브랜치를 깔끔하게 관리할 수 있었고 충돌은 많이 발생하지 않아서 좋았다.

코드리뷰의 중요성

처음 데브코스에서 과제를 하면서 코드 리뷰를 해봤는데 너무 어려웠고 어떻게 할지 감이 안잡혔다. 그리고 코드 리뷰의 중요성을 크게 못느꼈다. 그런데 이번 프로젝트에서 팀원들이 올린 PR에 코드 리뷰를 하고 내 PR을 코드 리뷰 받으면서 내가 놓친 부분을 팀원들이 피드백해주고 다른 팀원들이 놓친 부분을 내가 피드백해주면서 프로젝트 진행하는데 크게 도움이 되었던거 같다. 그리고 코드 리뷰를 빠르게 해줘야 다른 Task를 진행할 수 있다는 것을 깨닫고  PR이 올라오면 최대한 빠르게 코드 리뷰를 진행하려고 노력했다.

Figma 디자인 시스템

프로젝트 기획을 할 때 Figma를 활용하여 디자인

🤔아쉬웠던 점

일정 관리

처음에 task를 나눌 때 페이지 별로 task를 나누어서 많이 헤맸다. 우리 팀은 일단 각 task를 구현하고 재사용되는 컴포넌트를  찾아서 나중에 구현하는 방향으로 진행했는데 처음 task 작업을 시작해보니 재사용되는 컴포넌트들이 너무 많아서 방향성을 바꾸면서 시간이 많이 소요되었던 점이 아쉬웠다.

요구사항 구체화

요구 사항을 구체화하지 못한 점이 너무 아쉬웠다. 요구 사항을 조금 더 세세히 나누었다면 프로젝트 진행하는데 조금 더 원할했을거 같다. 구체화하지 못하다 보니 한 issue에 많은 기능들을 개발하여 다른 task들이 딜레이되는 경우도 많았고 재사용할 수 있는 함수나 hook들이 많았는데 이 부분을 각자 구현하다 보니까 불 필요한 코드가 많아졌다.

 

프로젝트 후기

고려해야할 점들이 많았다

학교에서 프로젝트를 몇 개 진행해봤지만 모두 구체적인 기획과 컨벤션없이 기능을 구현하기에 급급한 프로젝트였지만 이번 프로젝트에서는 컨벤션과 기획을 나름 꼼꼼하게 진행하면서 고려해야할 점이 프로젝트 세팅과 컨벤션에 대해서 많이 배웠던거 같다. 팀원분들에게 너무 감사함을 느끼는중..🙏

힘들지만 뿌듯함

프로젝트의 방향성을 잘못 잡아서 시간이 촉박했다. 1월 3일 멘토님과의 식사 이후에 프로젝트의 방향성을 잘 잡을 수 있었고 그 이후에 개발을 엄청나게 했다. 약 2주간의 기간이 정말 순식간에 지나갔고 코드 리뷰와 개발을 병행하면서 힘들었지만 완성된 결과물을 보니까 너무 뿌듯했다.

앞으로의 계획

프로젝트 기능 추가

맛남의 길 프로젝트에서 구현 못했던 부분이나 조금 더 추가하고 싶은 기능들이 있으면 구현할 예정이다.
일단 ReviewList에서 무한 스크롤 기능을 구현하고 싶다..!

이력서 / 포트폴리오 작성

이제 조금씩 취업 준비를 해야될거 같다는 생각이 들었다. 이력서와 포트폴리오를 작성하면서 내 실력과 기술 스택을 확인해 보면서 부족한 부분을 많이 보완해야겠다.

코테 문제 틈틈히 풀기

코테 문제를 틈틈히 풀긴 했지만 너무 쉬운(?) 간단한(?) 문제 위주로 풀었던거 같다.

내가 부족한 부분을 많이 보완해야겠다.

 

벌써 데브코스가 2달 밖에 남지 않았다. 중간에 많이 힘들기도 했지만 프로젝트를 하면서 코딩에 재미를 많이 느낀거 같다. 협력을 잘하고 기술적으로 습득력이 좋은 개발자가 되고 싶다..😊