코딩/NextJS5 NextJS 공식문서 Chapter 4 관련 용어 및 정리 Nested routingNext.js에서 파일 시스템 라우팅(file-system routing)은 디렉토리 구조를 기반으로 라우트를 자동으로 생성하는 방식입니다. 즉 프로젝트의 파일과 폴더 구조에 따라 웹사이트의 url이 결정되는 것 입니다. 빌드와 서버에서의 처리:빌드 시: Next.js는 pages 디렉토리 구조를 바탕으로 각 파일에 대해 라우팅 규칙을 생성합니다. 서버에서의 요청 처리: 사용자가 특정 URL에 접속하면, Next.js는 이 URL에 매핑된 페이지를 찾아 렌더링합니다. 이 과정에서 정적 파일로 처리할지, 동적 파일로 처리할지 결정됩니다.dashboard 페이지 url layout.tsx 설정아래 코드를 통해 dashboard/~ 한하여 사이드바가 뜨도록 설정할 수 있습니다. imp.. 2024. 8. 14. NextJS 공식문서 Chapter 3 관련 용어 및 정리 Why optimize fonts?(글꼴 최적화)웹사이트 디자인에서 폰트의 중요성폰트는 웹사이트의 가독성을 높이고, 브랜드 아이덴티티를 강화할 수 있습니다.성능에 대한 영향 폰트 파일을 로드하는 데 시간이 걸리면 페이지 로딩 속도가 느려질 수 있습니다.누적 레이아웃 이동(Cumulative Layout Shift, CLS): 폰트가 로드되기 전까지 브라우저가 텍스트를 시스템 폰트나 폴백 폰트로 렌더링하고, 이후 커스텀 폰트로 교체될 때 레이아웃 이동이 발생할 수 있습니다. 이 이동은 사용자 경험을 저하시킬 수 있으며, 특히 구글이 페이지 성능을 평가할 때 중요한 지표로 사용됩니다.Next.js에서의 폰트 최적화Next.js는 next/font 모듈을 사용하여 폰트를 자동으로 최적화합니다. 폰트 파일을 빌.. 2024. 8. 14. 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. 이전 1 2 다음
