Next 13 공식문서 읽기 (3)

라우팅 기본 모든 애플리케이션의 뼈대는 라우팅이다. 라우팅의 기본 개념과 Next.js에서 라우팅 처리하는 방법에 대해서 소개한다. 용어 트리 (Tree) : 계층 구조를 시각화하기 위한 규칙. 부모 및 자식 구성 요소가 있는 구성 요소 트리 폴더 구조 하위 트리 : 트리의 일부, 새 루트(first)에서 시작하여 Leaves(last)에서 끝난다. 루트 : 트리 또는 하위트리 (예: 루트 레이아웃)의 첫 번째 노드 Leaf : URL 경로의 마지막 세그먼트와 같이 하위 트리에 자식이 없는 노드 URL 세그먼트 : 슬래시로 구분된 URL 경로의 일부 URL 경로 : 도메인 다음에 오는 URL의 일부 ( 세그먼트로 구성된다.) App Router Next.js v13은 React Server Compone..

• format_list_bulleted FrontEnd/NEXT
• · 2023. 11. 7.
• textsms

Next 13 공식문서 읽기 (2)

Next.js 프로젝트 구조 최상위 파일 및 폴더, 구성파일 및 라우팅 규칙에 대한 내용을 설명한다. 최상위 폴더 app : 앱라우터 pages : 페이지 라우터 public : 서비스의 정적 자산(데이터) src : 애플리케이션 원본 폴더 (선택사항 ) 최상위 파일 next.config.js : Next.js에 대한 구성 파일 package.json : 프로젝트 종속성 및 스크립트 instrumentation.ts : OpenTelementry / instrumentation file (이 부분에 대한 개념은 아직... 애플리케이션의 모니터링을 위한 것 같다.) middleware.ts : Next.js 요청 미들웨어 .env : 환경변수 .env.local : 로컬 환경변수 .env.productio..

• format_list_bulleted FrontEnd/NEXT
• · 2023. 11. 5.
• textsms

Next 13 공식문서 읽기 (1)

NextJS 공식문서 읽기 https://nextjs.org/docs Next.js란? 풀스택 웹 애플리케이션을 구축하기 위한 리액트 프레임워크이다. React 컴포넌트를 사용하여 UI를 구축하고 Next.js를 사용하여 추가적인 기능과 최적화 작업을 수행한다. Next.js에서 번들링, 컴파일 등 React에 필요한 툴링을 추상화하여 자동으로 구성한다. 이를 통해 설정에 시간을 할애하는 대신 애플리케이션 구축을 하는데에 집중할 수 있다. Next.js의 주요 특징 1. 라우팅 레이아웃, 중첩라우팅, 로딩, 에러 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터 2. 렌더링 클라이언트 및 서버 컴포넌트를 사용한 클라이언트 및 서버 측 렌더링 Next.js를 사용하는 서버에서 정적 및..

• format_list_bulleted FrontEnd/NEXT
• · 2023. 11. 3.
• textsms