[Project] 🌈러쉬 코리아 클론 프로젝트

✨project introduce

위코드 1차 프로젝트로 러쉬 코리아 웹을 클론코딩 했다. 예전부터 UI가 깔끔하고 신선한 이벤트가 많은 러쉬코리아를 클론해보고 싶어 제안했었고, 여러 다른 후보들 중에 감사하게도 투표 결과 채택되었다. 리액트로 2주간 프론트엔드 3명 백엔드 3명의 팀원과 함께 진행했다.

핸드메이드 코스메틱 브랜드인 러쉬를 모티브로 비누만을 판매하는 서비스로 기획을 학습목적으로 수정했다.

그리고 리액트로 UI를 컴포넌트로 구성해보면서 기존의 구성에서 바꿔보면서 사용자가 아니라 이제 개발자로서 고민해보면서 컴포넌트 분리의 편리함을 체감하는 경험을 할 수 있었다.

기술 스택과 역할 ✍

프론트 엔드 3명

• HTML/CSS
• JavaScript
• React

백엔드 3명

• Python
• Django
• bcrypt
• pyjwt
• MySQL
• AqueryTool
• AWS EC2 / RDS

  팀의 역할 분담은 크게 페이지 단위로 나누어서 진행했다. 그 중에서 나는 상품리스트 페이지 / 상품 디테일 페이지를 담당했다.

MY ROLE

1) 상품 리스트 페이지

• grid를 활용한 리스트 페이지 레이아웃
• 낮은 가격순 높은 가격순 정렬기능
• 조건부 렌더링를 통한 NEW,BEST,Vegun 라벨링 기능
• 동적라우팅을 사용한 상세페이지 연결 구현

---

2) 상품 디테일 페이지

• 제품 이미지 선택 기능
• 제품 수량 조절 기능
• 탭 기능을 구현했다.
• 제품id와 token으로 장바구니 데이터 POST 기능

결과 화면

1. 상품 리스트 페이지 - 정렬
클릭한 요소의 value 값을 state로 관리하고 값이 변할 때 마다 내림차순 오름차순 api로 변경되도록 했다.

2. NEW,BEST 라벨링
데이터 정보에 따라 조건부 렌더링으로 라벨링이 보이도록 했다.

💫React로 러쉬UI를 KLUSH!(나눠보기)

기존 러쉬 코리아 상품 디테일 페이지

기존에는 상품 후기 탭을 클릭 했을 때 스크롤 이벤트가 발생하면서 위 아래 해당 위치로 한페이지 내에서 이동하도록 되어있었다. 이 부분을 리액트로 스크롤로 이동하지 않고 컴포넌트를 매핑해서 보여주면 어떨지 생각해 보게되었다.

이러한 점을 개선하기 위해 리액트 컴포넌트로 분리해보았다!

기존의 웹에서는 상품 후기를 작성하고 나서 다시 상품 정보를 보려면 탭을 누르기 위해 스크롤을 살짝 더 한다음 이동해야 한다. 그래서 메뉴 탭과 같이 하단의 UI가 변경되도록 바꿔보았다.

다시 개발자로서 생각해보기

왜 스크롤 이벤트로 만들어 놓았을까 개발자 입장에서 다시 생각해보니 🧐 SPA로 잘 구현되어있고! 제품을 구매하기 위해 고민할 때 제품의 정보를 다 읽고 나서 후기를 자연스럽게 보게 되는데 내가 변경한 UI에서는 제품 정보를 다 읽고 다시 탭으로 스크롤 해야하는 단점이 생기게 되었다! 그래서 top 버튼을 이용해서 이러한 불편함도 없앨 수 있도록 조금 더 수정하였다.

---

4. 상품 디테일 페이지 - 제품 이미지 선택
클릭한 이미지 요소에 대해서만 border가 생기고 해당 이미지로 썸네일이 바뀌도록 했다.

5. 상품 디테일 페이지 - 수량 선택
수량을 추가하는 함수와 수량을 줄이는 함수를 만들어 총 합계 금액이 계산되도록 했다. 발표 후에는 최대 수량이 20개 이상이면 alert로 최대수량은 20개 입니다 알림창을 띄우도록 했다.

프로젝트 리뷰

이런 나 칭찬해!

• 한 가지를 하더라도 정확하게!

여러가지 기능을 더 많이 하는 것 보다는 한 가지 기능에 대해 진짜 내것으로 만들려고 노력을 많이 했다. 리팩토링도 하면서 코드를 효율적으로 바꾸는 것에 재미를 크게 느꼈고 어제의 나 보다 조금씩 업그레이드 시켜 나갔다.

동적라우팅 하는 것이 헷갈렸었는데 정확히 알려고 질문하고 써보면서 route.js 에서 path를 정확하게 적고 withrouter에 대해 확실히 알게 되었다.

• 스크럼
  스크럼 방식으로 프로젝트를 진행하면서 커머셜 사이트의 기본적인 기능을 제일 먼저 우선순위로 두고 먼저 구현한다음 추가적인 기능들을 구현해 나갔다. 회의 하면서 데일리 미팅 때 마다 진행상황을 공유했다. 시간 약속도 잘 지키고 트렐로를 잘 사용해서 꼼꼼한 의사소통으로 잘 맞춰 갈 수 있었다! 우리 팀 정말 칭찬해!

---

아쉬운 점이 나를 발전 시킨다.

• 러쉬의 마이페이지 찜,덕찌리스트와 페이지네이션은 기능 꼭 해보려 했던 기능이였는데 하지 못해서 아쉬움이 크다. 2차 프로젝트가 끝난 후에 꼭 추가로 구현해보고 싶다.

• 백엔드 팀원들과의 소통에서 백엔드에 대한 기본적인 이해가 부족하다 보니 어려운 점이 있었는데 데이터의 key 값과 구조 뿐만이 아니라 앞으로는 백엔드의 코드도 자주 보면서 어떻게 작업하는지 전체적으로 이해할 필요성을 느꼈다!

---

협업하며 일잘러가 되기 위한 방법 😎

예전 직장에서 기획자를 하면서 느끼기도 했지만 이번에 같이 협업을 하면서 또 다시 한번 느낀 것이 있다.

일을 잘하는 방법 중에 하나는 사실은 내가 하지 못하는 것을 못 한다고 하는 것이다! 🤝

처음에 사회생활을 시작했을 때는 내가 못한다는 사실을 인정하는 것이 참 어려웠다. 그런데 나의 역량을 파악하고 인식하는 것 부터 하지 못하면 나뿐만이 아니라 팀원들도 함께 힘들어진다.

처음 프로젝트를 시작하다보니 내가 맡은 페이지에서 정말 수많은 기능 들이 쏟아져 나왔다! 그리고 작업량이 잘 가늠 되지 않아서 장바구니 페이지와 댓글 기능도 맡았었다.

그런데 내가 다 하기에는 너무 많은 양이라는 것을 중간에 깨닫고 팀원들에게 솔직하게 이야기 해서 양을 적절히 분담 할 수 있었다!
팀원들도 똑같이 느끼고 있었던 부분이라 잘 분배할수 있었다.(함께한 갓희열님 갓태현님 에게 너무너무 고맙다!)

그래서 다행히 최소한의 기능까지 팀의 결과물로 만들 수 있었다!
일을 잘하기 위해서는 오히려 나의 역량과 못하는 것을 잘 파악하고 있어야 한다는 것이 나의 생각이다!

겸손해지기 서로 존중하고 배려하기를 토대로 나를 공유하는 것이 협업의 첫 단추라고 생각한다.

함께 한다는 것

팀원들과 프로젝트를 하면서 함께여서 정말 이렇게 좋은 결과물이 나올 수 있었던 것 같다! 처음에 팀원들과 모였을 때 다들 꼼꼼한 성격이인 것 같다고 했었는데, 팀워크가 잘 맞아서 더 프로젝트에 시너지를 낼 수 있었던 것 같다. 다른 팀원들이 우리 프론트 팀원들이 러쉬스럽다고 표현 해주기도 했는데 최고의 칭찬을 해준 재원님★ 잊지 않고 감사요~ 희열님 태현님 처럼 좋은 팀원들 만난 나는 정말 복이 많은 것 같다.

많은 에러를 만나면서 같이 고민해주고 해결방법을 찾아내고 하면서 같이 성장할 수 있었던 것 같고 힘이 되어준 팀원들에게 정말 고맙다 8ㅅ8 감동의 눙물이 왈칵!

태현님과 함께 발표하고 있는 나😁

주말에도 같이 공부하면서 수민님한테 콘솔에 여기 제발 나와ㅜㅜ: 라고 찍어보던 추억이 새록새록하다. 디테일 페이지에서 장바구니에 담길 데이터를 수민님과 맞춰보면서 개발자 도구 네트워크 탭을 잘 활용할 수 있게 되었고 Cors 에러에 대해 백에서도 다시 공부할수 있는 시간도 있었다!

라벨 데이터 어떻게 예쁘게 보내줄지 함께 고민해준 현영님께도 속도 맞춰 주시고 배려해주셔서 감사하다!

디테일 이미지 배열로 주신 것 화면에 보여줄 수 있어서 다행이였는데, 병재 님께도 객체 포장 뜯듯 같이 빠르고 정확하게 소통할수 있었던 것 같다.

다같이 고생한 우리 팀원들 더욱 더 성장해서 또 보고싶다!

천재개발자 처럼 화이트 보드 끄적거리는 우림 팀원들의 흔적이 아른아른★