Next.js 프로젝트 시작하기

🤔 왜 Next.js인가?

웹 개발을 시작하려고 조사했습니다.

React가 가장 인기 있었습니다.

React vs Next.js

검색하다 보니 Next.js를 많이 추천하더군요.

Next.js의 장점:

• 파일 기반 라우팅 (설정 간단)
• SSG로 빠른 로딩
• SEO 기본 제공
• GitHub Pages 배포 쉬움

React로도 가능합니다:

• react-router-dom으로 라우팅
• react-helmet으로 SEO
• 설정하면 배포 가능

결정

솔직히 말하면, Next.js를 배워보고 싶었습니다.

요즘 많이 쓰이는 기술이고, 이력서 사이트 만들기에도 적합해 보였습니다.

일단 Next.js로 시작해보고, React도 따로 배워볼 생각입니다.

어차피 Next.js가 React 기반이니까 둘 다 경험해보면 좋을 것 같습니다.

---

📦 사전 준비

Node.js 확인

Next.js를 사용하려면 Node.js가 필요합니다.

터미널을 열고 확인했습니다.

node -v

v20.11.0

이미 설치되어 있었습니다.

npm -v

10.2.4

npm도 있었습니다.

Node.js가 없다면?

만약 command not found 에러가 나온다면:

설치 방법:

1. https://nodejs.org 접속
2. LTS 버전 다운로드 (추천)
3. 설치 후 터미널 재시작
4. node -v로 확인

왜 LTS 버전인가요?

• Long Term Support (장기 지원)
• 안정적
• 대부분의 프로젝트에서 사용

---

💻 프로젝트 생성

npx create-next-app 실행

공식 문서를 보고 따라했습니다.

npx create-next-app@latest

npx란?

• npm 패키지를 설치 없이 실행하는 명령어
• Node.js 설치 시 npm과 함께 자동으로 설치됩니다
• create-next-app을 다운로드하고 바로 실행합니다

npx가 없다면?

만약 command not found: npx 에러가 나온다면:

npm install -g npx

또는 Node.js를 최신 버전으로 업데이트하세요.
(npm 5.2.0 이상부터 npx가 포함됩니다)

설정 질문

명령어를 실행하니 질문들이 나왔습니다.

1. 프로젝트 이름

✔ What is your project named? › my-resume

my-resume라고 입력했습니다.

2. TypeScript 사용

✔ Would you like to use TypeScript? › Yes

Yes를 선택했습니다.

왜 TypeScript인가요?

• Kotlin처럼 타입 안전
• 컴파일 타임에 에러 발견
• IDE 자동완성 지원

3. ESLint 사용

✔ Would you like to use ESLint? › Yes

Yes를 선택했습니다.

ESLint란?

• 코드 스타일 검사 도구
• 잠재적 버그를 미리 발견합니다
• Android Lint와 비슷한 역할

4. Tailwind CSS 사용

✔ Would you like to use Tailwind CSS? › Yes

Yes를 선택했습니다.

Tailwind CSS란?

• 유틸리티 기반 CSS 프레임워크
• className="text-xl font-bold" 형식으로 스타일 적용
• 빠른 스타일링 가능

5. src 디렉토리 사용

✔ Would you like your code inside a `src/` directory? › Yes

Yes를 선택했습니다.

왜 src 디렉토리를 사용하나요?

• 코드와 설정 파일 분리
• 프로젝트 구조가 깔끔해짐
• Android의 app/src/ 구조와 비슷

6. App Router 사용

✔ Would you like to use App Router? (recommended) › Yes

Yes를 선택했습니다.

App Router란?

• Next.js 13부터 도입된 새로운 라우팅 방식
• 폴더 구조 = URL 경로
• app/about/page.tsx → /about
• 권장 방식

7. Import alias

✔ Would you like to customize the import alias? › No

No를 선택했습니다.

Import alias란?

• @/components/Button 형식으로 import
• 기본값(@/*)으로 충분합니다

설치 과정

Creating a new Next.js app in /Users/mozzmily/my-resume.

Using npm.

Installing dependencies:
- next
- react
- react-dom

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss

added 357 packages in 24s

Success! Created my-resume

프로젝트가 생성되었습니다!

---

🎉 첫 실행

프로젝트 폴더로 이동

cd my-resume

VS Code로 열기

code .

VS Code가 열렸습니다.

VS Code를 사용하는 이유:

• Next.js 개발에 가장 많이 사용되는 에디터
• 확장 프로그램이 풍부합니다
• TypeScript 지원이 우수합니다

VS Code가 없다면?

• https://code.visualstudio.com 에서 다운로드
• 또는 다른 에디터 사용 가능 (WebStorm, Sublime Text 등)

개발 서버 시작

npm run dev

터미널 출력:

  ▲ Next.js 15.1.0
  - Local:        http://localhost:3000

 ✓ Ready in 818ms

포트 3000이란?

• 개발 서버가 실행되는 포트 번호
• localhost:3000으로 브라우저에서 접속
• 다른 프로그램이 3000 포트를 사용 중이면 자동으로 3001 사용

브라우저로 확인

http://localhost:3000을 열었습니다.

화면이 떴습니다!

---

📂 프로젝트 구조

VS Code에서 파일들을 봤습니다.

my-resume/
├── src/
│   └── app/
│       ├── page.tsx
│       ├── layout.tsx
│       └── globals.css
├── public/
├── package.json
├── tsconfig.json
└── next.config.ts

주요 파일 설명

src/app/page.tsx

• 메인 화면
• Android의 @Composable 함수와 비슷

src/app/layout.tsx

• 공통 레이아웃
• 모든 페이지에 적용되는 구조

public/

• 이미지, 아이콘 등 정적 파일
• Android의 res/ 폴더와 비슷

package.json

• 프로젝트 정보와 의존성
• 스크립트 명령어 정의

tsconfig.json

• TypeScript 설정

next.config.ts

• Next.js 설정

---

📝 page.tsx 살펴보기

src/app/page.tsx를 열어봤습니다.

export default function Home() {
  return (
    <div>
      <h1>To get started, edit page.tsx</h1>
    </div>
  );
}

Compose와 비교

Jetpack Compose:

@Composable
fun HomeScreen() {
    Column {
        Text("안녕하세요!")
    }
}

React:

export default function Home() {
  return (
    <div>
      <h1>안녕하세요!</h1>
    </div>
  );
}

비교:

• @Composable → export default function
• Column → <div>
• Text → <h1>

함수로 UI를 만드는 건 똑같습니다!

---

💡 첫 수정

page.tsx를 수정했습니다.

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold">안녕하세요!</h1>
      <p className="mt-4 text-xl">8년차 Android 개발자입니다.</p>
    </div>
  );
}

Tailwind CSS 클래스 설명

레이아웃:

• flex: Flexbox 사용
• min-h-screen: 최소 높이 100vh (화면 전체)
• flex-col: 세로 방향
• items-center: 가로 중앙 정렬
• justify-center: 세로 중앙 정렬

텍스트:

• text-4xl: 큰 글씨 (36px)
• font-bold: 굵은 글씨
• mt-4: 위 마진 (16px)
• text-xl: 큰 텍스트 (20px)

Compose와 비교

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Text(
        text = "안녕하세요!",
        fontSize = 36.sp,
        fontWeight = FontWeight.Bold
    )
    Spacer(modifier = Modifier.height(16.dp))
    Text(
        text = "8년차 Android 개발자입니다.",
        fontSize = 20.sp
    )
}

Compose의 Modifier와 Tailwind의 className이 비슷합니다!

저장했습니다.

브라우저가 자동으로 새로고침됐습니다.

Hot Reload!

Android Studio의 Apply Changes처럼 자동 반영됩니다.

---

🤔 layout.tsx 이해하기

src/app/layout.tsx를 열어봤습니다.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

layout.tsx의 역할

• 모든 페이지의 공통 레이아웃
• <html>, <body> 태그 정의
• {children}에 각 페이지 내용이 들어갑니다

Compose와 비교

@Composable
fun App() {
    MaterialTheme {  // layout.tsx와 비슷 (공통 테마)
        HomeScreen()  // page.tsx와 비슷 (화면 내용)
    }
}

구조:

• layout.tsx = MaterialTheme (공통 래퍼)
• page.tsx = HomeScreen() (화면 내용)
• {children} = 함수 호출로 화면 렌더링

---

⚠️ 문제 해결

1. 포트가 이미 사용 중인 경우

Port 3000 is already in use

해결 방법:

다른 포트로 실행:

PORT=3001 npm run dev

2. 이미 개발 서버가 실행 중인 경우

다른 터미널에서 npm run dev를 실행하면:

Port 3000 is in use, using 3001 instead

자동으로 다음 포트(3001)를 사용합니다.

3000 포트를 사용하고 싶다면:

기존 서버를 종료하세요:

• 실행 중인 터미널에서 Ctrl + C
• 또는 터미널을 찾아서 종료

터미널을 닫아버린 경우:

프로세스를 강제 종료해야 합니다.

Mac/Linux:

lsof -ti:3000 | xargs kill -9

Windows:

netstat -ano | findstr :3000
taskkill /PID [프로세스ID] /F

그 다음 다시 실행:

npm run dev

3. Hot Reload 안 될 때

브라우저 캐시를 지우세요:

• Chrome: Cmd + Shift + R (Mac)
• Chrome: Ctrl + Shift + R (Windows)

4. 패키지 설치 오류

rm -rf node_modules package-lock.json
npm install

---

💬 정리

Android 개발 경험이 도움됐습니다

• Kotlin 문법 → TypeScript 이해 쉬움
• Compose 개념 → React 빠르게 적응
• Gradle 경험 → npm 사용법 익숙

Compose vs React 공통점

• 함수로 UI 선언
• 컴포넌트 조합으로 화면 구성
• 상태 변경 시 자동 리렌더링

차이점

• Compose: Column, Text, Modifier
• React: <div>, <h1>, className