1. 프로젝트 요약

• 클론 사이트: 라인 프렌즈 스토어
• 프로젝트 이름: 라인 어벤져스
• 프로젝트 기간: 2021.03.15 ~ 2021.03.26 (2주)
• 팀원
  👉 프론트엔드: 경현님(PM), 담호님, 상연님, 나
  👉 백엔드: 국현님, 규동님
• 깃허브 링크
  👉 프론트엔드
  👉 백엔드
• 사용된 기술 스택
  ✅ HTML
  ✅ Sass, Scss
  ✅ React (CRA, react-router-dom, class형 컴포넌트)
• 커뮤니케이션 및 버전 관리
  📌 Slack / Trello / git / gitHub

2. 구현한 페이지

• 로그인/회원가입 페이지 , 메인 페이지 , 상품 리스트/상세 페이지 , 마이페이지/장바구니 페이지 총 7개의 페이지를 첫 스탠드업 미팅때 담당 파트를 나눴다. 로그인/회원가입 페이지 는 담호님, 메인 페이지 는 경현님, 장바구니/마이 페이지 는 상연님, 나는 상품리스트/상세페이지 를 맡았다.

2-1. 내가 구현했던 기능들

• 상품 간략보기 모달창 구현
• 상품 리스트 레이아웃 변경 애니메이션 구현
• map 함수를 활용하여 상품, 리뷰 리스트 렌더링
• sort 함수를 활용하여 상품, 리뷰 리스트 정렬
• filter 함수를 활용하여 무료배송, 상품 타입에 따른 리스트 렌더링
• pageOffset , pageSize, slice 함수를 활용하여 페이지네이션 구현
• query string parameter 를 활용하여 해당 카테고리 상품 리스트 렌더링
• Scroll 이벤트, scrollTo 함수를 활용하여 탭 메뉴 이동/변경 및 상단 메뉴 컴포넌트 Opacity 조정
• position 속성과 mouse 이벤트를 활용하여 상품 이미지 변경, 리뷰 리스트 슬라이드 기능 구현
• filter 함수 / spread 연산자를 활용하여 찜, 장바구니 담기, QnA 등록/수정/삭제 기능 구현

3. 기억에 남는 코드

✅ 페이지네이션 구현

• 이번 프로젝트를 통해 페이지네이션을 처음으로 구현해봤다.
• query string 을 이용해 백엔드 분과 데이터 통신을 통해 구현할 수도 있지만 직접 전체 데이터를 받아 pageSize 만큼 잘라 리스트를 보여주는 방식으로 구현해봤다.
• 페이지 개수는 전체 리스트 개수를 pageSize 로 나눈 값을 올림한 값이다.

✅ 쿼리스트링을 이용한 API 요청

• 카테고리마다 다른 데이터를 요청해야 하기 때문에 ?menu=1&category=1 과 같은 쿼리스트링을 이용한 API 요청을 해야한다.
• 메인 카테고리를 눌렀을 경우 [메인 카테고리 id] 만, 서브 카테고리를 눌렀을 경우 [메인 카테고리 id, 서브 카테고리 id] 를 받아 요소를 뽑아 query 에 담아 페이지를 이동한다.

• 이전 query 값과 현재 query 이 다르면 this.props.location.search 에 담긴 쿼리스트링으로 다시 데이터를 요청하여 해당 카테고리의 데이터를 받아온다.

✅ 메뉴 탭 스크롤 이동

• scrollTo 함수와 ref 를 활용하여 해당 DOM 의 상단으로 스크롤이 이동할 수 있도록 구현했다.
• 해당 DOM 의 offsetTop 값을 top 으로 지정하면 클릭 시 해당 DOM 의 상단에 맞춰 스크롤이 이동한다.
• 추가적으로 behavior 속성의 값을 smooth 로 설정하면 스크롤 이동시 부드럽게 이동하는 애니메이션 효과를 줄 수 있다.

4. 1차 프로젝트를 마치며

🤩 좋았던 점

• 매일 아침마다 스탠드업 미팅을 하며 각자 진행했던 내용을 팀원들에게 설명하는 시간을 가지며 내가 구현했던 부분을 다시 돌아볼 수 있었다.
• git 명령어만 보면 긴장하던 내가 브랜치를 만들고 지우고 PR까지 요청하고 있다는 사실을 알게 됐다.
• 멘토님들의 리뷰와 최종 발표 직전날 팀원분들과 함께 코드 리뷰를 진행하며 발견하지 못했던 코드의 문제점과 효율적인 코드로 리팩토링을 할 수 있었다.
• 내가 몰랐던 기능구현을 팀원분들을 통해 알 수 도 있었고 팀원분들의 질문에 대해 코드를 보며 해결하는 과정을 설명하면서 많이 성장했던 것 같다.

😢 아쉬웠던 점

• 애자일 개발 프로세스 중 하나인 스크럼 방식으로 개발을 시작했지만 제대로 실천하지 못했다.
• 내가 맡은 페이지에 있는 기능들에 대한 정확한 분석 없이 대충 훑어보며 기능구현을 진행했다.
• 프로젝트 시작 전 각자 맡은 페이지에 대해 구현해야될 기능들을 모두 정리하고 구현 우선순위를 만들어 계획에 따른 작업을 진행하지 못 했던 점이 아쉬웠다.
• 백엔드분들의 모델링을 프론트엔드도 같이 확인하고 필요한 데이터의 key 를 서로 맞추고 시작했으면 데이터를 받았을 때 수정하는 시간을 줄였을 것 같다.

🤘 마지막으로

• 위코드 들어와서 가장 많이 웃고 힘들었고 즐거웠던 기간이었다.
• 18기 라인프렌즈 팀 모두 최종발표날까지 밤새며 2주간 고생했던 프로젝트를 잘 마무리할 수 있어서 너무 좋았습니다!
• 이번 주말 푹 쉬고 다음 주에 있을 2차 프로젝트도 화이팅입니다!