[웹 렌더링 방식 비교]

• SPA: 클라이언트 사이드 렌더링, SEO 적합도 낮음, 초기 속도 느림, 실시간성 높음

• CSR: 클라이언트 사이드 렌더링, SEO 적합도 낮음, 초기 속도 느림, 실시간성 높음

• SSR: 서버 사이드 렌더링, SEO 적합도 높음, 초기 속도 빠름, 실시간성 중간

• SSG: 빌드 타임 렌더링, SEO 적합도 높음, 초기 속도 매우 빠름, 실시간성 없음

• ISR: 빌드+백그라운드 사이드 렌더링, SEO 적합도 높음, 초기 속도 매우 빠름, 실시간성 중간

[Cursor AI 공식문서 탐색]

• Tab (AI 자동완성 및 다중 라인 편집)

• Chat (코드 기반 대화형 AI 어시스턴트)

• Inline Edit (인라인 코드 수정)

• Context (코드베이스 인식 및 커스터마이징)

[Next.js 프로젝트 셋팅 가이드 ver.2025]

1. Next.js 프로젝트 생성 및 기본 설정

create-next-app을 통해 프로젝트를 시작.

기본 생성 명령어

npx create-next-app@latest my-app

2. TypeScript 통합 방법

프로젝트 생성 시 --typescript 옵션을 선택.

수동 통합 방법

npm install --save-dev typescript @types/react @types/node

이후 프로젝트 루트에 .ts, .tsx 파일을 추가하면 Next.js가 자동으로 tsconfig.json을 생성.

3. ESLint & Prettier 설정

ESLint (Next.js 내장)

--eslint 플래그로 활성화하면 자동으로 .eslintrc.json이 설정됨.

.eslintrc.json에 Prettier 연동

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ]
}

4. Tailwind CSS 적용

자동 설치 (추천)

create-next-app 생성 시 --tailwind 옵션을 추가하면 자동 설정.

globals.css에 Tailwind 디렉티브 추가

@tailwind base;
@tailwind components;
@tailwind utilities;

5. shadcn/ui 컴포넌트 라이브러리

shadcn/ui는 Tailwind 기반의 UI 컴포넌트 라이브러리.

설치 방법

npx shadcn-ui@latest init

설치 시 선택 사항:

• App Router 사용 여부

• Tailwind config 경로

• 컴포넌트 디렉토리 위치 (components/ui)

• 사용하려는 theme (default, zinc, rose, 등)

[회고]

현재 회사에서 진행 중인 업무와 공통되는 부분이 많다. 기존 업무를 할 때는는 그냥 하던대로 진행하는 방식이었으나 학습을 진행하면서 왜 이 설정이 필요한지, 초기 세팅은 어떻게 해야하는지 짚고 넘어갈 수 있는 기회가 되었다. 무엇보다 Cursor에 대해서 관심이 있었는데 인강 수강하면서 Cursor에 대해 학습할 수 있어서 좋았다.