[React/Typescript] airbnb clone

skawnkk·2021년 6월 6일
2

개발후기집📚

목록 보기
5/12
post-thumbnail

한동안 페어프로그래밍만 진행해오다 오랜만에 개인 프로젝트를 진행했다.

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점 올랐다.^^최악☠)
    그 외 불필요한 자바스크립트코드나 사진을 삭제하라고 하는데 정확한 경로를 파악하지 못해 가장 큰 더미들을 치우지 못했다. 구글링으로 꼭 해결하자!

    특히, 금요일 데모때....엄~청나게 느린 속도때문에 로딩화면을 몇초나 봤는지 모른다...이럴줄 알았으면 로딩화면이라도 이쁘게 만드는건데 ^^;; 크롱은 와이파이가 문제라고 했지만..글쎄 왜 유독 나만?! 최적화 터득해야겠다는 더 굳은 결심을...

다음미션 목표

  1. 비동기요청을 selector로 구현
  2. loading처리를 suspense를 통해 구현 또는 loadable ?
  3. typescript 제대로 공부하고 적용하기
    (제네릭 적용 & any는 정말 최최최최후의 수단)
  4. npm에 커스텀 컴포넌트를 등록한다.
  5. 최적화 함수를 적재적소에 적용한다.
  6. PR은 최소 3회, 최종 1회 날린다.

오랜만의 개인프로젝트 어땟나?

마지막으로 혼자하며 느낀 점들을 간략히 얘기하자면,
오랜만이라 그런가.... 좋았다 :) 처음엔.

장점으로는, 내 컨디션에 따라 스케쥴을 조정할 수 있어서 자유롭고 좋았다!
또 미션구현 전에 충분히 생각하고, 코드작성하는 양이 많아지는 것과 동시에 더 좋은 코드를 작성하기 위한 고민 생각하는 시간이 늘어난게 좋았다.
그리고 미션구현이 목표가 아닌 내 공부목표를 세우고 실천할 수 있었다.
(물론 페어를 하면서도 충분한 생각과 개인목표가 있어야 하는데 페어로할땐 파트너에 맞추는 경우가 많거나, 공동의 미션이다보니 미션구현이 1순위라고 생각한 경우가 많았다.)

그런데 아쉬운점으론 3주라는 긴 기간동안 스케쥴에 제약이 없으니 밤과 낮이 점점 바뀌었다. 늦잠자고 집중력이 흐려지는 날이 종종 생겼었다. 스케쥴관리실패(?)
또한 코드를 구현하며 뭔가 잘못된 강을 건넌 부분이 있었는데,,,, 페어 프로그래밍으로 했다면 누구 한 명은 말리지않았을까....?
삽질의 시간을 좀 더 단축할 수 있었을 텐데 하는 생각이 든다.🥴

고통스러운 삽질을 겪고나서 지난 페어프로그래밍때보다 더 게더에 많이 들어가서 다른 동기들한테 질문과 소통도 많이 한 3주였던 것 같다.

이제 마지막 미션 하나 남았다. 혼자도 좋지만 그래도 언제 또 코쿼사람들과 지금처럼 제대로 페어를 할 수 있을까하는 생각에 마지막 미션을 페어로 진행한다. 혼자하면서 느꼇던 장점과, 단점을 커버해서 마지막 미션을 잘 마무리 해야겠다는 다짐을 합니당...!

profile
Dev FE 기록, 행동, 회고 유후~ 💜

0개의 댓글