728x90
반응형
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(Loading UI)2024-02-11 14:34:33📌 Loading UI 1. React Suspense React Suspense 컴포넌트 활용. https://ko.legacy.reactjs.org/docs/react-api.html#reactsuspense // src/app/layout.tsx // (생략) import { Suspense } from "react"; // 추가 // (생략) export default function RootLayout({ children, }: Readonly) { return ( {/* Suspense 컴포넌트 적용 */} {/* fallback에는 텍스트, 아이콘, 애니메이션 컴포넌트 적용 가능 */} {/* 검색 엔진 봇이 보는 페이지는 빈 페이지가 아닌 로딩 컴포넌트가 렌더링 된 문서 */} {/* se..
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 1: Styling)2024-02-06 09:12:12섹션 1: Styling 📌 globals.css 모든 태그 및 컴포넌트에 공통 스타일 적용한다. globals.css 안에서 class는 CSS 라이브러리와의 충돌을 방지하기 위해 사용하지 않는 것이 좋다. @media (prefers-color-scheme: dark) {}에서 다크모드 스타일을 설정하면 된다. 📌 CSS Module CSS 파일을 모듈처럼 사용한다. 동일한 클래스 이름을 사용하더라도 다른 컴포넌트, 페이지의 스타일과 충돌(덮어쓰기) 하지 않는다. postCSS를 사용하여 클래스 렌더링 시 충돌하지 않도록 클래스 이름에 별도의 문자열을 추가하기 때문이다. 클래스를 제거하려면 컴포넌트에 정의한 내용과 해당 클래스가 정의된 파일도 함께 삭제해야 빌드시 번들에 포함되지 않는다. → 테일윈드..
728x90
반응형