본문 바로가기

Programing371

App Router란 무엇인가? App Router란?Next.js가 페이지 라우팅을 하는 방법.Next.js 13버전 부터 기존의 Pages Router 방식에서 완전히 새로운 App Router 방식이 도입됨.프로젝트 내부 app 폴더 내에서 새 디렉토리를 만들면 그것이 url 세그먼트가 됨.App Router에서는 공통 레이아웃, 중첩 라우팅, 에러 처리 방법 등을 제공함.만약 pages router와 app router를 한 프로젝트에서 혼용하는 경우 앱 라우터가 우선됨. 따라서 충돌이 발생할 수 있음.개발자가 page.tsx 파일에서 "use client"를 최상단에서 명시하지 않으면 기본적으로 리액트 서버 컴포넌트로 동작함.리액트만 배우고 온 경우에는 서버 컴포넌트 방식이 생소할 수 있어서 러닝 커브가 있을 수 있음.폴더와 .. Programing/Next.js 2024. 7. 5.
Next.js의 라우팅에서 사용되는 필수 용어 정리 Next.js에서 사용되는 라우팅 필수 용어Tree계층 구조를 시각화하기 위한 규칙.부모-자식 컴포넌트가 있는 컴포넌트 트리나 폴더 트리와 같이 사용된다.나무가 뿌리를 내리는 모습과 비슷하게 생겨서 Tree 구조라고 함.Subtreeapp 폴더를 제외하고 그 다음 디렉토리 부터... 트리의 일부분.root(첫 번째 시작점)에서 leaf(끝 지점), 즉 뿌리에서 잎까지 포함하는 개념임.이 Subtree 들이 모여서 하나의 Tree를 만듦.RootSubtree의 시작점.app 폴더 바로 다음 계층을 말함. 즉 첫번째 노드를 말함.그러나 개발자들이 특정 Subtree를 지목하지 않고 '루트 폴더'라고 말하면 프로젝트 폴더의 가장 바깥을 의미함.LeafURL path의 가장 마지막 노드임.더 이상 childre.. Programing/Next.js 2024. 7. 4.
Next.js 프로젝트의 파일 구조 app 폴더Next.js 프로젝트를 세팅하면 src/app 폴더가 생성된다.앱 라우팅을 담당한다.이곳의 폴더는 자동으로 라우팅 되며 URL path를 폴더명으로 갖게 된다.layout.tsx 파일과 page.tsx이곳에 layout.tsx 파일을 만들면 프로젝트의 모든 파일에 영향을 줄 수 있는 파일을 만들 수 있다.그리고 page.tsx는 src/app 폴더에 있는 파일은 자동으로 '/'라는 URL path를 갖게 된다. 즉 홈 페이지의 역할을 한다는 것이다.app 폴더는 '/' home이다.// app/layout.tsxexport default function RootLayout({ children,}: { children: React.ReactNode}) { return ( .. Programing/Next.js 2024. 7. 4.
Package.json 살펴보기 프로젝트를 세팅하고 나면 루트 폴더에 package.json 파일이 생성된다.React.js를 사용할 때는 이런 내용이 필요가 없었으나, CSR, SSR, SSG, ISR 등 렌더링 방식을 선택해서 사용할 수 있는 Next.js에서는 필요한 명령어들이 들어있다. { "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }} 본인이 편한 방식대로 yarn dev 등으로 사용할 수 있다. dev : 개발 모드. 웹 브라우저를 띄워 실시간으로 코드의 변경사항이 반영되며 보여준다.build : 프로덕션 레벨에서 배포하기 전에 우리가 작성한 코드를 서버에서 작동시킬 수.. Programing/Next.js 2024. 7. 4.
Next.js란? Next.js란?React.js와 같이 웹 애플리케이션 구축을 도와주는 도구이다. 그런데 차이가 있다면 리액트는 주도권이 개발자에게 있는 라이브러리이고, Next.js는 주도권이 프레임워크에 있는, Frame Work이다. 예를 들어 리액트에서는 라우팅을 설정할 때 별도의 라이브러리를 다운받아서 자유롭게 개발자가 세팅을 해줬지만,Next.js는 프레임워크가 준비한 방식대로, app 폴더 내에서 폴더 방식의 라우팅을 해주어야 한다. 웬만한 부분은 프레임워크가 기본으로 제공해주고 있기 때문에 하나의 프로젝트를 세팅하는 데 있어서 필요한 여러가지 사항을 프레임워크가 제공해주고 있어서 이런 시간을 아끼고, 애플리케이션의 기능적인 부분을 개발하는 데에 더 집중할 수 있도록 도와준다.주요 특징Routing : 레이.. Programing/Next.js 2024. 7. 4.

티스토리툴바