Chrome, React, TypeScript, Framer-motion 왼쪽이 크롬이고 오른쪽이 사파리이다. 둘은 같은 코드이다. gif라서 프레임 드랍이 있는걸 감안하더라도 오른쪽 사파리에서는 사각형이 scale이 커지면서 한바퀴 완전하게 돌아가는 애니메이션인 반면, 크롬에서는 뭔가 감칠맛나게 살짝 또잉 튕기기만 할뿐 scale과 rotate 애니메이션이 제대로 작동하지 않는 것을 볼 수 있다. gif의 첫번째 상자와 두번째 상자를 비교해서 보면, 첫번째 rotate뿐만 아니라 두번째 orchestration 애니메이션도 어딘가 엉성하다. orchestartion: 부모 요소와 자식 요소들의 애니메이션이 딜레이되며 자연스럽게 이어지는 variants 사파리에서는 위에서 아래로 약간의 튕기는 느낌까지 ..
개인 프로젝트를 진행 중에, 크롬과 사파리 간의 차이로 인해 발생한 이슈를 트러블슈팅한 내용을 기록한다.사용 스택: React, TypeScript, TailwindCSS, Framer-motion 발단데스크탑의 개발자 도구에서 본 모바일 화면과 실제 모바일 기기로 본 화면은 차이가 있어서, vercel로 중간 단계에 배포 후 실제 내 핸드폰(아이폰 13pro)으로 반응형이 잘 구현됐는지 살펴보려는데, 시작 화면부터 아래처럼 버튼 컴포넌트가 깜빡였다. 처음엔 인터넷 이슈인줄만 알았는데, 계속 그랬다. 뭔가 이상했다. 나는 윈도우 데스크탑과 맥북 랩탑에서는 브라우저로 크롬을 쓰지만, 모바일에서는 사파리를 쓴다. 컴퓨터를 켜고 맥북 사파리로 확인해도 똑같았다. 브라우저 차이로 인해 발생한 것이다. 그래서 사..
🚨 발생 문제 Unhandled Runtime Error Next.js에서 텍스트 에디터 라이브러리인 react-quill을 불러오는데 document is not defined라는 에러 메시지 발생 🤔 문제 원인 react-quill 라이브러리는 SSR을 지원하지 않음 Next.js는 기본적으로 서버 사이드에서 렌더링을 하는데, react-quill 라이브러리는 SSR을 지원하지 않고, 클라이언트에서만 동작 quill editor는 document 객체를 조작해 동작하므 document 객체가 로드 된 이후 quill 에디터를 import 하도록 해야 함 💊 해결 방법 Lazy Loading Next.js의 Lazy loading은 경로를 렌더링하는 데 필요한 JavaScript의 양을 줄여 애플리케..
🚨 발생 문제 Next.js: Failed to compile Failed to compile ./src\app\intro\page.tsx ReactServerComponentsError: You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials 🤔 문제 원인 useState를 사용하는 컴포넌트에 Client Compo..
🚨 발생 문제 TS17004: Cannot use JSX unless the '--jsx' flag is provided. TS6142: Module './App' was resolved to 'C:/Users/user/Desktop/jiwon/redux-for-beginners/src/App.tsx', but '--jsx' is not set. 문제 상황 예전에 만들어 둔 자바스크립트 React app을 아래 블로그를 참고하여 타입스크립트로 마이그레이션을 완료한 뒤, yarn start하여 리액트 앱을 실행했는데 위와 같은 에러 메시지 발생 마이그레이션 방법 참고 블로그 - How to Migrate a React App to TypeScript 🤔 문제 원인 tsconfig.json에서 jsx 설정을..
🚨 발생 문제 ERROR in ./node_modules/react-router-dom/dist/index.js 13:0-810 export 'AbortedDeferredError' (reexported as 'AbortedDeferredError') was not found in 'react-router' (possible exports: Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, ..
