• 개발기간 : 2021.1 ~ 2021.2 약 3주
• 인원 : Front + Back - 1인 / Front - 2인 / 총 3인
• 리액트를 이용한 글로벌 홈퍼니싱 브랜드 이케아의 웹사이트 클론 프로젝트
• 목표: 협업 툴을 활용한 스크럼 방식의 프로젝트를 진행하고, 이커머스 웹 사이트의 기능을 분석·구현하여 개발 경험을 쌓는다.

사용 기술

클라이언트

• JavaScript
• React
• Redux + redux-thunk
• styled-components

백엔드

• TypeScript
• puppeteer
• Node.js
• Express
• passport.js
• Sequelize
• MySQL
• Jest - unit & e2e 테스트
• AWS - RDS
• Azure -VM, BLOB Storage, DNS

협업 도구

• Notion
• Trello
• Git
• Github
• Sourcetree

담당 구현 사항

공통

• Redux, redux-thunk를 활용한 전역 상태 관리
• Styled-components를 활용한 레이아웃 및 스타일링
• 반응형 웹 구현

장바구니 페이지

• 유저 별 장바구니 상품 리스트 데이터 렌더링
• 수량 선택 탭을 활용해 상품 수량 변경 및 변경된 수량, 총액 출력
• 장바구니에서 위시리스트로 상품 이동, 삭제
• 주문 페이지로 상품 정보 전송 기능

리스트 페이지

• 카테고리 별 상품 리스트 데이터 렌더링
• 필터 별 이미지 변경 기능
• 옵션 별 상품 정렬 기능
• 더보기 버튼으로 추가 데이터 렌더링
• 장바구니에 상품 추가 기능
• 찜하기 기능

메인 페이지

• react-slick을 활용하여 슬라이드 배너(Carousel) 구현

구현 화면

메인 페이지

• 진행중인 이벤트 및 프로모션을 출력하는 슬라이드 배너를 react-slick을 활용하여 Carousel 형태로 구현했다. 기본적으로 무한 반복되며 점 버튼을 클릭해 수동적으로 배너를 이동시킬 수 있다.

리스트 페이지

• 서버로 API 요청을 보내 각 카테고리에 해당하는 상품 데이터 목록을 렌더링하도록 구현했다.
• 더보기 버튼을 클릭해 추가 데이터를 로드할 수 있다.

• 필터 옵션으로 '제품'과 '디지털쇼룸' 클릭 시, 목록에서 불러오는 메인 이미지 데이터가 해당 옵션에 따라 변경된다.
  '제품' 옵션이 기본값이며, '디지털 쇼룸'에 해당하는 이미지가 없으면 '제품' 옵션 이미지를 보여주도록 조건 처리했다.

• 마우스를 상품 위로 호버하면, 출력되는 이미지가 변경되고 장바구니&찜 아이콘이 나타나며, 상품에서 벗어나면 기존 상태로 돌아간다.
• 로그인 한 유저의 경우, 위시리스트에 저장한 상품을 찜 아이콘 상태(비어있거나 채워짐)로 확인할 수 있다.
• 비어있는 찜 아이콘을 로그인 하지 않은 유저가 클릭할 경우 로그인 페이지로 이동하고, 로그인 한 유저가 클릭할 경우 아이콘이 채워진 상태로 변경되며 위시리스트에 상품이 추가된다.
• 채워진 찜 아이콘을 클릭하면, 위시리스트에 담긴 상품이 삭제된다.

• 리스트 페이지에서 출력하는 상품 목록을 특정 기준으로 정렬할 수 있도록 구현했다.
• 기본값은 신제품이며, 낮은가격 순, 높은 가격 순, 이름 순, 고객평가 순, 가장 인기있는 순으로 세부 정렬 옵션 항목을 선택할 수 있다.

• 목록에서 상품 위로 호버하면 장바구니 버튼이 나타나고, 버튼을 클릭해 해당 상품이 유저 장바구니에 추가될 수 있도록 구현했다.

장바구니 페이지

• 유저의 로그인 상태를 확인하고, 로그인 한 유저의 경우 해당 유저의 장바구니에 담긴 상품 리스트를 렌더링하도록 구현했다.

• 수량 선택 탭에서 원하는 수량을 선택해 장바구니에 담긴 상품의 수량을 변경할 수 있으며, 해당 삼품의 변경된 수량과 총액을 유저가 확인할 수 있고 변경된 정보를 서버에 업데이트 시킨다.

• 장바구니의 상품을 위시리스트로 이동시키거나, 장바구니에서 삭제시킬 수 있다.
• 알림 UI를 활용하여 유저가 해당 기능을 실행한 것을 확인할 수 있도록 구현했다.

• 결제하기 버튼을 눌러 장바구니에 담긴 상품 정보를 가지고 주문 페이지로 넘어간다.

반응형 웹 구현

• 모바일 기기를 지원하는 반응현 웹으로 구현했다.

프로젝트 회고

배우고 성장한 점 🚀

먼저 이케아를 클론 프로젝트 대상으로 선정한 이유는 이커머스 웹사이트 기능 구현과 다양한 UI 스타일 학습에 적합해 보였기 때문이다. 이전까지는 리액트로 혼자 간단한 기능이나 작은 사이트를 만들어 보는 것이 전부였다. 국비 학원에서 백엔드 위주로 두 개의 프로젝트를 진행하면서 팀원들과 함께하는 프로젝트를 통해 혼자할 때보다 팀으로 일할 때 더 크게 성장할 수 있다는 걸 느꼈기 때문에 리액트 프로젝트의 시작을 기다려왔다. 그렇게 팀원들과 이케아의 기능 분석부터 시작하여 데이터베이스를 설계하고, 협업 방식을 정하며 프로젝트 틀을 잡아갔다.

우리는 프로젝트를 애자일 방법론 중 하나인 스크럼 방식으로 진행하기로 했다. 스프린트 계획을 세우고 매일 구글 미트로 정해진 시간에 만나 어제한 일과 오늘 할 일, 공유할 이야기를 나눈 뒤 각자 작업을 진행했다. 또한 Trello를 활용해 팀원들 간의 진행 사항을 공유할 수 있도록 했다. 방법적으로는 정확하지 않을 수 있지만 중요하다고 생각했던 포인트는 피드백을 빠르게 주고받는 것이었다. 갖고 있는 문제가 있다면 모든 팀원이 공유하고 함께 해결하기 위해 기꺼이 시간을 쏟았다. 비록 나의 작고 (소중한) 개발 실력일지라도 같이 고민을 나누던 순간, 울며 웃으며 문제의 답을 찾아가던 과정이 소중한 경험으로 남았다.

결과적으로 처음 선정했던 큰 줄기의 목표대로 기본적인 커머스 웹사이트에 필요한 기능들을 리액트로 구현하는 방법을 배웠고, css-in-js 방식으로 스타일을 작성하는 styled-component를 활용하여 다양한 스타일링을 연습해볼 수 있었다.

또한 리덕스를 프로젝트에 도입해 상태관리를 전역에서 처리하는 방법을 학습했다. 리덕스에는 장단점이 모두 존재하고, 리덕스를 통한 상태관리에 불호를 느끼는 개발자도 있다는 걸 알고 있었다. 실제로 사용해보니 많은 양의 보일러 플레이트 코드를 작성하는데 불편함이 있었지만, 단방향의 데이터 흐름으로 관리하면서 Redux DevTools를 이용해 변화를 살펴볼 수 있어 디버깅이 용이한 점이 큰 장점이었다. 서비스의 규모가 크고 구조가 복잡해질 수록 이러한 상태 관리의 필요성이 커질 것이라는 생각이 들어 이번 프로젝트를 통해 다뤄볼 수 있어 좋았다.

처음 시작할 때는 예상보다 만만치 않았던 이케아의 멋진 UI와 기능들에 이걸 내가 구현해낼 수 있을까? 생각했던 걱정들을 하나씩 해결할 때마다 이런 기능을 이렇게 구현할 수 있구나 자신감이 조금씩 붙었다!

아쉬운 점 📝

에러, 에러, 그리고 에러... 에러 앞에 무너진 순간들이 있었다.
기간이 정해져 있었기 때문에 어떤 에러의 경우 충분히 스스로 고민하지 못하고 빠르게 도움의 손길을 빌려야 했다. 아직 에러를 만나고 해결하는 과정이 손에 익지 않았다는 생각이 들어 답답하고 조금은 무기력함도 느꼈던 것 같다.

하지만 개발은 혼자하는 것이 아니고 팀원들과 함께 하는 것이기에, 내가 해결하지 못한 부분에서 도움을 받고, 또 다른 팀원이 해결하지 못한 것을 내가 도와주면서 같이 해내면 되는 거라고 서로를 다독였고 어떻게든 해결한 다른 에러들에 성취감을 얻으면서 조금씩 극복해갔다.

새로운 시작을 했다면, 이전에 내가 경험하지 못한 환경에서 새로운 문제에 부딪히는 게 당연한 일이다. 에러를 두려워하지 말자, 그 대신 에러를 극복한 순간들을 조금더 소중히 기억하자.

빠른 에러 해결에 집중하면서 그 과정을 상세히 기록할 여유를 가지지 못한 것도 아쉬움으로 남았다. 다음에는 반드시 의미 있는 기록을 남기며 프로젝트를 진행하겠다는 다짐을 했다.

또 클론 프로젝트로써 보이는 기능 구현에 초점을 맞춰 a+를 생각하는 것이 쉽지 않았다. 클론 프로젝트를 할 경우, 조금 부족한 부분이 보이는 사이트를 선정해 더 나은 쪽으로 개선하는 방식도 고려하는 게 좋을 것 같다.

다음 프로젝트에서는 이번 프로젝트에서 느낀 부족한 점들을 보완할 수 있는 방향을 생각해 좀 더 단단한 마음으로 나아가고 싶다.