loplat X 썸네일형 리스트형 safari inset, intersection observer 크로스 브라우징하기 프로젝트: loplat X mobile 키워드: 크로스 브라우징, inset, intersection observer 상황 1 Modal을 구현할 때, 회색 배경을 position: fixed; inset: 0; 으로 구현했다. 아이폰 8(12.0.1)과 맥북 사파리 13으로 접속해보니 Modal이 전혀 보이지 않는 현상이 발생했다. 해결과정 Modal 컴포넌트는 createPortal을 이용하여 'portal' div를 부모로 삼아 렌더링한다. return ReactDOM.createPortal( {children}, document.getElementById('portal') as HTMLElement ); 사파리 개발자도구를 통해 확인해보니, portal DOM 의 children 내용은 잘 채워져.. 더보기 useSetRecoilState로 렌더링 최적화하기 프로젝트: loplat X mobile 키워드: recoil, 렌더링 최적화 상황 loplat X mobile 은 CRA 에 기반하여 CSR 방식을 사용한다. 로그인이 필요한 '캠페인 목록 페이지'에서 로그아웃 버튼을 누르면, protected router HOC에 의해 자동으로 로그인 페이지로 이동한다. 로그아웃을 시키는 것 외에 side effects 가 발생하면 안되는 상황이지만, 로그인 페이지로 이동하기 전 캠페인 목록 페이지에서 '캠페인 목록 GET API'가 의도치않게 한 번 호출되는 버그가 있다며 팀원분이 도움을 요청하셨다. 해결과정 먼저 API를 어떤 코드에서 호출하는지 살펴보았다. const { ... data: ExampleData, ... } = useInfiniteQuery( ['c.. 더보기 이전 1 다음
