💡 TIL 20230824 - import { useRouter } from “next/router”와 “next/navigation” 차이 next.js 13에서의 useRouter 훅 useRouter는 next/router에서만 불러와야 하는 줄 알았는데, 자꾸 import하려면 next/router와 next/navigation 두 가지가 떠서 궁금하기도 했고 오늘 위와 같은 에러를 마주해서 찾아보았다! 둘의 차이는 무엇? useRouter from next/route Page router으로 라우팅 시 사용 useRouter from next/navigation v13 이후 App router으로 라우팅 시 사용 Next.js 13 App router 이번에 진행 중인 프로젝트는 App rout..
🚨 발생 문제 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..
💡 TIL 20230819 - Tailwind CSS 장단점, 연습예제 1. Tailwind CSS란 Tailwind CSS는 utility-first 컨셉을 가진 CSS 프레임워크이다. 부트스트랩과 비슷하게 m-1(.m-1 {margin: 0.25rem}), flex(.flex {display: flex})와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다. tailwind는 제로 런타임으로 동작하며 빠르고, 유연하다. 1) 장점 프로그래밍 언어와 같은 추상화 수준을 제공해 스타일을 빠르게 적용할 수 있어 코드의 길이가 줄고, css 작업 시간이 절약된다. 컴포넌트 생성이 쉽고, 관리 및 유지보수가 편하다. 커스터마이징이 쉬워 원하는 대로 디자인을 바꾸..
