2nd 프로젝트 (나이키 클론)

Byunghoon Lee·2020년 8월 17일
0

🎬 프로젝트 소개

전세계 스포츠 용품 시장에서 독보적인 1위 기업과 동시에 미국을 대표하는 기업중 하나인
'나이키' 사이트를 기획과 디자인을 제외하고 나머지 기능 구현 .
여러가지 상품들을 나열할 수 있어 React를 적극 활용할 수 있었습니다.

  • 기간 : 2020.08.03 ~ 2020.08.14
  • 팀원 : Frontend 3명 , Backend 2명

🧐 사용된 기술

공통

  • Git

협업툴

  • Trello
  • Slack

Frontend

  • React.js (class형 컴포넌트) , (함수형 컴포넌트)
  • JavaScript(ES6)
  • Sass
  • Library : react-router-dom , Link
  • HTML , CSS

Backend

  • Node js
  • express
  • puppeteer
  • mongoDB
  • mogoose

💻 내가 맡은 역할

  • 메인 페이지

📸 기록하고 싶은 코드

map 사용한곳에 string 변환

백엔드에서 데이터를 받아오는 값은 아래와 같다 .
키 값 imageUrl의 가장 끝에 option 때문에 사진이 아래처럼 흐릿해 보였는데

  • replace 사용전

option값을 gallery로 바꿔야 원본사진이 나와서
replace("기존 string" , "바꿀 string")
을 이용해 아래와 같이 작성 했습니다.

  • replace 사용후




Infinite scroll (pagination) 페이지네이션

수 백개의 상품 데이터를 한꺼번에 받아와 페이지에 나열하기에 메모리와 시간이 많이 소요되므로
상품 20개씩 데이터를 받아오고 , 스크롤 끝지점에 도달하면 다시 상품 20개를 받아오는 식으로 구현했습니다.

scrollHeight = 전체화면에 대한 높이
clientHeight = 사용자가 눈으로 보고있는 화면의 높이
scrollTop = 사용자가 스크롤해서 내린만큼의 높이

  • clientHeight + scrollTop의 높이가 scrollHeight의 높이와 같아지면 새로운 데이터((LIMIT)20개)를 받아와 렌더링 하는 방식으로 구현.

👇👇👇👇 참고 자료 👇👇👇👇

🏋️‍ 2차 프로젝트를 끝마치며

2차 프로젝트 팀이 발표가 되었을때 내 표정은 ...😳 딱 이랬다.
팀원구성이 프론트엔드로만 5명이었는데 그중 2명은 이제 처음 시작해보는 node js 로 백엔드를 , 그리고 나를 포함한 3명으로 구성이 됐는데 어디에 의존할곳이 없었다고 생각 했기 때문이다.
같이 보충수업을 듣던 프론트 멤버분들이라 걱정이 앞섰지만 , 그 걱정은 하루만에 바로 접게 됐다. 다들 레이아웃등 구현하는 속도와 진행속도가 진짜 빨랐고 같이 보충수업 듣던 분들이 맞나 싶을 정도로 많이 성장해 있어서 프로젝트를 진행하는데에 '자극' 을 정말 많이 받았었다.
나중에 종택멘토님한테 상담받으러 갔을때 '각자 충분히 할수 있는데 다른 10기 분들이 워낙 잘해서 못한다고 느끼시는거다. 그 의미에서 팀배정을 이렇게 했다' 라고 하셨는데 덕분에 자신감도 많이 얻었던것 같다. 갓택👍
또, 팀에 밸런스를 잘 유지할 수 있게 해준 준님도 내가 모르는게 있으면 최대한 나혼자 풀수 있도록 여러가지 방법으로 답에 접근할 수 있게 많이 도와줬었다.

1차때 React가 뭔지도 잘 모른채 꾸역꾸역 쓰고 있었다면 , 이번 2차때는 진행하면서 감을 많이 잡은것 같다. 1차 때는 페이지만 막 찍어내기에만 정신없어서 발표날이 다가올때쯤 확인 해봤을때 구현이 안되던게 많아 이번 2차때는 페이지 하나를 하더라도 양보단 질에 집중 하기로 했다. 사실 한 페이지에도 구현할게 정말 많았고 소소한 구현들도 막상 해보려니 어려웠던 것도 많았다. 한번 더 개발자들의 디테일함에 존경한다..

이틀정도는 근처에 에어비앤비로 4명이서 2박정도 투숙하며 아침 8시부터 새벽 1시가 다되도록 코딩하다가 간적도 있고 , 하루는 야식도 같이 먹으면서 이런저런 얘기도 하고 정말 힘든줄도 모르고 지나갔던 프로젝트였고 위코드 시작한지 2달이 지나가는데 정말 아무것도 모르는 상태에서 시작해서 많이 성장했고 하나하나 구현해가는 재미와 매번 새로운 기술을 응용해보고 익히는데 재미가 붙는 느낌이다.

이제 다음 기업협업을 나가게 되는데 그곳에선 핸드폰 어플을 만드는 기술을 사용하는데 (React Native) 그동안 정말 배워보고 싶었던거라 기대가 많이 되고 실제 개발자분들은 어떻게 일을하는지도 접할수 있는 좋은 기회인것 같다. 3개월차도 화이팅 해보자 !!!

그리고 LIKEY 팀원분들 정말 고생 많았고 고마웠습니다 👍

▶️ 프로젝트 영상

profile
Never never never give up!

0개의 댓글