[Devlog] Netflix clone coding : 문제와 해결법

Kyle Lee·2022년 3월 18일
0

Devlog

목록 보기
1/1
post-thumbnail

TBU

  • 가능하면 추후에 해당 문제 버전별로 gif 추가하기

01. Framer-motion

문제 01 :
연속된 Slider 컴포넌트가 리렌더 되면서 엉뚱하게 Modal의 option 속성 또한 마지막 것으로 교체되어 버렸다. 그래서 matchedMovie와 layoutId까지 덩달아 매칭되지 않아 애니메이션이 깨지는 문제가 발생했다.

해결 :
의외로 해결법은 과제목표와 맞닿아 있었다.
'URI를 좀 더 예쁘게 만들기'라는 챌린지 목표는 RESTful 한 URI를 디자인 하라는 뜻으로, useRouteMatch와 useHistory를 통해 정확한 URI로 매칭해줌에 따라 LayoutId가 통일 되었다.


문제 02 :
캐러셀 방향 전환을 위한 setIsBack이 각 ContentRow 캐러셀마다 따로 설정되어서 제각기 다른 방향으로 움직이는 문제가 발생했다.

해결 :
이전에 custom 설정값이 계속 남아 있음을 확인해서 검색을 통해
AnimatePresence의 공식 문서를 참조하여 AnimatePresence 태그의 attr으로 custom을 설정해주면 동일한 커스텀을 부여할 수 있었다.


문제 03 :
모달창을 들어가고 나갈때 framer-motion에서 이미지가 늘어지는 현상이 발생하였다.

해결 :
실제 이미지와 모달창 간의 확장 인터렉션을 Shade 컴포넌트를 따로 만들어서 해결하였다.

02. body-scroll-lock

문제 :
모달창 스크롤 문제 - 모달창과 뒤 배경의 홈화면까지 동시에 스크롤이 되는 문제를 해결하기 위해서 다양한 방법을 모색해보았다. 하지만 완전히 넷플릭스와 똑같이 overflow-hidden을 통한 모달창의 스크롤은 실패하였.

해결 :
그냥 일단 npm 모듈인 'body-scroll-lock'를 사용하고 모달 창 내에서 스크롤하는 형식으로 제한해서 해결하였다. 하지면 여전히 넷플릭스와 완전 동일한 방식은 아니기 때문에 추후에 해결해야한다.

03. stoppropagation

문제 :
검색창 외부를 어디든 클릭해서 다시 검색창이 닫히는 애니메이션을 호출해야하지만, 검색창을 오픈하는 인터렉션의 로직에서 단순히 검색 input 창 외부를 클릭해도 클릭 이벤트가 자식인 input 창까지 전파되어서 toggle이 엉키는 문제가 발생하였다.

해결 :
다행히도 최근 모던 자바스크립트 딥다이브를 읽으면서 이벤트 버블링과 캡처링
stoppropagation을 통해 클릭 이벤트 전파 막아서 쉽게 해결하였다.

04. Media query in React

문제 :
화면의 넓이에 따라 캐러셀에서 보여주는 grid-template-row의 개수를 변경하기 위해 CSS의 미디어 쿼리 기능을 활용하였다. 하지만 이는 화면을 새로고침해야만 새로운 offset이 적용되어 실시간 변동이 되지 않았다.

해결 :
이를 실시간의 변동하기 위해서 리액트의 useEffect에서 window의 resize 이벤트 리스너 활용하여 문제를 해결하였다. 또한 항상 이벤트리스너를 useEffect 안에서 return해주어서 메모리 누수를 막도록 하는 습관을 들여야한다.

05. Github Pages

문제 :
깃헙 페이지는 url 상의 html 파일이 없는 리액트나 앵귤러 같은 spa 사이트는 rest 방식으로 구성할 시, reload나 refresh를 하면 404 에러가 발생한다.

해결 :
그래서 locationchange(uri) event listener를 붙여서 새롭게 검색 키워드를 추출해서 fetch 하는 방식으로 변경하고자 했으나, 단순히 useEffect의 dependency array에 useLoaction 객체를 넣어주고 setState만 하여도 해결되는 문제였다.

06. background-image

문제 :
useHistory를 통해 영화탭과 tv탭을 왔다 갔다 하면(pushState로 인한 화면 변동 시) background-image: url(url) 코드가 제대로 동작하질 않고 이미지가 날아가거나 z-index가 뒤섞이는 듯한 현상을 보였다.

해결 :
이를 위해 그냥 새롭게 컴포넌트를 만들어 이미지 태그를 넣어 해결하였다. 하지만 정확한 문제 원인은 아직 명확히 파악하지 못하였으므로 추가적인 조사를 해봐야겠다.
-- css 설정이기 때문에 background image를 다시 로드하기 위해서는cssom과 dom 트리를 합치는 과정이 다시 일어나야 할 것이다. 그렇기 때문에 css 규칙이 새롭게 적용되는 이벤트를 일으켜야 이미지가 로드 될 것이다. -> 리액트는 그정도 깊이의 reflow를 일으키지 않아서 그럴 것이다??

profile
필요에 의한 개발

0개의 댓글