Tesla Korea Clone Project

---

프로젝트 소개 📃

• 전기자동차와 청정 에너지 회사인 tesla Korea 홈페이지 클론 프로젝트

데모영상보기: tesla Korea clone

코드보기: cyheum_github

팀원 🙋‍♂️

• 프론트: 오상구(PM), 유휘찬, 최예흠 (3명)
• 백엔드: 김태수, 문태기 (2명)

기간 📆

• 2020.8.18 ~ 2020.8.28(2 Weeks)

개발 목적 🛠

• CRA를 통한 초기 세팅
• react를 통한 Single Page Application의 이해와 개발
• git을 통한 팀원들간의 분업 및 협업 경험
• 백엔드와 API를 통해 데이터를 주고받으며 협업 경험

적용 기술 💻

공통

• HTTP
• Git
• Linux
• Trello
• AWS
• PostMan

프론트엔드

• React.js
• React Router
• sass

백엔드

• Python
• Django
• Bcrypt
• Jwt
• Selenium

주요 구현 기능 🎬

직접 구현한 기능은 ✅, 팀원이 구현한 기능은 ✔️ 표시

1) 📄 회원가입 / 로그인 페이지 ✔️

• ✔️이메일 및 패스워드 양식 확인 기능
• ✔️회원가입 기능(약관 동의 및 특정 조건)

2) 📄 메인페이지 ✔️

• ✔️페이지 로딩시 이미지 줌인
• ✔️버튼 클릭시 이미지의 특정 위치 줌인
• ✔️scroll에 따른 네비게이션 전환
• ✔️특정 scroll에 따른 네비게이션 색 전환

3) 📄 차량페이지 ✔️

• ✔️svg의 애니메이션 효과
• ✔️특정 수치까지의 숫자가 증가하는 애니메이션 효과
• ✔️scroll위치에 따른 애니메이션 동작(조건부 렌더링)
• ✔️scroll동작을 감지 후 부드러운 view의 전환
• ✔️사이드 네비게이션을 통한 특정 페이지 위치 이동
• ✔️특정 scroll에 따른 네비게이션 색 전환
• ✔️비디오 이미지의 재생
• ✔️페이지의 동적 라우팅

4) 📄 주문페이지 ✅

• ✅컴포넌트 최초 마운트 시 받아오는 데이터들의 첫번째 key를 초기값으로 설정하는 기능 구현
• ✅특정 수치까지의 숫자가 증가하는 애니메이션 효과
• ✅특정 차량 옵션의 이미지 부분적용 및 가격정보 적용
  • 버튼 클릭시 마다 총 가격과 맞는 차량 이미지 데이터 받아오는 기능
• ✅옵션 적용에 따른 예상 가격정보 모달페이지 생성
• ✅비디오 이미지의 재생
• ✅페이지의 동적 라우팅
• ✅결제 순서에 따라 조건부 렌더링

구현 과정 🎥

- 초기 레이아웃 구성

• 주문페이지를 맡았을 때 가장 처음 생각했던 것은 우선 초기 레이아웃을 모두 짜 놓아야 한다는 것이었다. 그래서 전체 적인 네비게이션 바와 컴포넌트들을 나누어서 분리하는 것을 우선으로 했다.

• 위의 이미지 처럼 위,아래,오른쪽 nav바 그리고 메인으로 나누었다.

- number increase

• 이 기능은 위의 영상처럼 숫자가 정해진 곳까지 증가하는 애니메이션이다.

• setInterval와 clearInterval 메서드를 사용해서 state 를 특정 숫자 까지 증가시키도록 하는 코드 구현

• 올라가는 숫자가 소수인경우와 정수인 경우 그리고 limit의 값이 현재 state의 특정 값보다 크거나 작을경우로 나누어서 코드 구현

• 애니메이션 딜레이 효과를 넣은 이유는 이미지가 로드 되기 전에 애니메이션이 먼저 나오니 이미지가 로드 되지 않는 오류 발생.
  => 애니메이션을 가지고 있는 클래스네임을 setTimeout을 통해 일정시간후 부여

- 아쉬운점

• 컴포넌트를 재사용하지 않고 한곳에 모두 작성한 점이 아쉽다.
  => 코드 리팩토링을 통해 컴포넌트들을 map으로 돌릴 예정

• 특정 조건마다 나누었지만 수치를 정해놓고 끝낸게 아쉽다.
  => 코드 리팩토링으로 부모 컴포넌트로부터 리미트 값을 조건에 맞게 받아오게 수정할 예정.

• 숫자들이 모두 같은 시간에 도착하지 않는 점이 아쉽다.
  => 라이브러리들이 있지만 구글링과 리팩토링으로 방법을 찾아볼 예정.

- 버튼 클릭시마다 POST 요청 및 데이터 받아오기

• 처음에는 이 기능을 넣지 않았다. 내가 긁어온 목 데이터를 활용해서 알맞게 바뀌게 할 수 있었다. 그런데 백엔드에서 버튼들의 이미지를 보내주고 버튼을 누를때 마다 차량의 이미지와 금액을 보내주게 되어서 코드를 다시 수정하였다. (1차 멘붕)

• 처음 코드를 짜고나서 나는 당연히 처음 컴포넌트가 마운트 됐을때 가장 첫번째 있는 값들의 총 금액과 이미지 사진을 받을 줄 알았다. 그러나 초기값 또한 컴포넌트가 처음 마운트 됐을때 내가 보낸후에야 받을 수 있는 것이었다. (2차 멘붕)

• 코드를 수정하고 아무생각없이 받은 데이터의 첫번째 아이디값을 그대로 스테이트의 초기값으로 설정해 놓았었다. 처음엔 당연히 문제없이 잘 되었지만 다음날 DB를 밀고 다시 데이터를 받으니 아이디가 바뀌어 있어서 되지 않았다. 그래서 다시 리팩토링하여 초기에 아예 받아오는 데이터들의 첫번째 아이디들이 각 스테이트에 알맞게 들어가게 설정해 놓았다.

- 아쉬운점

• 버튼을 누를 때 먼저 state가 한번 바뀌어서 렌더링이 다시 되고 fetch를 통해 데이터를 주고 받고 난후 setState가 이루어져 렌더링이 한번 더 되다 보니 이미지가 깜빡이게 되어버렸다... 그래서 딜레이를 걸어서 억지로 막아놓았지만 이점은 아쉬웠다.
  => 애초에 처음 백엔드로부터 데이터를 받아올 때 모든 이미지들과 그에 맞는 가격을 받아오면 어땠을까 한다. 그렇게 되면 최종 결제 페이지에서만 최종 state를 보내주게 되기에 이 점에서는 나아보인다. 그러나 특정 버튼을 누를때마다 POST하는 기능도 쓸 곳이 많을 것 같다.

- modal

• 특정 버튼을 눌렀을때 다른 모든것들은 작동하지 않고 새창이 뜨면서 그 창만 active 할 수 있게 하는 기능이 modal이다.

• 처음에는 화면 전체의 공간을 가지고 있는 div를 position: absolute를 통해서 만들게 되었고 그 후에 탈출을 위해서는 전체를 공간으로 가지고 있는 div를 하나 더 만들어야 active되고 있는 창을 클릭해도 탈출하지 않는 다는 것을 알게 되었다.

- 아쉬운점

• 보기에는 완벽한 모달같아 보이지만 뒤에서 setState로 인한 리렌더링으로 이미지가 깜빡이듯이 완벽하지는 않은 모습이다.
  => 적용이 되는 state의 위치를 최상단에 두어서 그 안에 있는 컴포넌트들 모두 리렌더링 되기 때문에 리팩토링을 통해 적절한 곳에 스테이트를 다시 둘 예정.

* 1차 프로젝트를 마치며..

1. 시작은 백엔드와 함께

• 처음 예상했던 것들과는 정말 너무나도 달랐던 것 같다.
  "내가 원하는 데이터만 받으면 되고 백엔드에서 원하는 데이터를 내가 알맞게 짜서 보내주면 되지 않나?" 하는 생각이 큰 오산이었던 것 같다.

• 프론트엔드와 백엔드는 결코 분리되어 있지 않다고 생각이 들었다. 가장 처음부터 함께 해야할 존재였던 것이다. 그걸 몰랐던 나는 먼 길을 돌고 돌아 가게 되었던 것 같다...

• 어떤 데이터를 어떻게 어떤 상황에서 주고 받을지, 데이터들의 key 는 어떻게 지을지, 등등 이 것들이 우선으로 짜여져야 프론트든 백이든 돌아가지 않을 것이다.

2. 욕심은 독

• 프로젝트를 하기전까지 했던 수업이나 코드카타 등 진행하면서 이해도 잘 되고 재미도 있었기에 나에게 서서히 자만과 욕심이 생겼던 것 같다. 프로젝트를 시작할 때만 해도 뭐든지 금방 할 수 있을 것만 같았지만 그것은 크나큰 오산이었다.

• 레이아웃을 빠르게 짰지만 백엔드와 데이터를 주고 받으면서 많은 시간을 소모했다. 그러면서 나도 모르게 주변 사람들의 현 상황을 의식하게 된 것 같다.
  주변에서 들려오는 환호와 내가 모르는 새로운 지식들과 기능들을 동기들은 하나씩 알아가고 차근차근 계획대로 진행되어 가는 모습에 나는 초조하고 불안했던 것 같다.

• 우물 안 개구리 라는 말은 나에게 하는 말 아닐까? 내가 보는 시야는 그렇게나 좁았고 내가 정한 틀 안에서만 나는 날뛰었던 것이다. 나의 욕심속에 있던 목표치와 자만들은 그렇게 무너졌다.

• 그렇게 다시 바닥으로 내려와 내가 오를 높은 산을 보며 다시 등산할 준비를 했다.

• "자만하지 말자", "욕심부리지 말자" 늘 마음으로 되뇌어야 한다.

3. 소통이야말로 지름길

• 가장 아쉽고 잘못했다고 생각한 것이 바로 "소통" 이다. 구체적인 소통이 많지 않았던 것은 팀원들에게도 죄송하다고 생각한다.

• 일주일마다 스프린트 계획을 세우고 데일리 미팅, 스탠드업 미팅을 통해서 소통을 하였다. 그러나 은연중에 이 소통이 그렇게 중요하지 않다고 생각했던 것 같다.

• 하지만 프로잭트가 진행 될 수록 나 혼자만 하는 것이 아니기에 팀원들 과의 속도도 맞춰야 했고 팀원들이 어떤 부분을 하고있는지, 또 내가 어느 부분을 어디까지 진행했는지 날마다 소통하는 것이 얼마나 중요한 지 프로젝트가 끝날 무렵 알게 된 것 같다.

4. infinite study

개발자는 죽을 때 까지 새롭게 발전하는 것들에 대한 공부를 해야 하는 것 같다.
이번 프로젝트만 해도 하나하나가 새로운 것들이었고 공부하지 않으면 할 수 없는 것들 이었다.

솔직히 프로젝트가 끝나고 다른 동기들에 비해 나에게 남은 지식들과 공부한 점들이 너무나 없게 느껴져서 인지 무기력해지고 바닥으로 떨어진 것만 같았다.

쇼핑몰을 한 동기들은 동적 라우팅이나 페이지네이션, 토큰과 세션 스토리지를 활용하여 장바구니를 구현하기도 하고 동적인 애니메이션이나 스크롤 이벤트들을 넣으며 새로운 것들을 너무나 많이 알아갔지만 프로젝트동안 했던 것이 백엔드와 데이터 붙이기 밖에 없었기에 너무나 아쉽고 뒤쳐진 것만 같은 느낌이었다.

"하면 되잖아"

어렸을 적부터 남들에게 뒤쳐진 것 같다고 느낄 때마다 나 스스로에게 해주는 말 "하면 되잖아"

그렇다. 남들보다 조금 뒤쳐지면 뭐 어떤가. 지금 당장 모른다고 해서 영원히 모르는가? 전혀 아니다.
개발자는 평생을 공부해야 한다. 새롭게 등장하는 것들에 대하여 찾아보고 읽어보고 또 내 것으로 만들어야 한다.

전혀 불안해하고 초조해 할 필요가 없다.

지금 당장 누군가는 저 멀리에 있을 수 있다.
하지만 언젠가 나도 그곳을 지나 칠 것이다.

속도와 각자의 위치만 다를뿐,
우리는 같은 곳을 달리고 있다.