프로젝트 소개
▶ 외국 포토샵 브러쉬 판매 사이트를 기반으로 한 기능 구현 프로젝트
▶ 개발기간
- 2020년 8월 31(월) ~ 2020년 9월 11일(금)
▶ 팀 구성
- Front-End: 3명 (이도윤, 오승하, 김건우)
- Back -End: 2명 (김태수, 김현우)
▶ Git Hub
▶ 개발 스케줄 관리와 소통을 위해 사용한 프로그램
-
스케줄 관리 프로그램: Trello
- 프로젝트 일정 관리 -
소통 프로그램: Slack
구현 영상
사용된 기술
Front-End
- React
-. Hooks
-. Redux
-. React-Router-DOM - Styled Components
- HTTP요청
-. GET / POST / DELETE
Back-End
- Python
- Django
- MySQL
Common
- JSON
- Git
- AWS
- Linux
- HTTP
- Postman
-. API 호출
-. 응답 확인
내가 맡은 역할
Front-End 개발
구현 내용
제품 상세 페이지
-. 제품 사진이 있는 infinite slider 구현
-. 제품 선택에 따른 상세 정보
-. 제품 옵션(버전, 수량)선택 및 선택에 따른 금액 표시
장바구니
-. Navbar의 장바구니 아이콘 클릭시 side modal창으로 장바구니 UI 및 정보표시 구현
-. 제품 상세 페이지에서 제품 선택 시, 장바구니에 추가
-. 장바구니 정보 수정(수량 변경, 삭제)
-. 로그인한 회원 정보와 일치하는 장바구니 데이터 표시
적용 기술 상세 내용
- 동적 라우팅 적용하여, 제품 id값과 일치하는 제품 상세 정보 data 호출
- ref를 활용하여 DOM에 접근하는 방식으로 제품 상세 이미지 infinite slider 구현
- Redux를 통해 전역으로 state 값을 관리하여, 모든 페이지에서 Modal UI를 통해 장바구니 정보 확인 및 수정 가능
- fetch 함수로 GET / POST / DELETE 요청
- 회원의 JWT해쉬를 서버에 보내, 장바구니 활용 접근 권한 관리
개발 진행 과정
Infinite Slider
상품상세정보의 내용 중, 제품에 대한 이미지를 무한 슬라이드로 보여주는 기능이 있다.
서버에서 받는 이미지 갯수에 맞춰 무한 슬라이드 기능을 구현해야 했는데, 이번에는 라이브러리가 아닌, 직접 코드로 구현해 보고 싶었다.
- CDM을 활용한, 요소 복사
React LifeCycle의 ComponentDidMount 를 활용하였다. 한번만 실행된다는 특징을 이용하여, 렌더시에 첫번째 이미지와 마지막 이미지를 복사하고 첫번째 이미지를 가장 뒤에, 마지막 이미지를 가장 앞에 붙여준다.
예를 들어 이미지가 5개 넘어온다고 하면, [1,2,3,4,5] 의 형태로 오게 되는데, ComponentDidMount에서 [5,1,2,3,4,5,1] 의 배열로 만들어지게 된다.
- 다음 버튼 기능
이전 / 다음 버튼의 기능은 똑같은 로직으로 구현되었기 때문에, 다음 버튼을 대표로 설명하려고 한다.
카드의 마지막요소가 온 상태에서 다음 버튼을 누르게 되면, 첫번째 이미지로 이동 시킨다.
이때, transitionDuration을 "0.0s"로 설정하여, 첫번째 이미지로 이동되는 시간이 0초가 걸리게 된다. 배열을 예로 들자면, [5,1,2,3,4,5,1]에서 마지막 5가 된 이후에 처음의 1로 돌아가게 된다. 이때 복사된 이미지(5 와 1) 를 UI에서 살짝 보여주기 때문에 사용자는 무한슬라이드 이벤트를 경험할 수 있게 된다.
상세페이지 데이터 가공
- Data 가공 및 조건에 맞는 컴포넌트 보이기
text 속성으로 data를 받아, 자식컴포넌트에 전달해준다.
먼저 사이트 상세페이지의 레이아웃이 고르지 않아서, 설명 text의 string을 기준으로 레이아웃의 규칙을 찾기 시작했다.
Array.includes() 메서드를 통해 (,)나 특정 글자가 포함 되어있는지 파악한 다음 컴포넌트가 나타나거나 사라지도록 구현했다.
기억에 남는 순간
새로운 기술 스택 적용
React Hooks, Styled Components, Redux를 적용하면서, 이전 프로젝트에서 가졌던 불편함을 해결하였다. 개발에 대하여 어느정도 자신감이 많이 생겼기 때문에, 이제는 결과물을 만들어 낸다는 목표만이 아닌 '좀 더 효율적으로 개발 할 수 있지 않을까?' 라는 고민을 하기 시작한 것 같다.
특별히 가장 기억남는 기능은 "장바구니" 인데, 사이트의 어떤 곳에서도 장바구니를 열어 내가 지금까지 넣은 상품을 확인할 수 있어야 했다. 상품 수량 수정과, 삭제 두가지 기능이 어디에서도 되면서 확인이 가능해야 했다. 그리고 장바구니 수정을 위해 자식에서 부모의 state 값을 변경 시켜주어야 하는데, 이런 상황에서는 코드의 구조가 많이 복잡해 질 수 밖에 없었다.
문제를 해결하기 위해, Redux를 도입하였고 전역 상태값 관리를 하여, 위의 문제를 해결 할 수 있었다.
꾸준하게 공부하기