C2C Dev

use client;

서버 컴포넌트(Server Component)와 클라이언트 컴포넌트(Client Component)를 명확하게 구분

Next.js 13부터 도입된 App Router (app/ 디렉터리 기반)에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트(Server Component)로 동작

일반적으로 컴포넌트가 서버에서 렌더링되고,

클라이언트 측에서는 HTML과 필요한 데이터를 받아 화면에 표시

클라이언트에서 실행해야 하는 컴포넌트는 "use client"; 선언 필요

클라이언트 컴포넌트가 필요한 경우:

• useState, useEffect, useContext 등 React Hooks 사용 시
• window, document, localStorage 같은 브라우저 API 사용 시
• onClick, onChange 같은 이벤트 핸들링 시

성능 최적화를 위해 use client;를 남발하지 말자

Next.js란?

Vercel이 개발한 오픈 소스 React 프레임워크서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원

서버 사이드 렌더링: 페이지를 서버에서 미리 렌더링하여 초기 로딩 속도를 개선하고 SEO를 향상
정적 사이트 생성: 빌드 시에 HTML 파일을 생성하여 빠른 응답 속도를 제공
간편한 라우팅: 파일 기반 라우팅 시스템으로, 페이지 파일을 생성하는 것만으로도 자동으로 라우팅이 설정
API 라우트: 서버리스 함수로 API를 구현할 수 있어, 백엔드 없이도 간단한 API를 만들 수 있다.
이미지 최적화: 자동으로 이미지 파일을 최적화하여 성능을 개선

React와 다르게 Next.js는vite와 동시에 적용 불가능하다.

새로운 프로젝트 생성

pnpm 의존성 설치
$npm install -g pnpm

프로젝트 생성
$npx create-next-app@latest <프로젝트 명> --use-pnpm

실행 시키면 해당 선택 여부가 하나씩 뜰 것이며,

아래와 같다.

사용자가 원하는 대로 선택하면 됀다.

(타입스크립트 사용 여부)
√ Would you like to use TypeScript? ... No / Yes

(ESLint 사용 여부)
√ Would you like to use ESLint? ... No / Yes

(Tailwind 사용 여부)
√ Would you like to use Tailwind CSS? ... No / Yes

(src/ 디렉토리 여부 No 선택시 src대신 app폴더)
√ Would you like your code inside a `src/` directory? ... No / Yes

(앱 라우터 사용 여부)
√ Would you like to use App Router? (recommended) ... No / Yes

(Turbopack 사용 여부, No 선택 시 Webpack)
√ Would you like to use Turbopack for `next dev`? ... No / Yes

(파일경로 별칭 사용 No 선택 시 ../ Yes선택 시 @/ 그리고 그에 맞게 세팅 )
? Would you like to customize the import alias (`@/*` by default)? » No / Yes

개발 실행

pnpm i프로젝트 패키지를 설치
$pnpm i

개발 서버 시작
$pnpm dev