The Ledger

최근 게시글

07_01 Next.js 소개 및 환경설정

8 min read

하위 태스크 1

Next.js 프로젝트 생성

create-next-app으로 TypeScript 기반 프로젝트 생성

$ npx create-next-app@latest my-nextjs-app
 
✔ Would you like to use the recommended Next.js defaults? › No, customize settings
✔ Would you like to use TypeScript? … No / Yes
✔ Which linter would you like to use? › ESLint
✔ Would you like to use React Compiler? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

하위 태스크 2

개발 서버 실행

npm run dev로 개발 서버 시작 및 접속 확인

cd my-nextjs-app
npm run dev

Tailwind 스타일 미적용 문제

개발 서버를 기동하고 메인 페이지를 확인하면, 스타일이 적용되지 않은 모습을 볼 수 있다.

Tailwind v4 not working (create-next-app@latest) on arch linux 이슈의 답변에 따라 git init과 rm -r ./.next/를 실행해 문제를 해결했다.

하위 태스크 3

프로젝트 구조 분석

디렉토리와 파일의 역할 파악 및 문서화

  • eslint.config.mjs: ESLint 구성 파일
  • next-env.d.ts: Next.js 모듈에 관한 타입 정의 파일
  • next.config.ts: Next.js 구성 파일
  • node_modules: 의존성 패키지 저장 디렉터리
  • package-lock.json: 고정된 프로젝트 메타데이터
  • package.json: 프로젝트 메타데이터
  • postcss.config.mjs: PostCSS 구성 파일
  • public: 정적 자원 저장 디렉터리
  • README.md: 프로젝트 설명서
  • src: 소스 코드 저장 디렉터리
  • tsconfig.json: TypeScript 컴파일러 구성 파일

하위 태스크 4 ~ 5

기본 페이지 수정

index.tsx 파일 수정하여 컴포넌트 작성 패턴 이해

핫 리로딩 체험

파일 수정 시 자동 새로고침 확인

src/pages/index.tsx:

// ...
 
export default function Home() {
  // ...
        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
            Next.JS 학습 시작
          </h1>
          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
            안녕하세요. 저는 {" "}
            <span className="font-medium text-zinc-950 dark:text-zinc-50">김인화</span>
            입니다. 
          </p>
          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
            오늘은 <span className="font-medium text-zinc-950 dark:text-zinc-50">2025-03-16</span>입니다.
          </p>
        </div>
 // ... 
}

하위 태스크 6

TypeScript 설정 확인

tsconfig.json 파일 분석 및 타입 안전성 확인

  • strict 옵션이 활성화되어 타입 검사 수준을 강화했다.
  • target 옵션은 ES2017로 지정되어 ES2017 문법을 따르게 트랜스파일 한다.
  • lib옵션은 dom, dom.iterable, esnext가 지정되어 웹브라우저 실행 환경을 고려해 표준 라이브러리를 열거했음을 알 수 있다.
  • jsx 옵션은 react-jsx로 설정되어 JSX 및 TSX 파일에 대한 타입 검사를 활성화한다.
  • paths 옵션이 지정되어 @/*을 별칭으로한 Import Path를 사용할 수 있다.

하위 태스크 7

프로젝트 구조 문서화

각 디렉토리와 파일의 역할을 정리한 문서 작성

하위 태스크 3에서 설명하지 않은 파일과 디렉터리를 정리한다.

  • src/styles/globals.css: 전역 스타일시트로 TailwinCSS 초기화 코드가 기본적으로 작성되어 있다.
  • src/pages: 디렉터리 구조 기반 라우팅을 위해 설계된 디렉터리로, Next.JS의 네이밍 컨벤션에 맞게 파일명과 디렉터리명을 지으면 URL과 파일이 존재하는 경로를 일치시켜 라우팅한다.
  • src/api: 엔드포인트 생성을 위한 디렉터리로, REST API 구현을 위해 사용한다.

하위 태스크 8

React vs Next.js 비교

두 프레임워크의 차이점과 Next.js의 장점 정리

React는 라이브러리, Next.js는 React를 기반으로한 프레임워크라는 차이점이 있다. React는 재사용 가능한 UI 모듈을 만드는데 목적이 있으며, 이를 위해 컴포넌트와 훅과 같은 모듈을 제공한다. 라우팅이나 REST API를 함께 관리하는 기능을 제공하지 않는다. Next.JS는 React를 내장하고 라우팅, REST API 엔드포인트를 생성하기 위한 기능과 각종 최적화를 위한 모듈을 제공하는 통합 프레임워크다. Next.JS를 사용하면 JavaScript라는 단일 언어 생태계에서 풀스택 웹 애플리케이션을 제작할 수 있다.

하위 태스크 9

렌더링 방식 이해

SSR, SSG, CSR의 차이점과 사용 시나리오 정리

  • SSR(server-side rendering)은 서버에서 HTML 문서를 동적으로 생성해서 클라이언트로 응답하는 방식이다. 초기 HTML이 완성된 상태이므로 사용자가 최초로 화면을 보는 시점이 빠르다. JavaScript 코드의 양이 CSR 방식보다 적어 클라이언트에서의 자원 소모가 비교적 적다. 하지만 서버 사양에 따라 지연이 발생할 수 있다. 빠른 초기 렌더링을 보장하고 싶은 경우 선택할 수 있다.
  • SSG(static site generation): 미리 빌드한 정적 HTML 문서를 클라이언트로 응답한다. 정적 문서이므로 서버는 정적 HTML을 클라이언트에게 제공하고, 클라이언트는 HTML을 렌더링하면 되므로 연산 부담이 적다. 하지만 내용을 쉽게 변경할 수 없어 자주 변경되는 동적 컨텐츠를 포함하는 경우에 부적합하다.
  • CSR(client-side rendering): 클라이언트에서 DOM API를 조작해 웹 요소를 동적 생성하는 방식이다. 서버는 내용이 비어있는 HTML과 웹 요소를 동적 생성하기 위한 JavaScript 파일 (또는 번들)을 제공한다. 최초 렌더링 이후 내용 변경이 필요한 경우, AJAX를 사용해서 내용을 동적 변경하기 때문에 페이지 새로고침이 없다. 이는 부드러운 사용자 경험을 가능케 한다. 하지만 JavaScript를 사용하므로 클라이언트 기기의 자원 소모가 높고 SEO 최적화가 까다롭다.

그래프 뷰