공백 프로젝트 team 여백

💭 PROJECT OVERVIEW

침구, 생활용품 등을 판매하는 웹사이트인 공백 을 클론한 프로젝트.

커머스사이트의 특징을 살려 로그인부터 상품보기 - 상품리스트 - 상품디테일 - 카트에 담기- 주문하기 - 주문완료까지 하나의 FLOW를 완성해보자는 목표를 설정했고, 감사하게도 끝까지 완성할 수 있어 하나의 사이트처럼 구현할 수 있었다. (현재 AWS를 통해 배포까지 되었다!)

또한 공백 사이트는 카페24라는 쇼핑몰 관리 플랫폼에 제작되었기 때문에 사이트만의 특색을 더욱 살리기 위해 약간의 UI 커스텀을 했다.

프로젝트 시연영상

https://vimeo.com/540894798

작업 기간

2021.04.12 - 2021.04.23

기술 스택

프론트엔드 3명
HTML/CSS/SASS, JavaScript(ES6+), React

백엔드 2명
Django, Python, PyJWT, Bcrypt, S3, gunicorn, Mysql

협업도구
slack
git
trello

💡 주요 구현 사항

링크 걸어둔 부분은 내가 기여한 부분으로, 해당 링크를 클릭하면 세 파트로 나누어 더욱 자세하게 작성했다.

• 로그인 & 회원가입 access_token 을 이용한 유효성 검사
• 토큰 유무에 따른 회원가입 유도창 팝업
• 메인 nav bar, 메인 이미지 버튼 클릭시 슬라이더
• Best Products 판매량, 재고량, 날짜별로 필터링하여 limited, new 라벨표현
• 카테고리별 클릭시 해당 상품 리스트 나타내기
• 상품리스트 페이지네이션
• 상품 디테일 사진 클릭시 변화, 옵션선택과 수량에 따른 주문
• 상품 디테일 하단 해당상품 주문한 사람만 사진과 글 리뷰작성가능
• 상품 디테일정보 데이터에 저장-> 카트에 담기, 장바구니 비우기
• 카트에 담긴 정보 데이터에 저장-> 주문하기
• 카카오주소API를 이용한 주소검색
• 주문정보 데이터에 저장 -> 주문완료
  
  

구현 화면

1. 로그인, 회원가입 정규표현식을 이용한 유효성검사와 access_token 저장
   

2. 토큰 유무에 따른 회원가입 유도 팝업창/ nav, 메인 이미지 버튼 클릭시 슬라이더
   

3. 카테고리 클릭시 보여지는 해당 제품 리스트 & 페이지네이션
   

4. 검색 필터링
   

5. 상품 디테일 사진 클릭시 해당 상품이미지로 변화, 옵션 선택과 수량 선택에 따른 주문
   

6. 선택한 상품 카트에 담기/ 수량변경 및 삭제
   

7. 카트에서 구매 확정한 상품 주문하기 & 카카오API를 이용한 주소입력 & 주문완료
   

8. 상품 구매한 유저만 리뷰 작성 가능 & S3
   
   
   

💗 PROJECT REVIEW

칭찬해주고 싶은 점

소통은 항상 좋아!

가장 기억에 남는 것을 꼽으라면, 당연 백과 프론트의 원활한 소통이라고 말하고 싶다.

Trello를 이용해 진행상황을 공유하고, 매일 아침 11시에는 Daily Meeting 을 꼭 지켰다. 우리의 노션페이지에 매일 각자의 진행상황을 기록하고 blocker 을 공유해 함께 해결하거나 조정하기도 했다. 각자 오늘 하루의 목표설정, 그리고 프론트와 백이 맞춰볼 통신 부분이 있을 경우 또한 미리 조율하고 기록하였다.

프로젝트가 끝난 후 Done으로 이동한 아이들..! ৲( ᵒ ૩ᵕ )৴♡*৹ 유후~

또한 project overveiw에서 언급한 것처럼 백과의 통신에 있어서도 기능구현 순서대로 하나의 플로우를 맞춰가려고 했다.

그러다보니 내가 맡은 부분이었던 로그인과 회원가입부분부터 통신을 시작했다. 기능까지 완성하고나니 백에서 또한 데이터와 서버가 준비되어 첫 주 수요일부터 통신을 맞춰볼 수 있었다. (AMAZING~!👏)

그 다음 부분은 플로우를 지키되, 서로 완성된 부분을 먼저 맞춰보고 하나하나씩 퍼즐을 맞춰갔다. 데이터를 주고 받는 과정에서도 굉장히 많은 오류들을 맞이하게 되는데 이 점도 미리미리 맞춰보고 하나씩 해결해 나간 것이 프로젝트를 진행하는 데 크나큰 도움이 되었다.

내가 백으로부터 어떤 정보를 받아와야하고 어떤 정보를 보내줘야하는지도 항상 생각하고 물어봤다. 이 부분에서 프론트에서는 먼저 mock data로 짜보기 때문에, key 값을 맞추는 부분에서도 무조건 백에서 주는대로(?) 받아오기보다는 함께 맞춰갔다.

자 어떤 정보를 주고 받을 것인지 함께 의논해봅시다..!

그 첫번째 예시로,
cart 부분에서 프론트에서는 보여줄 금액으로 original price와 dc price가 필요하는데 dc price가 제외된 정보들이 넘어와서 나중에 다시 추가했던 기억이 난다.

그래서 프론트에서도 '내가 필요한 데이터는 무엇인지' 정확히 인지한 다음 놓치는 데이터들 없이 넘겨받을 것인지 꼭 맞춰보는 것이 필요하다고 느꼈다.

두 번째로 예시로,
POST로 order 할 상품들에 대한 id들을 보내줄 때 나는string 형식으로 보내면 되겠지라고 생각했는데 배열에 담아서 보내주실 수 있나요? 라고 먼저 물어봐주셨기 때문에 어떻게 배열로 담아서 보낼 것인지, 가능한것인지 먼저 생각해볼 시간이 있었다.

나는 통신이 너무 재밌다....! 무엇을 보내주고 받아야 하는지 멀리서 맵을 그리며 생각할 때도, 데이터가 오고가는 과정도 흥미롭다. 그리고 그 과정에서의 소통과 협업은 더더욱 짜릿하다!

이처럼 나는 이번 프로젝트를 통해 소통의 위대함과 중요성을 너무나도 잘 느꼈다 💗

군더더기 없는 초기셋팅

처음 기능구현 파트를 나눌 때 페이지별로 나눈다면 훨씬 쉽게 나눌 수도 있었던 부분을 우리는 난이도 상/중/하로 나누어 분배했다.

지금 생각해도 정말 잘했던 것 같다. 각자 해보고 싶은 기능도 있을 것이고, 난이도때문에 망설인 부분도 있을 것이다. 기능을 나누다보니 크게 9 개의 부분으로 나눌 수 있었고, 이것을 프론트엔드 3명이서 난이도별 3개씩 맡아 프로젝트를 시작할 수 있었다. 각자의 템포에 맞게, 누구는 쉬운 부분부터 누구는 어려운 부분부터 시작하며 각자의 속도를 지킬 수 있었다.

초기세팅 또한 공용으로 쓰는 reset.scss와 common.scss 이나 Routes.js에 담길 것들을 미리 생각하여 충돌을 최소화했고, 페이지 레이아웃부터 짤 때 빠르고 쉽게 적용할 수 있었다.

계획된 충돌 방지하기

프론트 팀은 첫 주차부터 완성된 레이아웃과 기능들은 바로바로 git hub에 PR을 작성하고 merge를 시작했다. 왜냐하면 나중에 점차 컴포넌트들이 합쳐지고 공통으로 쓰는 파일에서 거대한 충돌이 일어날 것이 분명하고, 많은 데이터들은 더 큰 사태를 불러일으킬 것으로 예상했기 때문이다. 미리미리 merge를 하고 발생한 conflict 들을 즉각적으로 해결하며 크나큰 멘붕의 사태를 방지할 수 있었다. 사실 conflict은 피해갈 수 없는 것이다. 우리팀도 마감 하루전엔 큰 conflict이 나서 남선님과 모니터와 셋이서 한 세상에 갇힌 것처럼 몰두하여 해결한 기억이 난다... 여러 사람이 함께 작업하면서 conflict이 나는 건 아주아주 당연한 것이다. 이 사실을 차분히 받아들이고 차근차근 해결해나가면 된다.

그럼에도 아쉬운 점

고민한 시간을 충분히 가졌는가?

프로젝트 첫 주에는 로직을 짤 때 혼자 고민하는 시간이 많았는데, 점차 마감시간에 쫓기고 짧은 시간내에 목표한 많은 기능구현을 하려다보니 고민하는 시간이 줄고 멘토님들을 많이 괴롭혔던 것 같다.

물밀듯이 들어오는 새로운 정보들을 곱씹어 보지 않은 채 그냥 삼켜버린 부분도 있었다. 후기를 쓰며 천천히 되돌아보고, 코드 하나씩 뜯어볼 예정이지만 프로젝트를 하면서는 천천히 돌아볼 시간이 없었다.

한 페이지를 하더라도 완벽하게 구현해볼 것인가 ? 여러 기능들을 구현해볼 것인가 ? 이 부분은 두 가지의 밸런스를 적절히 잘 지키며 타협점을 찾아야할 것 같다..!

💭 나의 첫 번째, 팀 프로젝트 후기...

프로젝트 첫 주에는 개인적으로 스트레스를 많이 받았었다. 프로젝트를 완벽히 끝내야한다는 압박감과 팀원들에 비해 또는 다른 팀에 비해 속도가 더디진 않나 비교하기도 했다. 나에게 주어진 테스크들을 완성해야되고, 잘해야된다는 생각이 끊임없이 나를 괴롭히고 괴롭게했다.

하지만 어느 순간부터 생각을 바꾸기로 했다.
이 프로젝트는 온전히 처음부터 끝까지 나와 팀원들의 의견과 기획을 담은 첫 번째 프로젝트이다!

이 프로젝트를 통해 내가 어떤 성장을 했고 어떤 것을 배웠는지 느끼기로 하고, 하루하루 맡겨진 테스크에 매몰되지 않도록 노력했다.

어제보다 몇 줄의 코드를 더 작성할 수 있는가?
어제보다 더 많은 개념들을 배웠는가?

나는 프로젝트를 즐기기로 했고 이런 마인드셋을 설정하고 나니 다른 사람들의 템포가 어떻든간에 나에게만 집중할 수 있었다. 나에게 집중하되, 나한테 부끄럽지 않도록 눈을 뜨고 감는 순간까지 최선을 다해 프로젝트에 임했다. 그러다보니 내가 오늘 기능 구현을 몇개를 했지? 라는 생각에서 벗어나 지식이 차곡차곡 쌓이는 기분을 즐기면서도 퀘스트를 돌파했던 것 같다.

또한 이렇게 즐기면서 하다보니, 팀으로 결성된 첫 날 불가능해보였던 목표한 기능들을 모두 구현할 수 있었던 miracle!이 일어났다.

프로젝트 첫 날 Login.js 파일을 만들며 백지부터 시작했는데
무에서 유를 창조하는것이, 이런 것이 개발이란 것을 소름 돋도록 느끼게 되었다.

사실 우리팀은 다른 팀에 비해 4명이란 적은 수의 팀원으로 프로젝트가 마무리 되었다.
그럼에도 끝까지 모두 열심히 해주고 서로를 배려해주었기 때문에 좋은 분위기 속에서 마지막까지 좋은 결과를 낼 수 있었다. 팀원 한명 한명에게 너무나도 고맙고 이런 팀원들을 만난 것은 정말 크나큰 행운임을 느낀다. 나의 부족함을 많이 느꼈고 멋진 팀원들을 통해서도 정말 많이 배운 프로젝트였다.

나는 어떤 개발자가 되고싶나? 라는 질문에 불과 2주전에 쓴 글이 있는데, 지금은 그것과는 또 다른 목표와 반짝임이 생겼다. 더 많은 사람들과 프로젝트를 하고 더 많은 코드와 맞닥뜨리면서 점차 개발자로서의 아이덴티티가 하나씩 정립되어 가는 기분이다. 이것 또한 나중에 정리해보고 싶다.

여백팀 발표도 했습니다!

여백팀의 공장장님 HBD~..모두들 사랑해요!

여백팀 프론트엔드 GitHub Repo
여백팀 프로젝트 백엔드 GitHub repo
여백 사이트 보기 http://white-space.cf/