한동안 페어프로그래밍만 진행해오다 오랜만에 개인 프로젝트를 진행했다.
airbnb 클론
소개
깃헙링크: team15: 에어비앤비 클론
개발기간: 3주 (21/05/17-21-/06/04
주요미션내용
- 리액트/타입스크립트 적용
- 라우팅, 요금슬라이드, 달력 캐러셀 구현
- 로그인
- 지도 api 사용
PR 로그
개인목표 및 회고:
개인목표
1. 공통된 동작은 customHook을 구현하여 적용한다.
2. 타입스크립트를 적용한다.
3. recoil을 익히고 적용한다.
4. 최적화 방법을 안다.
목표달성 회고
새로배운것: 리코일, 타입스크립트, 라우터 파라미터
-
기능구현
전반적으로 80퍼센트는 달성한 것 같다.
열심히 잘했다고 생각한다. 근데 디테일한 부분에서는 기능 구현을 완벽하지 못한 곳들이 많았다. 캐러셀의 날짜 선택이나 요금슬라이더의 슬라이드 범주 선택 등
조금 미흡한 부분이 남아있어서 이 두 가지는 추후에 다시 구현해보려고 한다. 추 후 블로그에서 관련글을 만날 수 있을것 .....또 이런 기능컴포넌트들은 라이브러리로도 많이 있던데, 범용성 있게 만들어서 npm에 배포해보고 싶다. 아직 한번도 해보지 않았기 때문에 코쿼가 마무리 되기전엔 꼭 시도해볼 것이다.
-
커스텀 훅
- useModalClickCtrl : 검색바를 누르면 해당 모달창이 나오고, 모달창 외 영역을 누르면 모달창이 닫힌다. 검색버튼은 모달창 외 영역에서 제외되어야 하는 점 때문에 따로 분기처리를 하게 되었는데 미션 후반에 알게되어 범용성이 조금 떨어지는 아쉬움이 생겼다. 미리 분석을 철저히 해야겠다.
- useXclick
- useAxios : 콜백함수 형태를 인자로 넣어주게 했고, 처음 렌더링될때 무작정 api 요청을 보내는 것을 방지하기 위해 skip이라는 조건을 추가해주어 사용하였다. -
typescript
전체 파일을 타입스크립트로 적용하면서 첫째주는 타입을 지정하는것에 시간을 많이 뺐겼었다. 그리고 시간이 갈 수록 any를 남발하게 되는 불상사가...
any는 안정성면에서는 딸리지만 작업속도를 높여주는 ^ ^ 좋은....
그래도 안된다. any를 사용하지 않기 위해 이것저것 찾아보니 any를 잘쓰는 방법에 대한 블로그 글도 많았기에 꼭 공부하고 잘 사용하자. 3주 동안 제네릭을 제대로 터득하지 못한 것은 반성한다. -
리코일
새로운 것을 적용하는게 쉽지않았다. 공식문서와 친근해지자....!
recoil selector를 끝까지 회피하다 마지막 리팩토링 시 적용해보았는데 코드가 더 간결해지고 상태관리를 한 곳에 모아하게 되면서 이점을 느끼게 되었다. 다음 미션에 더 recoil의 고급 기능을 적용해보려 한다. -
최적화
기본적으로는
1. useEffect, useMemo를 잘사용하기!
2. 변경되는 상태가 있을 때 그와 무관한 컴포넌트는 분리하기
이 두가지를 실천했고, useCallback을 적용해보려했는데 잘되고있는건가 확인이 어려웠다. 좀더 공부가 필요하다.리팩토링을 하면서 최적화를 반영한 것이었는데 프로파일러의 점수개선이 별로 되지 않았다. (성능 점수 23점에서 26점인가? 3점 올랐다.^^최악☠)
그 외 불필요한 자바스크립트코드나 사진을 삭제하라고 하는데 정확한 경로를 파악하지 못해 가장 큰 더미들을 치우지 못했다. 구글링으로 꼭 해결하자!특히, 금요일 데모때....엄~청나게 느린 속도때문에 로딩화면을 몇초나 봤는지 모른다...이럴줄 알았으면 로딩화면이라도 이쁘게 만드는건데 ^^;; 크롱은 와이파이가 문제라고 했지만..글쎄 왜 유독 나만?! 최적화 터득해야겠다는 더 굳은 결심을...
다음미션 목표
- 비동기요청을 selector로 구현
- loading처리를 suspense를 통해 구현 또는 loadable ?
- typescript 제대로 공부하고 적용하기
(제네릭 적용 & any는 정말 최최최최후의 수단) - npm에 커스텀 컴포넌트를 등록한다.
- 최적화 함수를 적재적소에 적용한다.
- PR은 최소 3회, 최종 1회 날린다.
오랜만의 개인프로젝트 어땟나?
마지막으로 혼자하며 느낀 점들을 간략히 얘기하자면,
오랜만이라 그런가.... 좋았다 :) 처음엔.
장점으로는, 내 컨디션에 따라 스케쥴을 조정할 수 있어서 자유롭고 좋았다!
또 미션구현 전에 충분히 생각하고, 코드작성하는 양이 많아지는 것과 동시에 더 좋은 코드를 작성하기 위한 고민 생각하는 시간이 늘어난게 좋았다.
그리고 미션구현이 목표가 아닌 내 공부목표를 세우고 실천할 수 있었다.
(물론 페어를 하면서도 충분한 생각과 개인목표가 있어야 하는데 페어로할땐 파트너에 맞추는 경우가 많거나, 공동의 미션이다보니 미션구현이 1순위라고 생각한 경우가 많았다.)
그런데 아쉬운점으론 3주라는 긴 기간동안 스케쥴에 제약이 없으니 밤과 낮이 점점 바뀌었다. 늦잠자고 집중력이 흐려지는 날이 종종 생겼었다. 스케쥴관리실패(?)
또한 코드를 구현하며 뭔가 잘못된 강을 건넌 부분이 있었는데,,,, 페어 프로그래밍으로 했다면 누구 한 명은 말리지않았을까....?
삽질의 시간을 좀 더 단축할 수 있었을 텐데 하는 생각이 든다.🥴
고통스러운 삽질을 겪고나서 지난 페어프로그래밍때보다 더 게더에 많이 들어가서 다른 동기들한테 질문과 소통도 많이 한 3주였던 것 같다.
이제 마지막 미션 하나 남았다. 혼자도 좋지만 그래도 언제 또 코쿼사람들과 지금처럼 제대로 페어를 할 수 있을까하는 생각에 마지막 미션을 페어로 진행한다. 혼자하면서 느꼇던 장점과, 단점을 커버해서 마지막 미션을 잘 마무리 해야겠다는 다짐을 합니당...!
