Turbopack이란?Next.js 프로젝트를 시작하기 위해 npx create-next-app@latest를 실행하면 "터보팩을 사용하시겠습니까?"라는 질문을 받게 된다.처음에는 이것이 무엇인지 잘 몰랐지만, 알아보니 Turbopack은 JavaScript와 TypeScript에 최적화된 점진적 번들러였다. Turbopack은 Rust 언어로 작성되었으며 Next.js에 내장되어 있다.번들러란 웹 애플리케이션을 구성하는 여러 파일들(JavaScript, CSS, 이미지 등)을 브라우저에서 실행 가능한 최적화된 파일로 변환하는 도구다.(기존의 웹팩(Webpack)이 이러한 역할을 해왔지만, Turbopack은 성능에 중점을 두어 개발됨) Turbopack은 Pages 디렉토리와 App Router(App..

Next.js 라우팅 시 데이터 전달 방법 개요Next.js에서 페이지 간 이동 시 데이터를 전달하는 방법은 여러 가지가 있다.이전 글에서 Link 컴포넌트와 useRouter 훅을 사용한 페이지 이동 방법에 대해 알아보았다면, 이번에는 그 과정에서 데이터를 어떻게 전달할 수 있는지 알아보려고 한다.(보시지 못한 분들은 아래 글을 참고 바란다.) [Next.js] Next.js + TypeScript에서의 페이지 이동 방법 총정리Next.js에서의 페이지 이동 방법 개요Next.js에서 페이지 간 이동을 구현하는 방법은 크게 두 가지가 있다.Link 컴포넌트 사용하기useRouter 훅을 사용하여 프로그래매틱하게 라우팅하는 방법일반 Reactbbin-guuuu.tistory.com 페이지 간 데이터를 전..

Next.js와 TypeScript로 웹개발 공부를 하면서 정말 간단하게 로그인 기능을 구현하여 main페이지로 라우팅하는 부분을 연습해보았다.이번 글에서는 로그인 페이지부터 인증 후 메인 페이지로 넘어가는 과정까지, 전체 흐름을 코드와 함께 상세하게 설명하려고 한다.특히 각 기술과 개념에 대한 설명을 충분히 제공하여 나와 같이 웹 개발을 배우는 학생들이 이해하기 쉽도록 작성했다.프로젝트 구조 살펴보기Next.js 프로젝트의 구조를 보면 다음과 같다.├── app│ ├── globals.css # 전역 스타일│ ├── layout.tsx # 앱 레이아웃│ ├── page.tsx # 로그인 페이지 (/)│ └── main│ └── pag..

Next.js 라우팅의 기본 개념Next.js의 가장 큰 특징 중 하나는 파일 시스템 기반 라우팅(File-system based routing)이다.이 방식은 React의 SPA(Single Page Application)에서 흔히 사용되는 React Router와 같은 별도의 라우팅 라이브러리가 필요 없다는 큰 장점이 있다.Next.js는 프로젝트의 디렉토리 구조와 파일명을 기반으로 자동으로 라우팅을 구성한다. 파일 시스템 기반 라우팅이란 간단히 말해 폴더와 파일의 구조가 곧 웹 애플리케이션의 URL 경로(path)가 되는 방식이다.예를 들어, /pages/about.tsx 파일은 example.com/about URL로 접근할 수 있다.이렇게 직관적인 구조는 프로젝트의 구조를 이해하기 쉽게 만들고,..

개발 환경 준비하기Next.js와 TypeScript 프로젝트를 시작하기 전에 먼저 필요한 개발 환경을 준비해야 한다.가장 기본적으로 필요한 것은 Node.js와 패키지 매니저(npm, yarn, pnpm 중 하나)이다! 1. Node.js 설치Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치하면 된다.(Node.js를 설치하면 npm(Node Package Manager)도 함께 설치된다!) Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org2. 코드 에디터 준비필자는 VS Code를 주로 사용하고 있어서 TypeScript 관련 확장 ..