1차 프로젝트를 마친 후 바빠서 미뤘던 프로젝트 회고를 작성해보고자 한다.
프로젝트 소개
- 프로젝트 주제 - 캡슐커피 쇼핑몰
- 프로젝트명 - ${elicebucks} (엘리스벅스)
- 제작 기간 - 220523 ~ 220605 (2주)
- 기술 스택 -
Vanilla js,Node js,Express,Mongo DB등 - 팀 구성 - 5명 (프론트엔드 3명 + 백엔드 2명)
- 구현 기능
① 회원가입, 로그인, 회원정보 수정 및 탈퇴 등 사용자 관련 CRUD
② 카테고리 관련 CRUD, 제품 관련 CRUD, 주문 관련 CRUD
③ 장바구니 관련 기능을 프론트 단에서 수행
④ 관리자 페이지
⑤ 추가 개선 기능 (공지사항, 페이지네이션, 쇼핑몰 현황, 로딩)
- 담당 포지션
프론트엔드
팀장
- 담당 업무
메인
상품 목록
상품 카테고리
상품 상세
+) 공지사항
+) 페이지네이션
- 결과물 살짝 ⬇️
프로젝트 중 발생한 이슈 및 해결
- 컴포넌트 임포트 실패
우리 팀은 상단바 특정 부분(로그인, 로그아웃)을 따로 컴포넌트로 빼놓고 임포트해서 사용하는 식으로 구현을 했다. 그런데 일부 파일에서 임포트가 되지 않는 문제가 발생했다. 상대 경로로 ( ../url ) 임포트를 하고 있었는 데 해당 경로가 먹히지 않고 있었다. 이 부분에 대해서 원인을 알아보니 서버 사이드 렌더링이 아닌 클라이언트 사이드 렌더링이라서 클라이언트 브라우저 상 경로로 찾아가줘야 하는 것이었다. 그래서 ( /url ) 이나 (./../url) 이런식으로 임포트를 하니 문제가 해결되었다.
- 페이지네이션 처리 영역 구분
페이지네이션을 프론트와 백엔드 중 어디서 처리할 지에 대한 이슈도 있었다. 처음에 나는 프론트엔드에서 처리하는 것이 더 낫지 않나 생각했었다. 백엔드에서 페이지네이션을 처리하면 페이지 목록을 클릭할 때마다 url 쿼리가 변경되기 때문에 매번 재렌더링 되는 부분이 다소 어색하다고 느껴졌기 때문이다. 페이지네이션은 같은 페이지를 단순히 나눠서 보여주는 것이기 때문에 페이지 목록을 이동을 하더라도 재렌더링되지 않고 같은 페이지에 머물고 있다는 느낌을 줘야한다고 생각이 들었다.
이 부분에 대해서 백엔드 담당자분과 논의를 해보다가 결국은 결론이 나지 않아 코치님께 조언을 구했다. 코치님께서는 프론트에서 모두 처리하게 되면 프론트가 모든 데이터를 계속 보관하고 있어야하기 때문에 서버 성능에 무리가 갈 것이라고 말씀하셨다.
코치님의 조언을 듣고 서버의 성능을 위해 백엔드에서 처리하는 방법으로 결정하게 되었다.
프론트엔드 담당인 나는 단순히 유저 경험만을 고려하고 있었다는 사실을 깨달았고 프로젝트를 만들 때 서버 성능을 고려하는 것도 중요하다는 것을 잊지 말아야겠다고 생각했다.
- 백엔드와의 협업
팀원 분중에 이번이 코딩이 처음이신 분이 계셨었다. 그 분이 백엔드 상품 DB 담당이셨고, 나는 상품 목록, 상세 등을 담당했었기 때문에 그 분과 교류가 정말 많을 수 밖에 없었다. 처음이신걸 고려하고 어려움이 많으실 것 같아 도움을 드릴 수 있는 부분은 많이 도와드리려 했었다! 깃 사용법을 알려드린다던가, 개발을 하다가 자잘한 오류를 발견하여 담당자분께 알려드리는 등 조금씩 도와드리면서 개발을 진행을 했었다.
하루는 백엔드 담당자분께서 데이터베이스 관련으로 도움을 요청하셔서 함께 화상으로 코드를 뜯어보면서 이것저것 시도해보았지만 이상하게 잘 해결이 되지 않았다. 나는 그 과정에서 뭔가 백엔드 부분이 전체적으로 꼬여있는 듯한 느낌을 받았다..! 백엔드 3계층 구조를 모두 왔다갔다 하며 원인을 확인한 결과 함수를 엉뚱한 이름으로 불러와서 사용하고 계시는 등의 실수가 원인이었다. 3계층으로 개발을 하다보니 혼동이 있으셨던거 같다. 그렇게 3시간동안의 회의 끝에 원인을 찾고 오류를 잘 해결할 수 있었다!👏
나는 이번 일을 통해 프론트엔드가 백엔드의 지식도 어느정도 알아야겠다는 생각이 들었다. 오류가 발생했을 때 프론트엔드의 문제인지 백엔드의 문제인지 구분이 잘 안될 때가 있는 데, 백엔드를 어느정도 알면 구분이 쉬워지기 때문이다! 또한, 내가 생각했던거보다 프론트엔드는 다른 담당자분들과 교류가 정말정말 많았다. 그런 이유에서도 원활한 의사소통을 위해 어느정도는 알아야겠다는 생각이 들었다.
소감
제대로 된 팀 프로젝트는 이번이 처음이었던지라 많이 떨리고 부담감이 컸다. 그리고 얼떨결에 팀장까지 맡게 되어서 임무가 더 막중해진 기분이었다. 팀장인데 내가 맡은 1인분도 제대로 못 해내면 정말 팀원들 보기 부끄럽겠다는 생각이 들어서 부담이 너무 컸다🥲
부담감을 껴안고 프로젝트를 진행하다보니 뭔가 제대로 해결이 안 될 때마다 울고 싶기도 하고 이걸 못 해내면 안된다는 생각이 머릿속을 지배했다. (덕분에 꿈 속에서도 오류를 해결하고 있었다.)
시간 안에 마무리 해야한다는 압박감이 커서 2주 동안 잠도 제대로 못 자고 밥 먹는 시간도 아껴가면서 개발을 했다. 프로젝트를 진행하는 2주는 정말 역경과 고난의 연속이었지만, 프로젝트가 마무리 되어갈 쯤에는 전체적인 그림이 나오고 끝이 보이기 시작하니 정말 뿌듯했다. 그리고 팀원분들 모두 묵묵히 자기 역할을 다 잘해주셔서 완성할 수 있었던 거 같다.
팀프로젝트를 한 번 경험해보니 감이 잡혀서 다음 프로젝트는 이번보다는 익숙하게 할 수 있을 것 같다. 그리고 나에게 항상 깃은 어려운 존재였어서 늘 쓰던 기능만 썼었다. (add, commit, push...) 하지만, 이번 팀프로젝트를 진행하면서 깃에 대한 장벽을 뚫을 수 있었다.
프로젝트 시작 전에 깃을 익혀놔야겠다 싶어서 조금 만져보니 금방 익힐 수 있었고 깃을 헤매는 팀원분들께 사용법을 알려드리기도 했다! (뭔가 뿌듯...ㅎㅎ) 처음에 conflict 날 때 정말 당황스러웠는데 계속 하다보니 나중에는 conflict가 나도 능숙하게 해결할 수 있었다.
이번 경험을 통해 프로젝트에 대한 두려움을 뿌시고 많이 성장할 수 있었던 거 같다. 개발은 직접 해봐야 늘 수 있다는 것을 뼈저리게 느꼈다. 앞으로 시간 날 때 팀프로젝트나 개인프로젝트를 더 많이 해봐야할 것 같다.
