rawrow 클론 회고록

mandarinduk·2020년 9월 28일

Introduction

rawrow(https://www.rawrow.com) 클론 코딩 프로젝트

기간 : 2020/9/14 ~ 2020/9/25
구성 : Front-end - 배규덕, 이흥수, 김상준 / Back-end - 이수현, 문성호
프론트 Github
백엔드 Github

어쩌다 로우로우

클론 프로젝트를 하기 위해 한 사람씩 자기가 하고 싶은 사이트를 제출하고 투표로 결정하기로 했다. 어떤 사이트를 할지 고민을 하다가 문득 내가 가지고 있는 로우로우 가방이 눈에 띄었다! 마치 운명에 끌린 듯 로우로우 사이트를 방문하게 되었고, 사이트 디자인이 내 스타일이여서 마음에 들었다. 그리고 제일 중요한 요소였던 '내가 해볼 수 있지 않을까?' 라는 생각이 들어서 아이디어로 제출했다.
생각지도 못하게 많은 분들이 내 아이디어를 선택해주셔서 로우로우 사이트를 클론하게 되었고, 영광스럽게도(?) 아이디어를 제출했다는 이유로 PM이 되었다..

고난의 시작

프로젝트를 시작하면서 많은 걱정들이 내 머릿 속을 지배하기 시작했다.

PM으로써의 역할, 내가 1인분은 할 수 있을까, 팀에 민폐를 끼치진 않을까...등등

그 무엇보다 가장 걱정스러웠던 것은 PM의 역할이였다.
지금까지 살아오면서 내가 리더십이 있다거나, 사람들을 이끄는 매력이 있다고 생각해본 적이 없었기 때문이다. 하지만 내 아이디어였고, 내 아이디어를 선택해준 팀원들을 위해 뭐든지 내가 먼저, 적극적으로 해보자는 책임감이 들었다. 초반의 어색한 분위기를 깨기위해 실 없는 말 한 마디라도 해서 분위기를 부드럽게 만들고자 노력했다.
하지만 나의 걱정은 기우였다..! 팀원 한 명 한 명 너무 좋은 사람들이였기에 팀 분위기가 너무너무 좋았다.

분위기도 좋고 다들 잘 하시고, 또 열심히 해주셔서 2주의 기간동안 너무 감사했고, 마치 선물을 받은 기분이였다.

그렇다면 이제 나만 잘하면 되겠는데?!!

자괴감, 그리고 성장?

글을 쓰다보니 프로젝트에 대한 회고록이 아니라, 내 일기가 되어가는 느낌이다. 하지만 프로젝트를 하며 느낀 내 감정 또한 소중한 경험이며, 기록하지 않으면 잊혀질 거라 생각되어 주절주절 계속 쓰도록 하겠다.

일단 front 팀원분들과 함께 CRA 초기세팅을 진행했다. 음.. 여기까진 그 전에 instagram 프로젝트를 하며 해봤으니깐 수월하게 패쓰! 그러고나서 각자 만들고 싶은 페이지를 나눠서 만들기로 했다. 나는 이번 프로젝트에서는 상품 전체 리스트 페이지를 제작했고, 2주차 때 추가로 장바구니 페이지를 제작했다.

프로젝트를 해보니 아직 내가 많이 부족하구나 라는 것을 많이 깨닫게 되었다. 어떨 때 배열을 쓰면 좋은지, 객체를 쓰는게 좋은지조차 기억에서 잊어버리고, 학습했던 내용들임에도 불구하고 직접 코드로 구현 못하는 경우가 많았다. (개념공부 소홀히 했던 나 자신 반성해..)
나는 구현 못하는 기능을 다른 사람들이 구현한 것을 보고, '나는 왜 저렇게 못할까? 나는 코딩이 적성에 안 맞는 걸까?' 라는 자괴감에 빠지게 되었다. 자괴감이 들 때마다 멘토님들이 저마다 각자의 속도가 있으니 너무 조급해 말라는 조언을 떠올리며 멘탈을 회복하려고 노력했다. 그리고 내가 하고싶지만 하지 못 한 기능을 구현한 사람들에게 가서 어떻게 했는지 물어보고, 눈으로 스캔하고, 그걸 따라 코딩하며 조금이라도 내 것으로 만들기 위해 노력했다. 그리고 어째저째 2주를 꽉꽉 채워서 페이지를 다 완성하게 되었다! 물론 많은 사람들의 도움을 받은 코드였지만, 두 달 전에 나라면 엄두도 못낼 정도의 결과물이였기에 너무나도 뿌듯했다.
이번 프로젝트의 성과는 결과물보다 오히려 많은 자괴감들과 그걸 극복한 경험인 것 같다.
앞으로 개발을 하면서 이러한 경우를 무수히 많이 겪을 것이라고 예상한다. 그럴 때마다 이번 프로젝트를 기억하며 꾸역꾸역 한 발씩 앞으로 나아갈 것이다.

아쉬웠던 점

1. 여러가지 기능을 구현하고자 욕심낸 것.
특히, 애니메이션 효과를 구현하려고 3일을 허비했던게 제일 아까웠다. 그 시간에 다른 많은 것들을 해볼 수 있었을텐데.. 여러가지 기능을 구현하는 것보다 하나를 하더라도 리팩토링 하며 제대로 하는 것이 중요하다는 것을 깨달았다.

2. back-end와 소통의 어려움
처음으로 이번 프로젝트를 하며 백엔드와 통신해봤다. 그렇다보니 데이터가 어떠한 방식으로 넘어오는지, 내가 어떤 방식으로 데이터를 요청해야하는지를 몰라 소통하는데부터 조금 어려움이 있었던 것 같다. 깊게는 아니더라도 어느정도 back-end 공부도 해야겠다고 느꼈다.

기억에 남는 코드

장바구니에서 +,- 버튼을 통해 수량을 변경하는 기능

처음에 이 기능을 구현하려고 수량을 관리해주는 별도의 state를 설정하여, 버튼을 클릭할 때마다 수량을 변경하려고 했다. 하지만 이런 방식으로 할 경우 처음에 back으로부터 데이터가 넘어올 때, 초기 수량 값을 state로 설정하는 방법이 떠오르지 않았다..
결국 도움의 손길을 요청했고, back으로 넘어오는 데이터들을 새로운 배열로 만들어서 그 배열의 데이터를 변경한 뒤, setState를 통해 back으로 넘어오는 데이터에 새로운 배열로 값을 해주는 방법을 활용했다!
코드를 짤 때에는 최소한의 state를 활용하여, 내가 관리해야 하는 것들을 줄이는 것이 효율적이라는 것을 배웠다.

장바구니에서 x 버튼을 통해 상품을 삭제하는 기능

장바구니에서 삭제하는 것은 당연히 내가 fetch DELETE로 해당 상품을 back에게 보내고, 삭제된 장바구니 DB를 다시 GET해오는 방식으로 생각했다. 하지만 이는 매우 비효율적인 방법이라는 것을 알게되었다..!
fetch를 2번하는 것은 비효율적인 방법이기에, 대신 back에게 DELETE만 보내고 filter기능을 활용하여 해당 상품을 뺀 데이터만 화면에 표시하면 되는 것이였다.
이러한 방식은 생각도 못했는데... 좋은 코드를 짜기 위해서는 더욱 많은 공부가 필요하다는 것을 깨달았다.