[KakaoVillains] 카카오 프렌즈샵을 모티브로 한 팀 프로젝트

송나은·2021년 3월 28일

Project

목록 보기

3/6

카카오프렌즈샵 을 모티브로 한 프로젝트: 카카오빌런즈

screen-recording-_1_

Preview

왜 카카오프렌즈샵을 선택했는가?

위코드에 오기 전부터 콘텐츠와 커머스를 결합한 비즈니스 기업의 프론트개발자가 되는 것이 목표였다. (오늘의집, 카카오커머스 등)

그 이유는 커머스 기업에서 오퍼레이터 업무를 하면서 겪었던 경험 때문이다.

오퍼레이터 업무를 하면서 데이터를 다루는 데 비효율 적이라고 생각되는 부분이 많았다. 운영툴을 좀 더 효율적으로 만들 순 없을까 항상 생각했고, 어드민 개선 기획안도 냈지만, 다른 기능 개발에 밀려 간단한 기능 구현임에도 불구하고 배포하여 실제로 사용하기 까지 오랜 시간이 걸렸다.

어느 순간부터, 오퍼레이터의 고충을 알고 효율적인 운영에 도움을 주는 개발자가 되고 싶다고 생각했다. 데이터를 가지고 웹사이트에 실제로 보이는 부분을 구현해내는 개발자, 혹은 데이터를 적절한 위치에 보여주기 위한 운영 어드민 페이지를 만드는 개발자가 되고 싶었다.

구체적인 목표를 가지고 있었기 때문에 커머스 웹사이트를 구현하는 데 필요한 기능, 기술을 배우고 싶었고, 콘텐츠 부분은 기존에 우리가 실습했던 instagram과 비슷하기 때문에 짧은 시간에 구현하지 못했던 부분을 다시 공부해볼 수 있는 기회라고 생각했다.

Overview

초기 세팅(CRA)부터 시작해서 백엔드와 통신하여 데이터를 받아보고, AWS를 통하여 배포까지 해 본 첫 프로젝트.
피드이미지는 카카오프렌즈샵을 참고했으며, 캐릭터 및 상품 이미지는 직접 제작하였다.

GitHub Repository

작업기간

2021/3/15 ~ 2021/3/26

기술스택

HTML/CSS, JavaScript(ES6+), React, SASS, Git

카카오빌런즈 팀원

프론트엔드 4명 (강준우, 배성훈, ⭐송나은⭐, 양지은)
백엔드 2명 (이왕록, 허정원)

주요 구현 기능

Token을 활용한 로그인, 회원가입 기능
모달창 on/off 기능 ⭐
infinite-scroll-component 무한스크롤 기능
slick-slider 이미지 슬라이드 기능
path parameter / query parameter 와 react router를 이용한 페이지네이션 기능 ⭐
컴포넌트 재사용 및 조건부 렌더링 기능 ⭐

결과

로그인 & 회원가입

Token을 활용한 로그인, 회원가입 기능 구현
아이디, 비밀번호 8자 이상일 때 버튼 활성화기능 구현
회원가입 시 필수 사항을 입력하지 않았을 경우, 존재하는 이메일일 경우 회원가입 불가능
백엔드 POST 방식으로 계정을 확인하고 메인페이지로 연결되는 동시에 access token이 local storage에 저장.

메인

좋아요 클릭 시 계정정보 확인 후 로그인/비로그인 모달 창 구현
infinite-scroll-component로 무한스크롤 기능 구현. 데이터 4개씩 fetch

slick slider로 이미지 슬라이드 기능 구현
Path parameter를 이용하여 각 피드 별 각 상품리스트로 이동기능 구현
상품 유무에 따라 조건부 렌더링으로 피드 구현

피드

기존에 입력되어 있는 댓글 데이터 fetch
댓글 입력 시 버튼 활성화 기능 구현
댓글창에 댓글 입력 시 댓글 추가 기능 구현
댓글 좋아요 및 카운트 기능 구현
댓글 삭제 기능 구현
입력한 댓글 DB에 POST 후 리스트 업데이트 기능 구현

카테고리 (Character, Subject) ⭐

-> Category 페이지 제작과정

query parameter를 사용하여 sorting된 데이터 fetch
카테고리 분류 기능 및 신상품순, 높은가격순, 낮은가격순 ordering 기능 구현
상품클릭 시 path parameter와 react router를 사용하여 상품 페이지로 이동 기능 구현
동일한 컴포넌트의 라우터 경로를 다르게 해서 location의 pathname에 따라 character / subject 페이지로 조건부 랜더링-> 빛을 보지 못한 코드

검색 ⭐

-> Search 페이지 제작과정

네브바 모달창On 조건부 랜더링으로 구현

실제 카카오프렌즈샵에서는 검색모달창 위로 구매하기 버튼이 노출되는데, 검색창의 z-index값을 1000001로 주어 어떤 경로에서 검색창을 열어도 최상단에 오도록 했다

키워드 검색 filter 기능 구현
검색어 입력할 때마다 query string을 만들어 query parameter로 sorting된 데이터를 fetch.
상품리스트 클릭 시 path parameter와 react router를 사용하여 상품 페이지로 이동 기능 구현

실제 카카오프렌즈샵에서는 상품명 클릭 시 검색결과로 이동되는데, 상품하나만 나오는 게 비효율적이라고 생각하여 해당상품으로 바로 이동되도록 설정했다.

검색어 입력 후 엔터를 눌렀을 때, 검색결과 페이지로 이동되어 keyword에 맞는 데이터를 fetch.
-> 빛을 보지 못한 코드

카테고리 이미지/문구 클릭 시 path parameter와 react router를 사용하여 카테고리 페이지로 이동 기능 구현

상품 상세페이지

slick slider로 이미지 슬라이드 기능 구현
int값으로 데이터를 받아 별점기능 구현
product/:id 동적 라우팅으로 상품 별 페이지네이션 기능 구현
상품 옵션 선택 및 구매버튼 활성화 기능 구현
리뷰리스트 좋아요 버튼 활성화 기능 구현
공유 버튼 클릭 시 모달창 구현

Trello

프로젝트를 시작하면서 slack 외에 trello라는 업무 협업툴을 이용해봤다.
Jira랑 wiki는 써봤는데 trello는 처음 써봐서 적응하는 데 시간이 걸렸다.
직관적으로 한 눈에 진행상황을 알 수 있었고, 매일 아침 스탠드업 미팅을 진행하기에도 좋았다.
In progress로 넘어가지 못한 아픈 손가락들... 우리 다시 만나

Review

아쉬운 점

커머스 페이지인데 장바구니 구현을 못한 것이 너무너무 아쉽다.
상품 검색과 구경은 되는데 상품을 구매할 수는 없는 카카오빌런즈 페이지 ^^
그리고 주석처리 되어버린 코드

각자 맡은 페이지에 집착하느라 애자일 방식으로 개발을 하지 못했던 점.. 반성해
2차 프로젝트에서는 mergy > mergy > mergy 할 수 있도록 하자

프론트-백의 소통

다른팀에 비해 모델링이 엄청 빨랐던 우리팀 백엔드...!!
실력 좋은 백엔드를 두었지만 제대로 사용하지 못한 부분이 아쉽다.
모델링 할 때, 각 페이지를 만들 때 어떤 부분에서 어떻게 요청을 할 건지 미리 함께 상의하고 key값을 고정해 두었다면 좋았을 것 같다는 아쉬움이 있다.
필요한 데이터를 추가로 요청하고, 데이터 형식을 계속해서 바꿔나가면서 결국 undefined의 늪에 빠져버렸던 것 같다.

쿼리스트링

필터 기능을 구현하면서 쿼리스트링을 계속해서 만들어 줘야 했는데, 각 조건마다 하드코딩으로 쿼리스트링을 만들어줬다. 유일하게 리팩토링 하지 못한 부분이라 아쉽다.
성훈님이 쿼리스트링 천재라고 했는데, 하드코딩인거 알면 바보라고 하려나 😂

잘한 점

프론트 Q&A

각자 할 일이 바쁜 와중에도 막히는 부분이 있을 때 물어보고 도와주었던 것.
prettier 오류와 map함수 undefined의 늪에 빠질 때마다 고통을 함께 나누고 도움을 주고 받을 수 있어서 좋았다.

준우님 曰 "프론트는 화목해요"

코드 리팩토링

깔끔한 코드를 작성하고 싶었고, 어떤 페이지를 만들더라도 컴포넌트를 나누어 작업했다.
중복되는 변수나 함수는 따로 정의하여 재사용할 수 있도록 했다.
반복되는 부분은 나의 사랑 map()

기록하기

위코드를 시작하면서 매일매일 하루에 뭘 했는지(TIL) 기록하는 것이 목표였다.
프로젝트를 진행하면서 제작과정을 기록하고, 어떤 부분이 변경이 됐는지, 어떤 부분에서 어려움을 겪었는지, 어떤 리뷰를 받고 어떻게 수정했는지 기록하고 돌아보고 싶었다.
매일매일은 아니었지만, 2주 프로젝트 기록을 남긴 나 칭찬해..!