본문 바로가기

분류 전체보기402

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.
피터팬 Hobby/Guitar 2024. 7. 4.
그 때 그 소나기처럼 Hobby/Guitar 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.

티스토리툴바