회고록에 앞서...

설연휴를 포함하여 3주동안 진행했던 위코드의 첫번째 프로젝트가 끝났다.
어떻게 보면 개발자의 커리어를 시작하기 전 가질 수 있는 첫번째 협업기회라고 할 수 있다.
좋은 팀원들과 함께 프로젝트를 진행하면서 어려움도 많이 겪었고 배운점도 많았기에 이번 회고록을 통해서 프로젝트를 진행하면서 느낀점을 다뤄보려한다.

프로젝트 소개

배민서바이벌

• 1차프로젝트 클론 사이트로 결정된 사이트는 내가 발표했었던 우아한 형제들이 운영하는 커머스 사이트 배민문방구
  이다.
• 클론사이트로서 배민문방구의 장점은 레이아웃이 간단하고 가장 간단한 커머스 사이트의 구조를 가지고 있어 난이도가 그렇게 높지 않아 현재까지 배운것을 잘 활용할 수 있다는것
• 배민문방구의 아이템들을 모두 똑같이 클로닝할 경우 저작권 관련 위법사항이 생길 수 있기 때문에 기획적인 측면을 바꾸어야 했다.
  • 21세기를 생존하는데 필요한 IT ITEM들을 팔아보자!! 라는 기획으로 배민 서바이벌 사이트가 탄생하였다.
  • 다소 엉뚱한 아이템들도 많지만 현대 사회(학교, 회사, 코로나)에서 가지고 있으면 좋은 꿀템들도 여러개 판매한다.

프로젝트 방향

• 배민서바이벌을 기획하고 우리가 어떤 기능을 구현할 지 회의를 한 결과 필수 구현사항을 프로젝트 진행기간동안 최대한 완수하고 시간이 남으면 추가 구현 사항을 시도해보는 것을 결정하였다.
• 추가 구현 사항은 다음과 같다.
  • 로그인과 회원가입 기능
  • Survival 제품 소개 리스트(메인페이지)
  • 상세페이지
  • 장바구니
  • 결제 창
  • 마이페이지
• 즉 유저가 사이트를 방문하고 제품을 구매하였을 떄 보편적으로 발생하는 한 사이클을 기본으로 기능 구현에 초점을 두었다.
• 서로 진행상황에 큰 부담을 주지않되 그렇다고 너무 책임감도 없지 않는 할껀 꼭 하자라는 마인드로 팀원들과 함께 프로젝트에 임하였다.

진행속 변수.....

백엔드 팀원분이 본업에 집중하기 위해 위코드를 나가기로 하셨다... 따라서 백엔드가 한분 밖에 없어지는 상황이 발생하였다. 그래서 백엔드와의 통신을 많이 못하더라도 Mock Data를 최대한 활용하여 사이트를 구현하는 것을 목표하였다.

프로젝트 팀원

• Frontend
  • 💪🏻💪🏻 한신웅
  • 🔥🔥 주지홍
  • 🧐🧐 임채현
• Backend
  • 🐻‍❄️🐻‍❄️ 최희택

프로젝트 기간

• 2021.01.24 ~ 2021.02.11

Stacks Used

• tools

• frontend

• backend

구현 파트

• 임채현: 로그인/회원가입/마이페이지
• 주지홍: 메인페이지/상세페이지
• 한신웅: nav/Footer/장바구니/결제페이지/멘토페이지

로그인/회원가입

• 내가 맡았던 파트는 로그인/회원가입 파트로 최대한 배민문방구의 로그인 회원가입 구조를 따라할려고 노력하였다.
• 배민문방구의 로그인은 매우 간단한 형식이지만 회원가입이 의외로 간단하지 않다.
• 각 인풋에 대한 유효성검사의 결과가 다른 인풋으로 넘어갈 시 인풋 밑에 내용이 보이는 형식이다.
• 배민문방구에서는 유효성검사를 통과하지 못하였을 경우에 대해서만 경고문을 렌더링하지만 배민서바이벌은 통과하였을 경우에 한해서도 성공문을 렌더링해준다.
• 기능구현은 다음과 같다.
  • 회원가입시 다양한 유효성 검사 (양식검사, 중복검사, 비밀번호 불일치 검사)
  • 검사를 통과하지 못할 경우 입력칸 아래에 경고 문구 출력
  • 양식검사, 중복검사를 모두 통과할 경우 사용가능
  • 출력 경고 문구가 남아있을 시 회원가입 불가
  • 출력 경고 문구가 사라졌을시 회원가입 가능
• 구현한 내용을 짧게 영상으로 찍어보았다.
  
  
  
  
  
  

** 메인페이지/상세페이지

• 주지홍 팀원님이 맡아주신 메인페이지와 상세페이지!
• 기능구현은 다음과 같다.
  메인페이지 상단 이미지 슬라이드 구현
  분류 기준 (최신순 / 높은가격순 / 낮은가격순 )에 따른 제품 리스트 렌더링
  * 쿼리스트링을 활용하여 카테고리 페이지 구현 및 페이지네이션 기능 구현
  - 인풋창 조건에 따른 수량입력
  - 로그인 상태일 때 장바구니로 구매버튼을 눌렀을때 장바구니로 넘어가도록 구현
  - 비 로그인 상태일 때 장바구니로 구매버튼을 눌렀을때 장바구니로 넘어가도록 구현
  - 제품 상태에 따른 상세페이지 렌더링 화면 변경
  
  
  
  

장바구니

• 한신웅 팀원님이 맡아주신 장바구니 페이지, 벡엔드와의 통신과정에서 정말 고생이 많으셨다 ㅠㅠ
• 기능구현은 다음과 같다.
  - 상세페이지에서 유저가 옵션과 수량을 결정한 아이템을 장바구니에 렌더링
  - ‘옵션 / 수량 변경’ 버튼 클릭시 모달 창이 뜨고 원하는 조건 변경 가능
  - 리스트에서 체크를 통해 아이템 선택 삭제 및 구매 가능
  - 구매 후 구매 완료 페이지로 이동
  
  
  

회고

나는 우리 배민서바이벌팀에서 어떤 팀원이었을까?

정말 좋은 팀원들 사이에서 내가 어떠한 역할을 하였을까??
고민을 해보았을 때 나는 많이 업혀간 느낌이 강한것 같다.
신웅님은 PM으로서 팀의 나침반과 같은 역할을 해주시고 희택님은 최후의 백엔드로서 혼자 3명의 프론트와 통신하느라 정말 고생을 많이하였다. 지홍님은 매우 열정적인 코딩자세를 보여주며 프로젝트의 결과물의 질을 높여주는데 큰 공헌을 해주었다고 생각을 한다.
나는 팀원으로서 많이 주도적이지 않았던 것 같다. 리더가 있으면 그에 맞춰 따라가는 팀원이 있듯이 나도 최대한 팀 방향에 맞춰 따라가는 방향을 택했던 것 같다. 보기에는 특색이 없고 평범할 수 있지만 팀원들과 큰 마찰없이 내가 맡은 바를 최선을 다해 끝내려고 했던 점에서 10점만점에 6점? 정도는 줄 수 있지 않나 생각해본다. 하지만 다음 프로젝트나 협업 기회에서는 좀 더 주도적으로 팀원들을 이끌거나 나의 생각을 표현할 수 있는 그런 적극적인 팀원이 되고 싶다.

협업에 있어서 어떤 것이 중요할까?

우리는 다양한 방식을 통해서 협업을 진행하였다 대표적으로는 트렐로를 이용한 Daily Standup Meeting이다. 또한 코드적인 부분에서는 git을 통하여 협업을 진행하였다. 프로젝트를 진행하고 많은 멘토들의 피드백을 받으면서 느낀점은 git이나 trello나 세분화가 필요하다는 것이다. 우리는 초반에는 솔직히 그냥 다양한 기업들이 사용하는 방식이니까, 멘토들이 권유하니까 등의 이유로 자의적이고 주도적인 느낌이 아니라 수동적이고 의무적인 느낌으로 이러한 협업 tool들을 사용하였다. 따라서 각자 할일에만 너무 몰두하고 자신들이 정확히 무엇을 하고 있는지 서로에게 공유할 수 있는 이러한 툴들을 사용하는 것에 무신경하였다. 그렇다보니 내용들이 세분화되어 있지 않아 작성을 해도 딱히 의미가 없는...? 그런 피드백과 느낌을 많이 받았다. git branch나 trello card들을 세분화하거나 label들을 적극적으로 활용하면 서로 더 친절하게 각자의 상황을 공유할 수 있고 협업의 능률도 올라간다. 협업에 있어서는 역시 개인의 관점보다 서로의 관점을 생각하여 행동하는 것이 중요하다는 것을 다시한번 배웠다.

아쉬웠던점

뭐든지 대충 지나치지 말자!

로그인 유효성검사 기능구현을 마치지 못하였다. 사실 충분히 할 수 있는 기능구현이었는데 프로젝트 초반에 내가 너무 통신에 대해 무신경하였던 것 같다. 회원가입에 몰두하느라 로그인 통신을 너무 후순위로 넘기었고 프로젝트 막바지에 하려다보니 백엔드가 한분이라 통신하기 많이 어려운 상황이 되었다. 사실 로그인 통신은 프로젝트 초반에 하는 통신이라 내가 좀 더 신경을 썻어야했는데 나중에 하려다보니 좀 업보로 돌아온 것 같다. 그리고 너무 백엔드 로직에 의존하려했던 것도 아쉽다. 물론 백엔드의 response message를 받아와서 활용하면 코드가 한 층 쉬워지지만 충분히 프론트에서 처리하는 방법도 있다. 프로젝트 막바지 희택님이 정말 바쁜 와중에 로그인 로직을 작성하려다 보니 너무 빠듯하였다. 다음 프로젝트부터는 확실히 우선순위를 정하고 그 우선순위를 확실히 끝낸 후에 다음으로 넘어가는 프로세스로 프로젝트를 진행해야 할 것 같다.

JS를 잘하자.....

React는 JS의 라이브러리일 뿐이다. 물론 정말 다양한 기능을 제공하고 활용성이 무궁무진하지만 근간은 역시 JS... JS를 잘하는 것이 곧 좋은 코드를 남기는 길인것 같다. 프로젝트를 진행하면서 가장 많이 마주친 의외로 사소한 것 같지만 매우 큰 문제가 바로 JS 문법이다. 중괄호 안에 return을 안쓰는거나 bracket notation을 활용하지 못한 것 등등.. 코딩을 역시 많이 해서 js에 더 익숙해져야 react도 더 잘 다룰 것이고 능률도 높아질 것이다.

아직은 우물안 개구리

이제 첫 프로젝트이다. 솔직히 투자한 시간에 비해 너무 결과물이 안나오는 것 같다는 생각도 했다. 프론트엔드에 본격적으로 입문한지 이제 2개월정도 되었다. 아직 못하는 것은 당연하다. 멘토님들도 항상 말했듯이 잘하는 사람들은 이미 나와 같은 시간을 거쳐 익숙해진 사람들이고 차이점은 그냥 먼저 시작한 것에 불과하다는것! 그렇다고 이런식으로 자기위로하며 안주할 생각은 전혀없다. 개발자는 끊임없이 학습하고 발전하는 것이 가장 중요한 법!!! 우물 안 개구리가 밖을 나가 세상을 마주칠 때 까지 얼마나 많이 벽에 부딪혔을까?
나도 세상을 나가 개발자로 성장하기 위해 계속 벽에 부딪히며 내 자신을 발전시킬 것이다.