POB_TIL 0515 : 첫 기업과제 후기

이지훈·2022년 5월 15일
0

프리온보딩_TIL

목록 보기
9/22
post-thumbnail

영화 검색 어플리케이션

첫 기업과제는 영화 검색 어플리케이션이었다. 중간중간 정리하려고했는데 결국 미루다 이제야 한다.

최종적으로 기능은 어찌어찌 만들었는데 배포할 때 서버문제인지 설정문제인지 strict-origin-when-cross-origin 문제가 생겨 배포는 실패했다.

깃헙 레포

구현 기능

메인 화면, 검색 페이지, 즐겨찾기 페이지, 즐겨찾기 추가 모달 이렇게 크게 네가지를 구현했다.

검색 페이지즐겨찾기 추가즐겨찾기 페이지

어려웠던 점

Intersection Observer

여기서 가장 애먹은 점은 검색페이지의 무한스크롤이다. 가장 끝 컨텐츠가 화면에 표시되면 다음 페이지를 로드하는 동작이었는데 Intersection Observer를 써서 구현했다.
나타난 문제는

  1. intersectionObserver에 등록한 콜백이 여러번 실행됨
    이 문제를 해결하기 위해 콜백으로 실행하지않고 entry.isIntersecting을 사용해 useEffect로 isIntersecting이 true가 되었을 때 원하는 로직을 실행하도록 변경했다

  2. isIntersecting가 true가 되는 순간 api가 여러번 호출됨
    이는 중복 isLoading이라는 state를 추가하여 요청을 보낸 순간 true로 바꿔주고 isLoading이 true인 동안은 요청을 보내지 않도록 했다.

  3. 함수 무한 호출
    api를 통해 데이터를 가져오는 함수를 useEffect의 dependency 안에 넣었는데 이게 자체적변하며 무한 실행이 된 것 같다. eslint의 에러메시지에 따라 사용되는 모든 관련 state들을 dependency에 담았는데 문제는 내가 이 모든걸 관리하며 정상적으로 동작하는 함수를 만들지 못했다는거다.
    결국 eslint의 규칙을 무시하도록 설정하고 임의로 dependency를 넣어서 돌아가도록 만들었다.

drag event

react에서 제공하는 drag 이벤트핸들러들이 있는데 이번에는
onDragStart, onDragOver, onDragLeave, onDrop, onDragEnd를 사용했다.

onDragStart, onDrop은 드래그 기본 동작을 실행하기 위해 사용했고 이 드래그중인 컴포넌트를 스타일로 표현해주기 위해 다른 이벤트핸들러를 사용했다.

isDragOver 라는 state를 만들어 이 값이 true면 특정 className을 달아주어서 스타일을 지정해줬다.

그런데 문제는 이 isDragOver를 false로 바꿔주는 부분이었는데 onDragLeave에서 해주니 좀 애매했다. 자식 요소들 위를 지나갈 때는 leave가 되기도 하면서 깜빡이는 현상이 있었다. 자식요소들에게 pointer-events: none;을 부여해서 해결했다.

그리고 마지막에 드래그하여 머물던 컴포넌트의 경우는 onDragLeave가 실행되지 않았다. 그래서 onDragEnd로 마지막엔 모두 isDragOver값을 false로 바꿔주었다

아쉬웠던 점

요청의 응답에 대해 좀 더 정밀한 에러핸들링을 해주지 못한 것이 아쉽다. 그리고 UI 스타일도 좀 더 디테일에 신경쓰고 예쁘게 만들 수 있었을텐데 다른 곳에 시간을 많이 써서 퀄리티가 좀 떨어진 점이 아쉽다.

profile
안녕하세요! 대학교 졸업한 이지훈입니다.

0개의 댓글