js33 NextJS 공식문서 Chapter 2 관련 용어 및 정리 Global styles 적용global.css 파일은 모든 페이지에 적용될 전역 스타일을 정의하는 CSS 파일입니다. layout.tsx에서 global.css 가져오기. /app/layout.tsx 파일을 열고, 최상단에 global.css를 가져오는 코드를 추가합니다.import '@/app/ui/global.css'; 를 적용하여 global.css에 정의된 모든 스타일이 애플리케이션 전반에 걸쳐 적용됩니다.Tailwind유틸리티-퍼스트(Utility-First) CSS 프레임워크Tailwind CSS는 개발자가 HTML 또는 TSX(React + TypeScript) 마크업 내에서 직접 유틸리티 클래스들을 사용하여 스타일을 지정할 수 있게 해줍니다. 장점글로벌 스타일링: Tailwind CSS에.. 2024. 8. 14. NextJS 공식문서 Chapter 1 관련 용어 및 정리 파일 설치1. pnpm 설치pnpm은 npm이나 yarn보다 빠르고 효율적인 패키지 매니저로, pnpm이 설치되어 있지 않다면, 다음 명령어를 통해 전역으로 설치할 수 있습니다.npm install -g pnpm2. Next.js 앱 생성Next.js 애플리케이션을 생성하려면 터미널을 열고 프로젝트를 저장할 폴더로 이동한 후, 다음 명령어를 실행합니다:npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm이 명령어는 create-next-app이라는 CLI 도구를 사용하여 Next.js 애플리케이션을 설정합니다.. 2024. 8. 12. React Suspense Suspense란?React의 내장 컴포넌트로, 비동기 작업 중에 대체 UI를 표시하는 데 사용된다. 주로 데이터 패칭과 같은 비동기 작업을 수행하는 컴포넌트를 감싸서 데이터가 로드되는 동안 사용자에게 로딩 상태를 보여줄 수 있다. 주요 기능:로딩 상태 관리: 비동기 작업이 완료될 때까지 대체 UI(fallback)를 보여줄 수 있다.비동기 컴포넌트 렌더링: 컴포넌트가 필요한 데이터를 모두 로드한 후에만 해당 컴포넌트를 렌더링한다Loading...}> {/* 데이터 로딩 중에 표시할 UI */} {/* 비동기 작업을 수행하는 컴포넌트 */} 2024. 7. 23. [Next.js] Hydration와 use client 하이드레이션(hydration)이란?서버에서 렌더링된 HTML을 클라이언트 측에서 React의 상태와 이벤트 핸들러와 결합하는 과정을 말하며, 이를 통해 페이지는 초기 로드 시 빠르게 표시되며, 이후 클라이언트 측에서 동적인 동작이 가능해진다. 동작 과정아래의 과정을 통해 서버에서 렌더링된 HTML을 빠르게 클라이언트에 표시하면서, 클라이언트에서 React 애플리케이션의 상호작용을 활성화할 수 있다. 서버 사이드 렌더링────────────────────────────────────────────────────────────────────────서버1. React 애플리케이션 렌더링 -> HTML 생성 -> HTML 전달───────────────────────────────────────────────.. 2024. 7. 22. 이전 1 2 3 4 5 6 ··· 9 다음
