WIL7

항해99 43일차	2022. 6. 20.(월)	클론코딩 (프론트3+백3 협업)	D반 - 클론코딩 JS 스터디
항해99 44일차	2022. 6. 21.(화)	클론코딩 (프론트3+백3 협업)	D반 - 클론코딩 JS 스터디
항해99 45일차	2022. 6. 22.(수)	클론코딩 (프론트3+백3 협업)	D반 - 클론코딩 JS 스터디
항해99 46일차	2022. 6. 23.(목)	클론코딩 (프론트3+백3 협업)	D반 - 클론코딩, 발표 JS 스터디
항해99 47일차	2022. 6. 24.(금)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(5명),  기획 회의, 디자이너 합류 JS 스터디
항해99 48일차	2022. 6. 25.(토)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - API 설계 회의 JS 스터디
항해99 49일차	2022. 6. 26.(일)	Weekly I Learned 작성, 산책, 과제

이번 주차를 진행하며 내가 가장 신경 쓴 부분/기술에 대한 정리

클론코딩(Airbnb) 회고

Airbnb로 결정된 클론코딩.

 

🦄 가장 신경 쓴 부분

협업. 프론트엔드가 3명이어서, 프론트엔드끼리의 협업이 쉽진 않았다.  말이 통하지 않았던 게 아니라, 미리 고려했어야 하는 부분들을 (서로 협업 경험이 적으니까) 몰라서 충돌이 일어났다. 그러나 해결책은 있었고, 우린 결과물을 만들어냈다. 앞으로 다른 개발자들과 함께 일할 때 주의할 점을 배운 것 같아, 이번에 겪은 경험은 가치가 있다는 생각이다. 

 

😳 트러블 슈팅

1. CSS 충돌: => h1, p 등의 태그를 초기화해서 쓰는 팀원이 있었다, 그것을 'reset.css'로 저장했는데, import한 페이지에만 적용되는 게 아니라 전역으로 적용이 되어서, 내가 코드를 짠 페이지의 스타일이 틀어지는 상황이 발생했다.

=> 해결 방안으로 css파일이 아닌 컴포넌트파일로 만들어서 필요한 파일에만 적용했는데, 기술매니저님이 가급적 전역으로 적용되게 초기화해서 사용하는 건 지양하고, 사용하는 경우 사전에 협의를 반드시해야 한다고 강조했다. 

 

2. npm vs yarn : 패키지  관리자 툴 충돌

npm쓰는 사람, yarn 쓰는 사람이 섞여 있었다. 여기서 발생하는 문제가 있었는데, yarn.lock 파일 충돌, yarn 툴에 필요없는 package-lock.json 등의 파일 생성 등이었다. 

=> 해결 방법은 yarn.lock 파일 merge 하지 않기였으나, 용량이 커지는 등의 문제가 있어서 이 부분은 통일시키는 게 좋겠다는 생각을 많이 했다. 

 

------------------------------------------------------------

👍 새로 도전한 기술

react-daum-postcode (숙소 등록 페이지의 주소 찾기) 

카카오Maps API(숙소 전체 페이지 및 상세페이지 지도)

: 워낙 설명이 잘 되어 있다! ,  https://apis.map.kakao.com/web/sample/

: 받은 주소로 지도에 마커 찍고 마커 모양 바꾸기까지 성공함. 

react-datepicker(상세페이지 달력 생성)

: 다음달 날짜로 고정시키기까지.

: 달력 기본 CSS를 바꾸는 게 쉽지는 않음

------------------------------------------------------------

 

해결하지 못한 문제(시간없어서 해결하지 못했다는 핑계를 대본다)

:edit 페이지에서 상세페이지의 정보를 받아와 인풋값안에 초기값으로 넣어주려 했지만 실패ㅜ

:search 페이지에서 회원가입/로그인 모달 창이 지도와 사진 뒤로 보이는 문제…ㅜ

:detail 페이지에서 움직이는 창(일부 구간에서만) 구현하지 못함. ㅜ

---

<<결과물>>

영상 링크: https://youtu.be/-UsameyX4Ls

메인페이지

숙소 전체 페이지

디테일 페이지 1

디테일 페이지 2

디테일 페이지 3