첫 프로젝트를 마무리 하며

1.  프로젝트 소개

• RUSH KOREA 모티브로 한 팀 프로젝트

2.  개발기간 및 인원

• 개발기간 : 2022년 10월 17일(월) ~ 2022년 10월 27일(목)
• 개발 인원 : 6명(FE 3명, BE 3명)

3.  구현한 기능

• 초기세팅
• 회원가입 및 로그인
• 메인페이지 API
• 상품 상세페이지 API 및 제품 list 태그별 가격순 정렬 구현
• 상품 리뷰 CRUD
• 이벤트 상품 리뷰 CRUD

4.  사용된 기술 스택

• FE : REACT, JAVASCRIPT,  CSS , HTML
• BE : NODE JS, EXPRESS, MYSQL, JAVASCRIPT
• 협업 도구 : GIT, GITHUB, TRELLO, AWS

5.  프로젝트 시연 영상

 

이미지 gif

프로젝트 시연 영상 by YouTube

 

6.  KPT IN MY PROJECT

1)  KEEP

☑︎ 무작정 코드를 치기 보다는 개발자 관점에서 무엇이 필요할지 관망하고 생각하기
☑︎ 오류 코드 발생 시 당황하지 말고 해당 오류 코드가 무엇인지 고민하고 구글링 해서 해결하기
☑︎ 팀원들과의 소통을 최우선으로 하기

2)  PROBLEM

☑︎ 어떻게 시작해야 할지 막막함과 중압감에 빠져 프로젝트 시작 후 허우적 거림
☑︎ ERD 이해에 대한 부족함이 느껴져서 팀원들과 소통 시 다소 어려움을 느낌
☑︎ FE PM의 이탈로 BE와 FE간의 소통에 있어 어려움 발생

3) TRY

☑︎ 모듈화를 통한 글로벌 에러핸들링 적용으로 코드의 재사용성 및 확장성에 용이하도록 함
☑︎ ERD 이해를 위해 스스로 테이블 작성 및 TablePlus를 통해서 DB를 직관적으로 이해하도록 노력함
☑︎ 멘토들과 상담을 통해 방향성 잡기 및 매일 아침 운동을 통한 멘탈 회복 연습을 함
☑︎ 기분이 태도가 되지 않도록 노력하였으며 조원들이 힘들어 하는 모습을 보면 응원해 주기
☑︎ FE에서 구현하지 않는 기능도 추가적으로 시도해 봄 (리뷰 CRUD 및 제품 태그별 필터링 기능)

7.  구현 사항

1 ) 회원 가입 및 로그인

• 회원 가입 시 유효성 검사를 통해 적절한 이메일, 패스워드, 휴대폰 번호가 기입되게 구현하였으며 사용자의 패스워드는 bycrpt 모듈을 임포트 하여 hash 메서드를 사용하여 hashpassword로 변경하여 암호화 하였다. 또한, 사용자가 로그인 시 compare 메소드를 통해 로그인 시 사용된 패스워드와 해시패스워드가 일치하는지 확인하는 로직을 구현하여 유효성 검사를 실시하였고 일치할 경우 JWT(JsonWebToken)를 통해 생성된 토큰을 유저에게 전달하였다.

2) 메인 페이지 API 구현

• 러쉬 코리아 메인페이지를 클론 하기 위해 이벤트 이미지를 events 테이블에서 불러왔고, 베스트 상품을 나타내기 위해 가장 많이 팔린 제품들을 내림차순으로 나타내어 프론트에게 전달하였다. 이때 쿼리파라미터를 통해 프론트가 원하는 개수만큼 베스트 상품이 나타날 수 있도록 구현하였다.

3) 상품 상세 페이지 API 구현 및 리뷰 CRUD 구현

• 상품리스트에서 해당 상품 클릭 시 해당 상품에 대한 상세페이지를 불러오는 API 및 해당 상품의 리뷰에 관한 CRUD를 구현하였다. 리뷰 작성 시 로그인할 때 유저에게 제공된 토큰을 통해 유저의 아이디를 얻어서 유저 아이디와 해당 상품의 아이디를 통해 유저가 이 제품을 구매했는지, 그리고 구매하였다면 이미 리뷰는 남겼는지 여부를 확인하는 유효성 검증을 구현하였다. 수정이나 삭제 또한 해당 리뷰를 작성한 유저가 맞는지 확인하는 로직을 구현하여 임의의 사용자가 리뷰 작성 및 수정, 삭제가 일어나지 않도록 하였다.

4) 이벤트 페이지 리뷰 CRUD 구현

• 이벤트 페이지의 리뷰 같은 경우 해당 구매자가 아니라도 정상적으로 로그인 한 유저 일 경우 리뷰를 작성할 수 있게 구현하였다. 단, 중복된 리뷰 작성은 불가능하고 리뷰 작성자만 해당 리뷰를 수정 및 삭제할 수 있도록 로직을 구현하였다.

5) 제품 태그 별 가격순으로 상품 정렬 기능 구현

• 해당 태그 이름 클릭 시 해당 태그에 속한 제품들을 가격순으로 내림차순 또는 오름차순으로 정렬하였다. 그리고 쿼리파라미터를 적용하여 프론트에서 원하는 개수만큼의 제품들이 정렬될 수 있도록 설정하였다.

 

8.  프로젝트 후기

  한 달간의 배움이 제대로 정리가 되지 않은 상태에서 생애 첫 프로젝트를 맡으며 많은 걱정이 들었고 이는 곧 현실이 되었다. 팀원들끼리 모여 러쉬 코리아 사이트를 보며 각자 맡을 파트를 나눌 때, 해당 페이지를 보며 무엇을 어떻게 구현해야 할지 전혀 감이 오질 않았다. 이미 능숙하게 대화가 오고 가는 다른 백엔드 팀원들을 보며 나 자신이 초라해지고 눈에 띄게 보이는 실력 차이에 매일매일 열등감을 느끼었다. 그러던 도중 프런트 PM을 맡고 있던 분이 중도 하차하면서 나 또한 멘탈이 흔들리기 시작하였다. 그렇게 프로젝트가 시작한 지 며칠간은 정말 어찌해야 할지 갈피를 못 잡았고 ERD 테이블 작성 마무리 및 데이터 구축 작업이 완료되어 갈 때 즈음하여 내가 팀원들을 위해 잘할 수 있는 일이 무엇일지 고민하였다.

 

  우선적으로 나의 현재 상황으로 인해 팀원들에게 피해가 가지 않기 위해 내 기분이 태도가 되지 않도록 밝은 모습을 보이려고 노력하였으며 힘들어하는 팀원들에게 조금이라도 위로가 되기 위해 긍정의 말들을 전해주며 팀원이 사기충천할 수 있도록 하였다. 또한, 열등감에 사로잡혀 허우적 되면서도 열등감이 노력의 원동력이 되어 매일 집에 와서 새벽녘까지 부족한 이론 점검 및 해당 페이지를 보며 무엇을 FE에게 전달해야 할지 생각해 보고 코드를 작성해 가는 연습을 하였다. 그리고 해당 페이지에 필요한 로직이 무엇인지 직접 사이트에 가입하여 내가 회원이 되었을 때 이런 게 필요하겠지 생각하는 시간을 가졌다. 그러다 보니 1주 차 막바지쯤부터 메인 페이지를 구현을 비롯하여 몇 개의 기능들을 구현할 수 있게 되었다. 이미 다른 팀원이 구현한 기능도 해보고 싶어서 팀원이 작성한 코드를 분석하며 생각해 보는 시간도 가졌고 그 과정 속에서 이 팀원이 이런 로직을 구현하고 코드를 작성하기까지 얼마나 많은 시간과 노력이 필요했을까라는 생각을 가지면서 팀원을 롤 모델도 삼고 닮아가고자 하였다.

 

무탈하게 1차 프로젝트를 마치며 지난 2주를 돌이켜 보니, 나의 부족함이 무엇인지 깨달을 수 있게 되었고 앞으로의 공부 방향성을 다시 정립하는데도 많은 도움이 되었다. 2차 프로젝트에서는 나의 부족함을 개선하여 더 나은 결과물을 얻을 수 있도록 노력할 것이다. 많이 부족한 나를 이끌어 주고 함께해 준 팀원들에게 감사의 말을 전하며 1차 프로젝트 후기를 마무리하려고 한다.