G9 클론 프로젝트 [O9O9] 후기

(브러쉬로 한땀한땀 그려서 제작한 로고)

About O9O9

O9O9는 현재 이베이코리아에서 운영중인 오픈마켓 G9를 클론해보는 프로젝트입니다.

1차 프로젝트로는 커머스 사이트를 해보는 것이 좋다는 선배 기수분들의 말을 들은 것도 있고,

실제로 G9 사이트를 이용해 본 경험이 있고, 전체적으로 깔끔한 디자인이 마음에 들어 지원했던 프로젝트였는데

실제로 1차 프로젝트에서 원했던 프로젝트를 할 수 있게 되어서 기뻤다!

프로젝트 진행기간

2020년 11월 16일 ~ 2020년 11월 27일 (12일 간)

기술 스택

• FrontEnd

JavaScipt ES6

React (CRA로 초기세팅)

Sass

• BackEnd

Python

Django

• 공통

git

Slack

Trello

팀원 소개

• FrontEnd

🌸 류지혜 (PM)

🌺 김현지 (본인)

🌼 안혜수

• BackEnd

☘️ 박승제

🌻 이민영

🌹 이성보

프론트엔드는 여자 셋, 백엔드는 남자 셋으로 이루어진 유일한 팀이었다!

다들 너무나 순둥순둥 하셔서 마찰이랄 것이 하나도 없었다. 배려심 넘치는 훈훈한 O9O9 팀…

팀명처럼 다들 너무너무 귀여운 사람들이었다. O9O9팀 귀여워~~

프로젝트 목표와 팀 목표

우리 팀은 1차 프로젝트에서 프론트엔드는 React, 백엔드는 Django 기본기를 착실히 다지고자 하는 공통된 목표를 가지고 있었다.

다양한 기능을 추가하며 무리한 목표를 설정하기 보다는 보다 기본적인, 우리가 할 수 있는 것들을 확실히 자신의 것으로 만들고 넘어가자는 데 모든 팀원들이 동의했다.

Scrum 방식과 Trello

귀여운 고양이와 함께했던 O9O9 팀 trello

프로젝트는 scrum 방식으로 진행됐다.

협업 툴 trello를 사용하여 언제 어디서나 팀원들이 무슨 일을 하고 있는 지 체크할 수 있었고,

매일 스탠드업 미팅을 진행하며 현재 진행상황을 공유하고 팀원들과 소통할 수 있는 장을 마련했다.

1주를 스프린트 단위로 사용했기 때문에 개인적으로는 첫번째 주에는 최대한 많은 기능을 구현하고, 두번째 주에는 리팩토링에 집중하려고 노력했다.

프로젝트 결과물

메인 페이지

자세히 보아야 예쁘다

오래 보아야 사랑스럽다

내 Main component도 그렇다

Image carousel

image carousel은 React Slick 라이브러리를 사용했다.

시간적 여유가 된다면 직접 구현해보고 싶었지만 당연히 그런 여유는 존재하지 않았고…

자유롭게 커스터마이징이 가능한 라이브러리여서 실제 G9와 흡사한 모습으로 구현할 수 있었다.

document에서 친절하게 사용법을 알려주고 있어서 너무 좋았다! ref를 사용하는 부분은 업데이트가 필요해 보였지만!!

아이템 카드들

너무너무 예쁜 아이템 카드 레이아웃!!

마우스 호버 효과는 정말 간편하면서도 큰 변화를 주는 것 같다. 이 효과가 있고 없고 차이가 정말 크다.

그리고 G9 사이트의 메인을 보자마자 그리드를 사용하여 구현해보고 싶은 마음이 들었다.

기존에 flex는 많이 사용해보았지만 grid는 잘 사용해보지 않았어서 나름의 도전이었다. 일분코딩님 글을 보고 많이 배웠다!

영상에는 나오지 않지만 요로코롬 반응형이기도 하다.

그리드 레이아웃을 사용하여 더욱 수월하게 반응형을 구현할 수 있었다!

그냥 grid-template-columns 속성만 변경해주면 된다. 참 쉽죠?

다음에도 사용해보고 싶은 의향 200%!!

좌측 네비게이션 바

카테고리 텍스트를 누르면 뒤에 숨어있는 새로운 서브카테고리 네비게이션 바가 나타난다.

버튼을 누를때마다 state를 변경해주며 그에 따라 classname을 변경하여 translateX 효과를 주는 식으로 구현했다.

이것도 정말 별거 아닌데 다이나믹한 효과를 준다. 매우 뿌듯…

상단 네비게이션 바

로그인 상태일때와 로그아웃 상태일 때 나타나는 메뉴가 다르다.

그리고 장바구니에 상품이 담겨있을 경우 몇개의 상품이 담겨있는지도 나타난다!!

장바구니에 물품이 담길 때 마다 숫자가 갱신되도록 했다. 이것도 매우 뿌듯..^^

상품 리스트 페이지

카테고리 별 상품 목록

좌측 네비게이션 바에서 카테고리를 선택하면 해당 카테고리에 해당하는 상품들에 대한 데이터를 백엔드와 통신을 통해 받아와서 보여준다.

카테고리 내에 서브카테고리를 선택하면 그에 해당하는 상품 목록들을 받아와서 보여준다.

목록 형식 변화

해당하는 그리드 버튼을 누르면 상품 목록의 배열 방식(?)이 변화한다.

사실 이것도 메인페이지에서 반응형을 구현했던 것과 같은 방식으로 동작한다.

그냥 grid-template-columns를 수정하면 끝이다!

정말 별 것 아닌데 다이나믹한 효과를 줄 수 있었던 기능 넘버 투!!

페이지네이션 기능

사실 이 기능을 만들면서, 하단에 나타나는 페이지 수를 조정하기 위해서는 필연적으로 모든 상품 데이터에 대한 수량 정보가 필요하게 되는데,

이런 식으로 구현해도 맞는 건가..?하는 의문이 조금 들었다. 지금이야 데이터 수가 워낙 적어서 괜찮지만, 상품의 수가 엄청나게 많아진다면 너무나 비효율적일 것 같았다.

그래서 나름의 고민 후 현재 페이지 기준 -5부터 +5번째 페이지까지만 하단에 나타나도록 구현했는데,

데이터를 그정도로 많이 만드는 것이 쉽지가 않아서 보여줄 수 없다는 게 조금 아쉽다.

마침 이 기능을 구현하고 나서 페이지네이션 세션이 열려서 멘토님께 이에 대해 여쭤봤더니, 너무나 감사하게도 좋은 글을 알려주셨다!

페이지네이션 컨트롤 UX 원칙 9가지 나만 이런 고민을 한게 아니었군… 싶으면서도 더 나은 방향으로 나아갈 방향성을 알게 되었다!

목록 정렬

옵션을 선택하면 상품이 그에 맞게 정렬된다.

이런 정렬 기능은 프론트에서 구현할 수도 있고, 백엔드에서 구현할 수도 있는데, 우리팀은 프론트에서 정렬 기능을 구현했다.

나중 되니 우리팀만 프론트에서 한 것 같더라… 그래도…우리팀에서는 그럴만한 사정이 있었다..😭

선택한 정렬 기준에 맞춰서 products 배열에 sort 메서드를 사용해주는 방식으로 구현했다.

목록 내 검색 기능

인스타그램 클론에서도 써먹었던 기능… 우려먹고 우려먹는다!!

상품 이름에 검색어로 입력한 스트링이 포함되어있으면 그에 해당하는 상품들을 보여주는 기능이다.

다음에는 백엔드분들과 소통해서 쿼리스트링을 사용한다던가 하는 방식으로 검색 기능을 구현해보고 싶다!!

프로젝트 소감

진정한 협업 툴로서의 git과 GitHub

저번 인스타그램 때 팀으로 github에서 협업 아닌 협업을 해볼 기회가 있었는데, 그 때 느꼈다.

git이 정말 무시무시한 녀석이라는 것을….

그래서 프로젝트 초반부터 팀원분들과 git 브랜치 관리하는 방법에 대해서 확실히 해두었고

첫 PR이 머지되었을 때 다같이 모여서 pull 받고 merge 하고 conflict를 해결하는 과정을 함께 했다.

그 덕분인지 다행히도 프로젝트 기간 내내 git이 꼬인 적 없이 순탄하게 흘러갔다! 너무나 뿌듯~😊

repository의 readme파일, trello의 공지사항에 git 관련 참고사항을 적어두었다.

설계의 소중함

인스타그램 클론 메인페이지와 O9O9 상품 리스트 페이지 component 설계 초안…작고 소중해

이건 알고리즘 공부하다가 생긴 개인적인 습관같은 것인데…. 본격적으로 코딩을 시작하기 전에 설계를 먼저 해놓는 것이다.

React에서는 부모와 자식 component들이나, 그들이 가져야 할 state, 전달해야 할 props 등을 어느정도 정리해놓고 코딩을 시작한다.

이런 식으로 한번 정리해두면 상대적으로 state나 props의 설계 상 문제가 생겼을 때 캐치하고 수정하기 편해지고

무엇보다 한번 생각을 쭉 정리하고 시작한다는 점에서 코딩하기 수월해지는 느낌을 받았다.

지금은 이정도이지만, 더 복잡한 component를 다루게 될 수록 빛을 발하게 될 것 같다!

넘나 고생한 우리 팀원들

마지막 날 PM 지혜님께 받은 선물… 어라… 나 어째서 눈물이…?

처음부터 화목하고 훈훈했던 분위기 끝까지 이어간 우리 팀원들 너무나 감사하고…마지막까지 고생 많으셨고…

매일 저녁 다같이 탁구(이제는 못하는 ㅠㅠ) 치던것도 넘나 즐거웠고…언제 이런 팀 또 만나볼까 하는 생각 들고….

혜수님과 티격태격 케미 보여주셨던 승제님… 안그렇게 생기신 민영님… 웃음벨 동공지진👀 쭈뼛성보님…

프로젝트 내내 넘나 행복해 하시다가 막판에 잠깐 고장나신 지혜님🤗… 넘모 작고 귀여운 소형견같았던 해수천재님… 잊지못할것입니다…

여러분 덕분에 매일이 행복한 나날이었습니다 ^^* 혹시나 이 글을 읽고계실 동기분들 또한 정말 수고 많으셨습니다!! 당신들이 최고에요!!

주말동안 푹 쉬시고 월요일에 2차프로젝트로 만납시다~ 화이팅 화이팅 야야야!

GitHub repository