나의 첫 번째 팀 프로젝트
우리가 첫 프로젝트로 클론 코딩하게 된 사이트는 의류 쇼핑 커머스 사이트 플리츠마마 이다.
우리가 가장 자주 접하는 사이트중 하나가 바로 쇼핑몰 사이트이고 주된 기능으로는 회원가입, 로그인, 상품 리스트 및 정보, 상품 구매가 있다.
사이트 시연 영상
이런 의류 쇼핑몰 사이트가 첫 프로젝트에 적합하다는 생각이 있던터라 만족스러웠던 마음과 동시에 우리가 이걸 만든다고...? 싶은 막연함도 있었다.
개요
팀 구성원
Front-end: 라용, 장문정, 최주원Back-end: 위정우, 장기석
기술 스택
Front-end:- React.js
- SASS
Back-end:- Node.js
- Express
- JSON WEB TOKEN
- Bycrpt
- Mysql
- Multer
공통- AWS
- RestFul API
Back-end 구현기능
- 유저 회원가입(이메일, 비밀번호, 전화번호, 생년월일은 유효성 검사 적용)
- JWT 토큰을 이용한 로그인, 사용자 검증
- 대분류, 소분류 카테고리 별 제품 리스트 및 색깔 필터 기능
- 판매 테이블에 따른 상위 판매 순으로 12 제품 나열
- 장바구니 (추가, 삭제, 수량, 체크 변경)
- 결제 페이지
- 제품 상세 페이지
- 제품 구매자에 한해 제품 리뷰 작성, 수정, 삭제 기능
나의 역할
- 유저 회원가입
- DB와 비교하여 로그인, 로그인시 JWT 토큰 부여
- 카테고리에 따른 제품 리스트
- 쿼리스트링으로 main 카테고리(대분류), sub 카테고리(소분류) 구분하여 상품 리스트 나열, 추가로 상품 리스트에서 색깔 필터로 특정 색깔의 상품 출력
- 신상품 카테고리
작업을 하면서
회원가입 로그인
지금까지 수업으로 만들었던 회원가입과 로그인 API는 최소한의 조건(아이디, 이름, 비밀번호)만 필요로 했지만 wepleats에서는 추가로 프로필 이미지, 성별, 전화번호, 생년월일이 필요했다.
거기에 일부 정보에는 추가로 필수로 값이 들어와야하는 NOT NULL 조건으로 값이 없을시 에러를 반환하는 에러 핸들링을 적용시키다 보니 회원가입과 로그인 기능을 구현하는데도 약간 고생을 했다.
카테고리 - 제품 리스트
이게 데이터를 불러오기만 하는 기능이다 보니 처음에는 정말 쉬울줄 알았다.
하지만 쿼리스트링을 처음 접해보면서 이해하는데 어려움이 있었고 쿼리문을 작성하는데에도 카테고리에 따른 거기에 그 카테고리의 색깔 필터 조건을 넣으려고 하니 마땅한 답이 떠오르지 않았다.
WHERE 절에서 조건을 CASE-WHEN문과 IF문 중 하나를 사용해보라는 조언을 듣고 둘 다 몇번 사용해본 결과 IF문이 더 적합하다고 판단되어 IF문으로 조건을 걸어주었다.
AND IF쪽이 색깔 필터 조건을 거는 부분인데 AND가 교집합이다보니 쿼리스트링으로 color 값이 들어오지 않았을 때 교집합으로 인해 반환되는 값이 아예 없는 문제가 발생해 이틀동안 해결방안을 찾느라 해맸다.
그래서 color 값이 없을 때 그냥 상품 테이블의 id 전체를 불러온 뒤 교집합으로 합치는 식으로 해결했다.
또한 내가 폴더들을 분할해 관리하는 라우트 개념과 RESTful API 개념을 잘 몰랐는데 만족스러울 정도는 아니지만 어느 정도 친밀해 질 수 있는 기회가 되었다.
못한 점, 아쉬운 점
나는 정말 정말 부족한 사람이라는 걸 절실히 깨닫게 된 첫 프로젝트였다.
기술적으로 너무 미숙하다 보니 시작을 어떻게 해야할지 몰랐고 시작을 하면 어떻게 진행해야 할지 전혀 모르는 상태였다.
시간은 한정돼있고 나는 아직 구현한 게 얼마 있지도 않다 보니 다른 사람들과 비교된다는 생각에 멘탈은 갈라지고 자괴감도 들었다.
그렇게 2주일이라는 시간동안 내가 구현 해낸것은 3가지 기능밖에 없었고 더 해보고 싶은 작업이 있었으나(리뷰 작성 API) 전혀 감도 안오고 시간도 없어서 건드리질 못했다.
또 기능 구현에만 급급하다 보니 코드를 너무 지저분하게 작성한 것이 안타깝다.
그리고 프론트와의 소통이 부족했던 것에서도 아쉬움이 컸다.
나는 전혀 몰랐는데 엔드포인트와 반환되는 KEY, VALUE 값을 프론트와 맞춰야 했던것이다.
프론트에게 알려주지 않은게 많다보니 나중에서야 통신할 때 프론트 팀원들이 부랴부랴 우리가 설정한 엔드포인트와 반환되는 값들을 맞춰 설정하는 일이 있었다.
잘한 점
진짜 팩트로 따지면 너는 너무 할 줄 아는 게 없다며 자책하며 잘한 건 없다고 하는 게 맞겠지만...
굳이 나에게 좋은말을 해보자면 힘든 시간을 버텨준 나를 칭찬해 주고 싶다.
한창 원인 모를 에러만 보다가 원하는 것을 출력해냈을 때 기분은 정말 좋다.
한창 고민하다 짜증 내고 때려치우고 싶어 하다 원하는 결과를 이루어 냈을 때 기뻐하며 비록 남들보다는 느리지만 차근차근 한 걸음씩 꾸준히 쭉 앞으로 나아가 간지나는 개발자가 되었으면 한다.
개선할 부분
- 빈약한 기본기
난 베이스가 너무 부족하다.
뭐만 하려고 하면 내가 했던 다른 작업들이나 공부했던 메모를 찾아봐야만 진행이 가능했다.
이 부분은... 최대한 많이 적어봐야 개선될 사항이라고 생각된다.
대부분의 문제는 베이스가 없는것에서 비롯된 문제들이다.
- 지저분한 코드
이 부분은 멘토님들의 코드 리뷰를 통해 더 깔끔하게 작성하는 방법을 익히고 리팩토링을 통해 개선해 나가야 할 것 같다.
사실 기본기가 약하면 개선해야 할 것은 널리고 널렸다. 그리고 나는 공부만 해서는 금방 익숙해지지 못한다.
무조건 직접 해보면서 실제로 겪어야 깨닫는 스타일이라 많은 시도와 경험이 필요하다.
2차 프로젝트를 앞두고...
남에게는 별거 없어 보이지만 나에게는 정신없고 걱정 근심 가득했으며 끝나서도 아쉬웠던 프로젝트였다.
더 해보고 싶은 게 많았지만 나의 부족함으로 하지 못한다는 것은 너무 자존심이 상하는 일이다.
하지만 그 힘듦 속에서 마침내 한 기능을 구현해냈을 때 기분은 정말 짜릿하다.
앞으로 힘들 날은 더 많고 더욱 고통스럽겠지만 그것들을 버티고 버텨 한 번씩 터지는 짜릿함을 기대하며 다음 프로젝트에도 임하려고 한다.
그리고 언젠가 매일같이 짜릿함을 느낄 수 있는 날이 오기를 꿈꾼다.
