📲 팀 프로젝트

10월 중순부터 시작된 위코드 풀스택 부트캠프, 그간 JavaScript, HTML, CSS를 통해 기초를 다지며, 프론트엔드에서는 더 나아가 React, SASS 백엔드에서는 Node.js, Express, MySQL과 MVC Pattern을 적용한 Layered pattern, 서버와 통신 과정 등을 학습하며, 그간의 학습 과정을 다지기 위한 팀 프로젝트를 시작하게 되었습니다.
한 팀당 4~5명의 구성원을 이뤄 평소 팀원들이 구현해보고 싶었던 웹사이트를 클론 코딩하며, 그간 배운 프론트엔드와 백엔드 기술들을 적용해보며 부족한 부분을 점검하고, 공부했던 부분을 복습하며, 프로젝트에서 필요한 기술들을 더 배우고 성장할 수 있는, 여러모로 장점이 많은 프로젝트였다는 생각이 듭니다.

⭐️ Team : Wepleshop

우리 팀은 Marple Shop 홈페이지를 클론 코딩하기로 정하였습니다. 홈페이지는 큰 범주로 메인 페이지, 리스트 페이지, 상세 페이지, 로그인/회원가입 페이지 로 나뉘어졌으며, 팀원이 5명이었던 우리 팀은 메인 페이지에서 프로젝트의 비중이 클 것이라고 생각한, 슬라이드 기능을 구현하는 역할을 메인 페이지에서 분리하여, 홈페이지의 4개의 범주, 그리고 슬라이드 기능을 포함하여 총 5가지의 역할을 프론트엔드와 백엔드에서 각자 1개씩 역할을 맡아 팀프로젝트를 진행하였습니다.
팀 프로젝트에서 제 역할은 프론트엔드에서는 디테일 페이지 / 백엔드에서는 로그인 / 회원가입 을 맡게 되었으며, 이후 추가 기능 구현 사항에서 좋아요 기능 과 장바구니 추가, 삭제, 수정 기능을 추가적으로 구현하였습니다.

🐳 Frontend / 디테일 페이지

(마플샵 디테일 페이지 스크린샷 / 출처 : 마플샵)

이전 Starbucks clone coding 프로젝트에서 디테일 페이지에서 가장 많은 시간을 소모했습니다. 구현해야할 개별적인 컴포넌트들이 많은게 가장 큰 원인이라 생각합니다.
그렇게 많은 시간을 기울였던 작업이었고, 그만큼 기억에 남는 게 가장 큰 구현 페이지였던 것 같습니다. 팀원분들과 Frontend 역할분담을 할때 디테일 페이지를 할 사람을 뽑을 때 가장 먼저 손을 들었는데 (왜 그랬지?) 팀원분들도 좋아하셨던 게 기억에 남습니다. 물론 이번 프로젝트에서도 작업하면서 많은 것을 배울 수 있었기에 잘 골랐다고 생각이 들며, 그렇기에 조금도 후회가 남지 않는것 같습니다. input type="radio"의 활용법과, 데이터를 장바구니로 넘겨주는 작업 등의 과정에서 많은 기술을 배워갈 수 있었으며, 배우는 과정 또한 시행착오가 있었지만 지나 보면 정말 좋은 기억이었습니다.

🐳 Backend / 로그인 / 회원가입 기능

(마플샵 로그인/회원가입 페이지 / 출처 : 마플샵)

로그인/ 회원가입 은 백엔드 (Node.js, Express)를 사용하며 거의 처음으로 배운 API 입니다. 그렇기에 처음 구현 성공시에 매우 행복하고 기뻤던 기억이 있기에, 그만큼 저에겐 애정이 많이 가는 API입니다. 그렇기에 이 기능은 제가 담당하였으며, 구현 과정 또한 애정하는 기능인만큼 즐겁게 구현할 수 있었던 기억이 있습니다.
CRUD 와 REST API POST METHOD를 통해 모든 기능을 구현할 수 있었으며, users 테이블을 통해 회원을 관리하도록 해주었습니다.
기능 구현을 완료하고 저는 나름 코드를 잘 짰다고 생각했지만, 멘토님의 피드백을 받으며 CRUD를 통한 구분이 명확하지 않으며, 코드에 대한 이해가 많이 부족함을 느끼고, 로그인 /회원가입 기능에 대한 코드들을 찾아 보며 부족한 점을 고칠 수 있었기에 많이 배울 수 있었습니다.

이후에는 추가 기능 구현 사항이었던, 좋아요 기능과 장바구니 기능을 구현했습니다.
좋아요 기능은 POST / DELETE Method를 통해 구현할 수 있었는데, users_likes 테이블에 user_id와 product_id 를 연관지어주는 중간 테이블로써 지정해주어, 그에 해당하는 좋아요가 눌렸을 때 해당 데이터를 추가해주고, 좋아요 취소가 되면 해당 데이터를 삭제하면 되겠다고 생각해보니 흥미가 생겨 시간 날 때 구현했습니다. 사실 시간이 남아 재미 삼아 구현한 기능이라 POSTMAN 을 통해 기능 구현이 잘 되는 것을 확인했을 때, 팀원분들께 칭찬을 들었던 좋은 기억이 있습니다.

장바구니 역시 원래는 제 역할이 아니었지만, 디테일 페이지 UI를 제작하면서, 사실상 장바구니에 필요한 모든 데이터를 장바구니 페이지 내에서 모두 간편하게 추출할 수 있었습니다. 제품의 URL, 제품의 이름, 사이즈, 색상, 수량, 가격 모든 데이터를 이미 제가 Backend를 통해 받은 데이터를 토대로 추출하고 정제해놨기 때문에, 이 데이터를 보내주기만 하면 장바구니 기능을 쉽게 구현할 수 있겠다는 자신감이 있었고, 시도해본 결과 성공적으로 데이터를 보내줄 수 있었습니다. 이 데이터를 토대로 carts 테이블에 각 항목에 대한 데이터를 담아주어, 장바구니 페이지에서 해당 데이터들을 user_id와 연관지어 불러오기만 하면 장바구니 페이지를 쉽게 구현할 수 있었습니다.(물론 UI 구현을 제외하고) 고심했던 디테일 페이지의 데이터 추출과 정제를 더 나아가 장바구니 API에 효율적으로 활용할 수 있었기에 이번 프로젝트에서 가장 보람찼던 과정이었다고 생각합니다.

🥰 회고

사실 코딩에서 문제되는 건 많지 않았습니다. 가장 큰 스트레스의 주범은 바로 GIT (뭐 사실 제대로 인지하지 못했던 내 잘못이 크긴 하지만..)
저는 사실 GIT을 상당히 간과하고 있었다고 생각합니다. 그저 프로젝트에 도움을 주지만, 내 코딩 공부나, 코드를 짜는 것에 도움이 되는 플랫폼은 아니기에, 많이 간과하고 있었던 것 같습니다. 하지만 프로젝트에서 코딩보다 훨씬 중요한건 팀과의 협업, 소통 이었다는 것을 뼈저리게 느꼈으며, 그것은 돌아가 GIT과 매우 밀접한 관련이 있었기에, GIT이 사실상 프로젝트 내에서 거의 제일 중요하다고 느끼게 되는 계기가 되었습니다.
git pull 이 친구를 통해 제가 이번에 Git과 많이 친해질 수 있었습니다. 저희 프로젝트의 GIT 진행은 main branch에서 develop branch를 생성하고 그 밑에 각자의 역할 (ex : feature/login, feature/signup, feature/carts 등등)의 branch를 맡아 작업을 수행하고 각자의 branch에 push를 하며 이후 github 페이지에서 팀원분들의 approve를 받아 승인이 되면 develop branch 에 merge를 하고 다시 각자의 local develop branch에서 pull을 받아 각자의 역할 branch에서 develop branch를 merge 하며 프로젝트를 진행하였습니다.
중요한 점을 요약하자면,

1. pull 을 받기 전에 각자의 로컬 브랜치에서 변경사항을 필수적으로 확인하라.
2. 변경 사항이 있다면, 무조건적으로 작업 사항을 초기화 or commit 까진 해두고 branch를 이동하여 pull 받아라.
3. 팀원분들의 작업 사항이 최신화되면 하던 일 재껴두고, pull & merge 하고 하루를 시작해라.
4. 팀 협업에서 가장 중요한 건 Git이다. Git에 대해 얕게 공부했다면, 팀 협업에서 피해를 줄 수 있다. Git 정말 중요하니 깊게 공부해라!

이 정도가 될 것 같습니다. 제 자신에게 하는 말이라고 생각하며 작성했기에 경어를 사용한 점 양해 바랍니다.

팀원분들 모두 프로젝트를 진행하면서 , 기능 구현이 잘 안 되거나, 프로젝트 코딩에서 진행사항이 만족스럽지 않다면 스트레스를 받았을 수도 있습니다. 하지만 모두가 동의할 수 있는 건,
Git 바로 이 친구로 인한 스트레스가 8할 이상이라는 것일 겁니다. 개인이 모든 프로젝트를 완성하는 것이 아닌 팀 협업을 통해 이뤄지는 프로젝트인만큼, Git은 이번 프로젝트에서 7할 이상의 지분을 차지했다고 생각합니다. 기능 구현이 다 이루어졌더라도, Pull & Merge 등의 과정에서 많은 시련이 있었고, 그것들을 해결하기 위해 프로젝트에서 거의 제일 많은 시간을 썼다고 해도 과언이 아닙니다. 물론 이것들은 저희를 힘들게 했지만, 이러한 과정이 있었기에 저희 모두가 앞으로의 프로젝트에서 더 smooth하게 프로젝트를 이행할수 있을 것이며, 이전보다 더 능숙하고 슬기롭게 프로젝트를 이어갈 수 있을 것입니다. 그렇기에 이러한 과정은 이제 보면 정말 고마운 과정이었다고 생각이 듭니다.
거의 처음으로 하는 팀 프로젝트, 힘든 일도, 스트레스 받는 일도, 화나는 일도 많았습니다.
하지만, 이런 과정이 없다면, 개발자로써 발전할 수 없을 것이고, 앞으로의 프로젝트도 힘들어질 것입니다. 시련이 없으면 발전이 없다고 생각하고, 지나보면 뼈와 살이 되는 프로젝트였다고 생각합니다. 무엇보다 배운 것이 정말 많기에, 만족하며 앞으로 나아갈 수 있을 것 같습니다.
앞으로 어떤 시련들이 있을진 모르겠지만, 그 시련을 무서워하기보단 직면하며 앞으로 나아가는 것이 성장하는 과정이라고 결론지을 수 있을 것 같습니다. 이번 프로젝트를 통해 애매모호하게 알았던 개념들을 단단하게 다질 수 있었으며, 팀 협업에 대한 경험치를 쌓았고, Git에 대한 이해도를 한껏 올릴 수 있었습니다.
제 부족한 점을 인지하며 더 노력하고 발전하는 개발자가 되겠습니다. 긴 글 읽어주셔서 감사합니다!