10월 중순부터 시작된 위코드 풀스택 부트캠프, 그간 JavaScript
, HTML
, CSS
를 통해 기초를 다지며, 프론트엔드에서는 더 나아가 React
, SASS
백엔드에서는 Node.js
, Express
, MySQL
과 MVC Pattern
을 적용한 Layered pattern
, 서버와 통신 과정 등을 학습하며, 그간의 학습 과정을 다지기 위한 팀 프로젝트를 시작하게 되었습니다.
한 팀당 4~5명의 구성원을 이뤄 평소 팀원들이 구현해보고 싶었던 웹사이트를 클론 코딩하며, 그간 배운 프론트엔드와 백엔드 기술들을 적용해보며 부족한 부분을 점검하고, 공부했던 부분을 복습하며, 프로젝트에서 필요한 기술들을 더 배우고 성장할 수 있는, 여러모로 장점이 많은 프로젝트였다는 생각이 듭니다.
우리 팀은 Marple Shop 홈페이지를 클론 코딩하기로 정하였습니다. 홈페이지는 큰 범주로 메인 페이지, 리스트 페이지, 상세 페이지, 로그인/회원가입 페이지 로 나뉘어졌으며, 팀원이 5명이었던 우리 팀은 메인 페이지에서 프로젝트의 비중이 클 것이라고 생각한, 슬라이드
기능을 구현하는 역할을 메인 페이지에서 분리하여, 홈페이지의 4개의 범주, 그리고 슬라이드
기능을 포함하여 총 5가지의 역할을 프론트엔드와 백엔드에서 각자 1개씩 역할을 맡아 팀프로젝트를 진행하였습니다.
팀 프로젝트에서 제 역할은 프론트엔드에서는 디테일 페이지
/ 백엔드에서는 로그인 / 회원가입
을 맡게 되었으며, 이후 추가 기능 구현 사항에서 좋아요 기능
과 장바구니 추가, 삭제, 수정
기능을 추가적으로 구현하였습니다.
(마플샵 디테일 페이지 스크린샷 / 출처 : 마플샵)
이전 Starbucks clone coding
프로젝트에서 디테일 페이지에서 가장 많은 시간을 소모했습니다. 구현해야할 개별적인 컴포넌트들이 많은게 가장 큰 원인이라 생각합니다.
그렇게 많은 시간을 기울였던 작업이었고, 그만큼 기억에 남는 게 가장 큰 구현 페이지였던 것 같습니다. 팀원분들과 Frontend 역할분담을 할때 디테일 페이지
를 할 사람을 뽑을 때 가장 먼저 손을 들었는데 (왜 그랬지?) 팀원분들도 좋아하셨던 게 기억에 남습니다. 물론 이번 프로젝트에서도 작업하면서 많은 것을 배울 수 있었기에 잘 골랐다고 생각이 들며, 그렇기에 조금도 후회가 남지 않는것 같습니다. input type="radio"
의 활용법과, 데이터를 장바구니로 넘겨주는 작업 등의 과정에서 많은 기술을 배워갈 수 있었으며, 배우는 과정 또한 시행착오가 있었지만 지나 보면 정말 좋은 기억이었습니다.
(마플샵 로그인/회원가입 페이지 / 출처 : 마플샵)
로그인/ 회원가입 은 백엔드 (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
하며 프로젝트를 진행하였습니다.
중요한 점을 요약하자면,
pull
을 받기 전에 각자의 로컬 브랜치에서 변경사항을 필수적으로 확인하라.- 변경 사항이 있다면, 무조건적으로 작업 사항을 초기화 or
commit
까진 해두고branch
를 이동하여pull
받아라.- 팀원분들의 작업 사항이 최신화되면 하던 일 재껴두고,
pull & merge
하고 하루를 시작해라.- 팀 협업에서 가장 중요한 건
Git
이다.Git
에 대해 얕게 공부했다면, 팀 협업에서 피해를 줄 수 있다.Git
정말 중요하니 깊게 공부해라!
이 정도가 될 것 같습니다. 제 자신에게 하는 말이라고 생각하며 작성했기에 경어를 사용한 점 양해 바랍니다.
팀원분들 모두 프로젝트를 진행하면서 , 기능 구현이 잘 안 되거나, 프로젝트 코딩에서 진행사항이 만족스럽지 않다면 스트레스를 받았을 수도 있습니다. 하지만 모두가 동의할 수 있는 건,
Git
바로 이 친구로 인한 스트레스가 8할 이상이라는 것일 겁니다. 개인이 모든 프로젝트를 완성하는 것이 아닌 팀 협업을 통해 이뤄지는 프로젝트인만큼, Git
은 이번 프로젝트에서 7할 이상의 지분을 차지했다고 생각합니다. 기능 구현이 다 이루어졌더라도, Pull & Merge 등의 과정에서 많은 시련이 있었고, 그것들을 해결하기 위해 프로젝트에서 거의 제일 많은 시간을 썼다고 해도 과언이 아닙니다. 물론 이것들은 저희를 힘들게 했지만, 이러한 과정이 있었기에 저희 모두가 앞으로의 프로젝트에서 더 smooth하게 프로젝트를 이행할수 있을 것이며, 이전보다 더 능숙하고 슬기롭게 프로젝트를 이어갈 수 있을 것입니다. 그렇기에 이러한 과정은 이제 보면 정말 고마운 과정이었다고 생각이 듭니다.
거의 처음으로 하는 팀 프로젝트, 힘든 일도, 스트레스 받는 일도, 화나는 일도 많았습니다.
하지만, 이런 과정이 없다면, 개발자로써 발전할 수 없을 것이고, 앞으로의 프로젝트도 힘들어질 것입니다. 시련이 없으면 발전이 없다고 생각하고, 지나보면 뼈와 살이 되는 프로젝트였다고 생각합니다. 무엇보다 배운 것이 정말 많기에, 만족하며 앞으로 나아갈 수 있을 것 같습니다.
앞으로 어떤 시련들이 있을진 모르겠지만, 그 시련을 무서워하기보단 직면하며 앞으로 나아가는 것이 성장하는 과정이라고 결론지을 수 있을 것 같습니다. 이번 프로젝트를 통해 애매모호하게 알았던 개념들을 단단하게 다질 수 있었으며, 팀 협업에 대한 경험치를 쌓았고, Git
에 대한 이해도를 한껏 올릴 수 있었습니다.
제 부족한 점을 인지하며 더 노력하고 발전하는 개발자가 되겠습니다. 긴 글 읽어주셔서 감사합니다!