나의 2번째 프로젝트

첫번째 프젝이 끝나고, 꿀같은 설연휴가 지난 후....
2번째 프젝 시작 ! 😱
첫번째 프젝의 폭풍을 겪었어서 그런가, 전혀 설레지 않았다 ^^
백엔드와 잘 소통하고, 할수있는 만큼의 기획과 설계를 잘 짜는 것에 집중했다.

사시른 가장 피할수도 없고, 마주하면 마주해야하는 팀원의 구성에 대해 나도 어쩔 수 없이 걱정을 했지만.... 감사히도 아주 만족 ! ✨

원래도 중요하다고 생각했지만,
여기서 프젝을 하며 협업과 커뮤니케이션의 중요성을 더더욱 깊이 느끼고 있다.
여기서도, 앞으로도 다양한 사람들과 커뮤니케이션을 해야하고 협업해야 하는데,
어떤 사람들을 만나더라도 융통성있는 커뮤니케이션을 하려면, 넓은 마음으로 협업하려면 부단히 경험하고 부딪히고 깨달아야 겠지?

협업을 선호하는 편인 나도, 이 개발이라는 분야에서, 언제 / 어떻게 / 어떤 방식으로 협업하고 커뮤니케이션을 해나가야 가장 지혜로운 방향인지 아직은 잘 모르겠다.

어제 본 띵언 🧚🏻

"기꺼이 쏟아붓고, 기꺼이 실패해라"

넵!!

---

🏃🏻‍♀️ 기획

우리 팀에게 지정된 사이트는 KREAM 이다.
난 이번에 이 사이트를 처음 알았다 😯

https://kream.co.kr/

☝🏻 이 사이트를 기반으로 기획을 시작했다.

브랜드 이름	OUR PRODUCT	핵심가치
wehicle	중고차 실시간 입찰 거래 사이트	투명한 중고차 시장을 만들기 위해, 고객에게 합리적인 시세와 가격, 신뢰도를 제공

경매 시스템이 있는 사이트.
입찰, 구매 가격에 따라 시세가 정해지고, 그 시세는 상세페이지마다 그래프로 나타난다.

😎 사이트 및 브랜드명

wecode 의 'we' 와
'탈 것'의 영어단어인 vehicle 을 합쳐서

---

🔥 내가 맡은 구현페이지

• 메인페이지
• 푸터
• 구매하기 / 입찰하기 모달창
• 판매등록 페이지

메인페이지

> 캐러셀 기능

이미지 박스마다 임의의 index 번호를 지정해주고, state로 관리하였다. useRef hooks를 배울 수 있었다. DOM처럼 태그에 직접 접근하여 스타일 줄 수 이따. 무한캐러셀까지 구현하고 싶었지만, 하지 못했다 ㅜㅜ 멘토님들 계실 때 해보려고 했는데... 구현한 동기들 물어보니까 다 라이브러리를 썼다고 하네!(slick) 나는 라이브러리 없이 하드코딩으로 우선 이해하면서 구현해보고 싶은데, 나중에 재도전 해보아야겠다

> 페이지네이션 기능

혼자 해보려고 찾아보았는데 생각보다 복잡하고 어려워서, 다른 동기의 코드를 참고했다. 더보기 버튼을 누를때마다 렌더링 되는 데이터들이 기존 데이터들에 쌓여야 하고, 새로고침을 할 때는 다시 초기 갯수만 렌더링 돼야하는데, 이게 내 머리로는 안돼서 골머리를 앓았다 🤯 결국 멘토님의 도움을 받았고, 결국 버튼 누를 때 실행하는 fetch 랑, 새로고침 시 실행되는 fetch 를 따로 코딩해주어야 했다. ㅠㅠ
offset, limit 값 세팅해주는 거.. 쿼리스트링 기초.. fetch 의 동작원리.. 이게 다 기초가 부족한 탓인가 〰️

> 조건부 렌더링 / 동적라우팅

이 부분에 대해서는, 이전에 이미 하나 벨로그 정리를 해놓았다. 메뉴 탭에 밑줄 생기는 효과 구현! 태그에 이름을 주어, 그 이름을 state로 관리하여 조건문으로 밑줄 효과를 구현했더랬지. 이것두 멘토님 도움! ㅎ 6개씩만 보여주면 되었으므로, limit 은 고정값 6! 보여줘야 하는 카테고리가 2개였어서 삼항연산자로 해결 가능했다.
그리고 상품을 누를 시, 상세페이지로 이동하게 끔, url endpoin 뒤에 상품아이디를 넘겨받아 동적라우팅으로 연결시켜주었다.

푸터

푸터는 그냥 푸터 🦶🏻 UI 구현
( + 탑업키는 팀원 1명이 만들어놓아서, 재활용했다 )

구매하기 / 입찰하기 모달창

> 구매하기 모달창

1차 플젝 때, 상세페이지에서 모달창 띄우기를 구현했어서, 1차 코드를 사용하여 구현하기가 수월했다. 그리고 상세페이지에 있는 데이터들을 모달창으로 전달받아서 필요한 데이터들만 뽑아서 배치시켜 주어야했다. 옵션 유무에 따라 네모들의 배경색을 설정해주었다. 만약 가죽시트 옵션이 없는 상품이라면, 모달창에 있는 가죽시트 박스는 흰색 배경에 검정 테두리만 있을 것이다. true / false 값을 1 / 2 로 주어 구현하였다. 구매하기 버튼을 누르면, 결제페이지로 이동한다!

> 입찰하기 모달창

상세페이지를 통해 받은 데이터에서 이미지, 브랜드이름, 차종, 가격만 뽑아주고, UI만 구현했다.

판매등록 페이지

제일 빡셌던 페이지, 통신이 엄-청 어려웠다. (그래서 못함 푸하하)
리덕스를 안쓰니까, 백엔드 데이터베이스에 보내줘야 할 모든 정보들을 일일히 하나하나 빼서 넣어줘야 했다. 진짜 손 댈 엄두도 안났었는데,,, 반 정도는 담았었다 ㅜㅜ

> 이미지 업로드 및 미리보기 기능

input 태그에 type을 file로 설정해주고, 스타일 커스터마이징 하려면 label 태그로 감싸고 for 속성을 주어 스타일을 주어야 한다. (input 태그는 안보이게!)
미리보기 기능은, new FileReader() 기능을 사용했다. url을 추출하여 저장하여 이벤트 발생 시 다른 이미지 태그에 띄워주는 것이다. 😆
( + 사진 여러개를 업로드하고 싶다면 input type file 에 multiple 추가해주면 된다. 이미지 파일종류는 모든 이미지 파일 -> image/* )

> 커스텀 셀렉트 박스

이것도 아주 머리 아팠당. UI구조나 스타일이 똑같아서, 하나의 컴포넌트로 사용하길 원했다. 그러나 각각 map으로 돌리고 있는 상수데이터가 달랐고, 심지어 첫번째 셀렉트 박스에 따라 두번째 셀렉트 박스 내용이 바뀌어야 했다. 🤪
혼자 붙들고 있지 않고, 멘토님 도움 요청 ^^
각자 다르게 돌리고 있는 상수데이터를 담은 배열 내 객체형태로 하나 만들어주었다.
그 객체를 참조하여 map이 돌아가도록 제 각기 다른 데이터를 담은 객체를 만들어준 것이다 😂 그리고 첫번째 셀렉트 박스의 값에 따라서, 다른 데이터들이 두번째 셀렉트 박스에 나올 수 있도록 state를 어쩌구 저쩌구 조건을 어쩌구 저쩌구 해주셨는데... 내 머리로 다 이해가 안된다. ㅜㅜ 한참 뜯어보다가 결국 보내주었다. 악

> 캘린더 기능

검수날짜를 고객이 원하는 날짜로 선택할 수 있도록, 달력 기능을 구현했다!
이건 라이브러리를 사용했다 (react-datepicker)
공식문서보고 하면 금방 할 수 있다

> 휴대폰 번호 '-' 자동 추가 시켜주기!

이건 다른 코드 만지다가 꼬여서 결국 주석처리 됐는데, 구현은 됐었다.
11자리 폰번호가 다 찍히면 '-' 가 3/4/4 자리마다 자동으로 들어갈 수 있도록, 구글링글링으로 구현해냈었다. 정규식표현을 처음으로 사용했다. (물론 복붙함)

> 실시간 숫자 입력 천단위마다 콤마 찍히게하기

이건 구현 성공!!
e.target.value 를 가지고와서, replaceAll 로 콤마를 다 삭제해주고, 숫자로 변환하여 담아줌 -> toLocaleString()으로 변환하여 다시 담아주면 끝~

> 추가

➕ 하나의 컴포넌트로 input 재활용
➕ boolean 값으로 버튼토글 구현 (백엔드에는 1 아니면 0 값으로 보내줘야 했음)

---

💫 소감

이번에는 trello 정리도 나름 잘하고, 현실자각하며 sprint 도 잘 처리했다.
많은 기능들을 구현하려고 하기보다, 코드를 좀 더 효율적으로 품질높게 짜기 위해 노력했다. (만족 엑스)
확실히 1차때보다 어려운건 어려웠다.
외부 API 도 써야했고, 라이브러리도 써야했다.
그러나 1차때보다 더 깔끔해진 효율적인 커뮤니케이션과, 업무 분담 + UI 짜는 코딩 실력 향상 (근데 styled component는 여전히 시름)

내가 기능이 엄청 빡센 페이지를 맡지 않아서 좀 더 수월했던 것 같기도 하고, 우리 팀 백엔드들이 탄탄해서 또 큰 막힘없이 잘 해낼 수 있었다.
판매등록 페이지 통신이 관건이었는데, 끝내 해내지 못해서 아쉽고 찝찝하다 😒
(어차피 리덕스를 미래에 쓰겠지만, 그래도 데이터들을 하나하나 담으면서 디테일한 부분들이 공부될테니 말이다.)

후 ... ! 리팩토링 해..야...하는...데....

아무튼 wehicle 팀 수고하셨습니당 🎈🎈




👇🏻 🔗 wehicle 데모 영상
https://www.youtube.com/watch?v=YxTH82veYOk


👇 🚗 wehicle Github
https://github.com/wecode-bootcamp-korea/41-2nd-wehicle-frontend