[React] 카카오 프렌즈샵 클론 프로젝트

팀 프로젝트 프론트엔드 GitHub 레파지토리
팀 프로젝트 백엔드 GitHub 레파지토리

Project Overview

위코드에서의 1차 클론 코딩 프로젝트가 끝났다. 태우님이 제안했던 이 사이트는 다시금 돌아보면 정말로 컴포넌트를 연습하고 적용하기 좋은 사이트란 생각은 시작부터 끝까지 변함이 없다. 우리팀의 백엔드 구현에 있어서는 정말로 어벤져스라 불리는 것이 무색했다. 프론트가 제대로 못따라간다는 걸 처음 느껴서 현찬님과 발 맞춰가면서도 아쉬움이 있었다.

카카오 프렌즈샵은 캐릭터 상품을 판매하는 커머스 사이트이기에 캐릭터 상품을 밈으로 바꾸면서 정체성이 옅어지게 된 것도 아주 아쉬운 일이지만 코딩을 하면서 수많은 생각과 걱정이 덮쳐왔던 프로젝트였다. 프론트, 백 모두 너무 열심히 참여해주셔서 목표로 한 기능 구현을 많이 구현했지만, 현실적으로 2명이라는 프론트엔드 개발자로써는 개발량의 한계가 있음을 절실히 느꼈던 프로젝트다.

React를 사용하여 카카오 프렌즈샵 클론하기

작업 기간

2021.06.07 ~ 2021.06.18

기술 스택

프론트엔드 2명 🌟

• HTML/CSS
• JavaScript(ES6+)
• React
• SASS

백엔드 3명

• Django
• Python
• Selenium
• Beautiful soup
• PyJWT
• Bcrypt

주요 구현 사항

🌟 표시는 내가 기여한 기능!

access token를 활용한 로그인, 회원가입🌟, 로그아웃 기능
메인의 탭 레이아웃 구현 🌟
query string url 을 사용한 상세페이지 연결 구현
상세페이지의 레이아웃 구현
제품 키워드 검색 기능 구현 🌟
캐러셀 배너 구현 🌟
카테고리 및 유저 페이지 모달
장바구니 기능 🌟
주문서 작성 기능 🌟
카테고리 분류 기능

• 백엔드에서 데이터를 fetch 해오는 첫 프로젝트
• 공동의 public 폴더와 scss를 사용하고 관리
• 리액트 컴포넌트를 공유하여 효율성을 높이는 작업

기본적인 프로젝트 진행에 있어서 멘토님이 해주신 말씀은 프로젝트의 목적은 State의 관리와 컴포넌트 Props의 관리였다. 처음에는 이걸 기준으로 작업을 계속하면 된다고 생각했지만, 리액트만 문제는 아니었다.😱 작업을 진행하면서 종택 멘토님과 접선(?)을 통하여 느낀건 리액트에만 집중할 것이 아니며 기초부터 제대로라는 말을 여실이 느낄 수 있었다. 눈물이 날 정도로 고생했다.💦 팀원과 함께 하는 것이기에 항상 독려하며 진행하자! 혼자 진행하는 프로젝트만큼 나중에 외로운 것도 없다.

개선하고 싶은 점

:: Git

왜냐하면 우리팀이 가장 크게 직면했던 문제는 다름아닌 Git이었다. 버전관리, 혼자 개발을 진행했을 때는 정말로 로컬만 활용하여 진행하다 보니 협업에 대한 개념이 적었기에 사용에 익숙하지 않았던 건 당연하다고 생각했지만, 이번에 직면해보니 정말로 나 자신 보다 Git을 믿어야한다는 걸 정말로 느꼈다.

지저분한 브랜치를 보라! 다시는 이렇게 작업을 진행하지 않을거다.

무조건 master/main 브런치에 병합되는 걸 기반으로 컨포넌트별 분리가 아닌 기능별로 분리하여 작업할 걸 권장한다. (ex, feature/Nav_toggle_btn) 그리고 주석과 콘솔도 적극적으로 활용하자. 그렇게 하다보면 조금씩 병합되어 완성되어지는 main 바벨탑을 볼 수 있을 것이다! 그리고 PR에 있어서도 귀감이 될만한 동기님이 있었기에 꼭 한번쯤 나도 잔디밭을 채워보고 싶어졌다(대단한 건우님)

git checkout master
git pull origin master
git checkout feature/Nav_toggle_btn
git merge master

:: 환경설정(package)

처음 시작에 있어서 CRA 구성과 함께 서로의 OS, 패키지 구성을 잘 확인하자! 특히 윈도우가 있다면 정말도 오류가 많다. 세팅에 있어서 빠지지 않도록 잘 확인하고 같은 프론트 엔드끼리 협업을 하는 경우에는 ESLint, Prettier 등 중요한 사항을 놓치지 말자, 나중에 나비효과로 다가온다!

1. 원하는 디렉토리 이동 후 CRA 프로젝트를 설치
   npx create-react-app project-name

2. React Router 설치
   npm install react-router-dom --save

3. Sass 설치
   npm install node-sass --save

4. eslintcache 파일 .gitignore에 추가
   .eslintcache

5. 초기 세팅 완료 후 github repo 연결

// add > commit
git add .
git commit -m "Add: first commit. 초기 세팅 완료."

// 설치한 CRA 프로젝트와 github repo를 연동시켜줍니다.
git remote add origin (해당 repo 주소 입력)

// 연동된 repository로 push 해주세요.
git push origin master

// remote master에 초기세팅 코드가 merge 되면 다른 분들도 clone 받고, branch 생성해서 작업 시작해주세요.
// "초기세팅 완료 > push 후에 멘토 검사가 진행됩니다. Ok 사인 받은 후 다른 분들 git clone 진행해주세요"
git clone (해당 repo 주소 입력)
npm install > node-modules 폴더 생성(패키지 소스코드 생성)
git branch feature/--

:: 절대적인 구현량

작업을 진행하면서 무리하게 많은 기능에 초점을 맞춘 것이 아닌가라는 생각이 들었다. 이전 기수들의 페이지도 찾아보고 블로그도 찾아보면서 느낀 건, 한가지 기능이라도 제대로 구현하는 것이 엄청 중요하다는 것이다. 2명이라는 조건 속에서 사이트 자체를 완벽하게 구현하려고 했던 건 욕심이었고, 적어도 한가지 기능이라도 온전하게 구현할 수 있도록 절차와 상의를 거쳐서 팀원과 함께 진행하기를 바란다. 물론 여건이 된다면 모두 구현해 보는 것도 좋을 것이다! 트렐로에 남은 백로그가 참으로 아쉬웠다.

:: 데이터 타입에 대한 이해, 그리고 함수

백엔드에서 넘어오는 데이터가 우리가 알고 있는 오브젝트(딕셔너리)로 오는 경우의 데이터 접근과 이를 활용하여 읽어내는 방식에 대해서 조금더 구체적으로 알아야 할 것 같았다. 끊임없이 뜨던 undefined는 정말로 나를 괴롭혔다. 때문에 목데이터를 활용할 때와 실제 데이터를 받아올때 달라지는 것을 기억하고 항상 접근할 때마다 조금씩 콘솔을 통하여 확인하고 짚고 함수를 구성하자.

분리와 재사용 해당 블로그를 멘토님이 보여주셨을 때 이거다! 싶었다. 종택 멘토님의 손을 탄 모듈화는 충격으로 다가왔고 기능별로 쪼개어진 함수와 하나의 함수에는 하나의 기능만 담는 다는 기본적인 원칙을 이해하고 다음 프로젝트를 구성해보고자 마음 먹었다. 누가 보더라도 이해가능한 컨벤션과 메소드 활용을 위해서 더 배우고 익히자!

:: 코드 리팩토링

2주가 채 안되는 짧은 시간동안 최대한의 퀄리티를 내야한다는데만 몰두했다. Westagram 프로젝트와는 다르게 리팩토링에 상대적으로 에너지를 쓰지 못했다. 코드를 효율적으로 줄이면서 오는 재미가 있었는데, 프로젝트 후반으로 갈수록 백로그를 Done으로 옮기는데만 신경을 쏟았던 것 같다. 시간이 날 때 내 코드를 리팩토링하고 백엔드 분들과 다시 붙여서 완벽하게 바꾸어 보고 싶어졌다.

:: 멘탈 관리

프로젝트를 시작하면서 기대감이 큰 조라서 부담감도 컸었다(어벤져스라나 뭐라나..). 뭔가 완벽하게 구현해보고 싶었지만 내 실력에도 한계가 보였던거 같다. 이제 1달 남짓 시작한 시점에서 다른 사람의 기대감을 충족시켜야한다는 것이 쉬운 일은 아니었다. 주말동안 휴식을 취하면서 느낀 건 정말로 정적인 상태에서의 사람의 휴식은 꼭 필요하다는 것! 근 10일간 Done에 급급했던 내 자신을 좀 내려놓고 차분하게 개발할 수 있는 마음가짐을 가지는데 집중했다. 그리고 이건 프로젝트 진행 중에도 변치 말아야할 가장 중요한 요소라 생각된다.

칭찬해주고 싶은 점

:: 프론트-백의 깊은 배려

프론트엔드도, 백엔드도 각자의 분야만을 공부하다가 함께 프로젝트를 하는 것은 첫 경험이었다. HTTP 세션에서만 배웟던과는 달리 실전으로 오니 fetch의 사용에 대해서 당혹스럽기 그지없었다. 하지만, 팀원들이 다른 어느 조보다 배려심이 많았던 거 같다. 식사도 그렇고 많은 이야기를 못나눈 거 같지만 그 마음만은 참으로 와닿았다. 약간 내가 말 주변이 없어서 그런지 아무래도 말만 앞선 거 같다는 생각도 있었지만.. 태우님, 효진님, 정민님, 현찬님 모두 엄청 고생하고 있었던 걸 알기에 서로의 용어와 쓰임새를 잘 설명하고 이해시키려고 하나하나 짚어본 10일이었다.

:: 개발 방식에 대한 구체화

여러 조원들이 코딩하는 모습을 보면서 흐트러져 있던 내 개발 방식을 바로 잡는 계기가 된 거 같다. GIT, 함수 및 데이터 모듈화, 기능별 구현 체크, 협업툴 등 활용 방법에 대해서 많은 동기들의 사례를 보고 답습하며 느낀 점이 많다. 그리고 페이지 구성에 있어서 컴포넌트의 활용, 상세 페이지 등의 Route, RestfulAPI, this.props.children 등 프로젝트를 진행하면서 바쁘다는 핑계로 대충 세션만 들었던 것과 앞으로 블로깅하면서 정리를 통해 학습을 진행해야겠다고 다시 마음가짐을 바로잡아 주었다. 그리고 함수형 프로그래밍에 대한 강의라도 찾으면서 내 방식을 정립시켜야겠다.

:: State에 대한 접근

지난번 Westargram 구현에서도 그렇고 데이터를 펼쳤다가 원하는 부분만 수정하여 하는 방법의 필요성을 많이 느꼈다. 생활코딩의 강의만 보면서 생각했던 것과는 다르게 다차원 배열 및 오브젝트에 대하서 이를 활용해서 데이터의 상태를 바꾸고 자유자재로 접근할 수 있었던 가장 큰 예제가 다중 input에 대한 예시였다(피드에서 댓글 다중 입력, 체크박스 활용) 따라서 앞으로도 구현하면서 한 state를 관리하는 방안을 혼자서 또는 동기들과 고민하면서 가장 효율적으로 이를 접근하는 방법이 무엇인지 알아가고자 한다.

팀 프로젝트 후기

짧은 시간이었지만 팀원들과 함께 결과물을 낼 수 있었고, 그 과정이 희노애락 그자체였다. 현찬님과의 고생이 주마등처럼 스쳐지나간다. 처음 팀이 꾸려졌을 때, 다들 조용하셔서 걱정이 많이 되었는데, 프로젝트 내내 정민님의 농담도 그렇고 서로 챙겨주면서 잘 지냈던 것 같다. 특히 장바구니 기능을 구현하면서 소리 질렀던 사건이 기억에 남는다. 종택님의 리뷰로 모든 것을 새벽에 고쳤지만.. (밤샘) 그래도 그 처음 연결되어 데이터가 받아질 때 기쁨은 아직도 생생하다. 플젝 발표 끝나고 회식이라도 하면서 풀었어야 하는데 다시 식사자리라도 생기면 서로 담소를 더 나누어 봐야겠다. 다음 프로젝트에서도 많이 성장해서 1인분은 단단하게 할 수 있어야지! 모두 수고하셨습니다!