Nike 코리아 클론 프로젝트 후기 😛

자신의 아이디어로 프로젝트를 진행하면 최고겠지만 짧은 부트캠프의 특성상 기획과 디자인에 큰 시간을 투자할 수 없습니다. 그래서 평소에 즐겨쓰고 많은 사용자가 사용하는 나이키코리아 사이트 클론 프로젝트를 진행했습니다.

프로젝트 소개

기술 스택 🛒

• React
• Sass
• React-dom-router
• React-slick
• Html/ Css / Javascript
• Git

프로젝트 기간 📆

• 2020.09.14 ~ 2020.09.25

인원 구성 📆
프론트 3명, 백엔드 2명

내가 맡은 부분: Main, Detail, Footer

사이트 주요 기능 🧨

• detail 페이지 장바구니

• main 페이지 사진 자동 변경
  

• detail 페이지 사진 스크롤 이벤트
  

• detail 토글 기능 / masking name
  

• main 슬라이더

팀으로 진행하면서..

이전 프로젝트에서는 팀으로 진행했지만 같이 작업하는 건 없었습니다. 하지만 이번 나이키 클론 때부터는 백엔드와 통신도 해야하고 프론트끼리 분업도 해야했습니다. 아무 생각 없이 코드만 칠일은 앞으로 없겠다는 생각이 들었습니다. 아침에는 항상 팀원들과 스탠드업 미팅을 했습니다. 물론 점심 뭐먹을지 정하는데 더 집중한거 같기도 합니다 ㅋㅋ 😂 프로젝트 역할 분담 그리고 꼭 지켜야할 컨벤션을 정하는데도 큰 시간은 생각보다 쓰지 않았던 것 같습니다. 컨벤션과 규칙을 제대로 정하지 않아서 인지 nesting을 하지 않은 팀원의 코드가 내 코드에 적용되기도 했습니다.😂 프로젝트 초기세팅 할 때 꼭 nesting 하는 걸로 정했으면 이런 오류는 겪지 않았을 것 같습니다. 초기세팅과 팀의 컨벤션의 중요성을 깨달았던 오류찾기는 힘든었지만 좋은 경험이었습니다. 빠르게 프로젝트 결과물이 눈에 보이기를 바랬던 것 같습니다.

재밌었던 에피소드

나이키는 한정판 신발이 워낙에 인기가 많아서 매크로를 막아놨습니다. 그래서 백엔드 팀원이 크롤링을 하기가 정말 어려웠는데요. 그래도 며칠동안 열심히 크롤링을 해서 저희에게 처음으로 데이터를 남겨준 날 저희 위워크 서버를 나이키에서 차단해버렸습니다. 우리 팀 뿐 아니라 다른 동기 컴퓨터에서도 접속이 안 됐음.. 엎친데 덮친격으로 잘못하면 나이키에서 신고할 수도 있다고..(동기 들이 장난침..😤)해서 팀원들이 엄청 긴장했던 재밌는 에피소드가 있네요.

기억하고 싶은 코드

재밌었던 코드

2주라는 짧은 기간 동안 백엔드에서 모델링, 크롤링, api 설계를 모두 하기 때문에 백엔드가 장바구니 통신까지 준비하는 건 무리였습니다. 그래도 미니 장바구니를 혼자서라도 진행해보고 싶어서 localstorage에 데이터를 저장해서 미니 장바구니를 저장했습니다.

도움이 많이 됐던 코드 / 제일 어렸웠던 코드

장바구니 삭제를 하는 코드입니다. 필터를 하기 위해서 비교할 값을 찾아야 하는데 불리언 값으로 비교를 했으면 쉽게 해결할 수 있던 문제를 id값으로 비교를 해서 해매서 기억에 남았습니다.

마무리

좋았던 점

1. 팀으로 진행해서 혼자 할 때 보다 많은 결과를 낼 수 있어서 좋았습니다.
2. 백엔드와 통신하는게 신기하고 재밌었습니다.

아쉬웠던 점

1. 조급해지다 보니까 변수명이라든지 불필요한 함수를 선언하는 등 코드의 질이 조금 떨어진 것 같습니다. (역시 조급하면 안 되는 것 같습니다)

기능을 구현하기 급급하다가 컴포넌트 설계를 조금 덜 신경쓴 것 같습니다. 지금 짠 코드가 최선일 수도 있지만 조금 더 컴포넌트 설계에 신경 썼다면 props전달을 한 번이라도 덜 할 수 있었을 것 같습니다. 더불어 Redux의 필요성을 절실히 느꼈습니다.

2. 해보고 싶은 기능들이 많았는데 못해봐서 아쉽습니다. 다음에는 더 좋은 습관과 실력으로 더 많은 기능을 해보고 싶습니다.

마지막 개발 철학

1. 재밌게 일하는 개발자
2. 함께 일하고 싶은 개발자
3. 발전을 멈추지 않는 개발자