← 돌아가기

Step 1: 환경 세팅 & JSX

🚀 환경 세팅

npx create-next-app@latest my-first-nextjs

Ok to proceed? (y) y

✔ 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

cd my-first-nextjs
npm run dev

브라우저에서 http://localhost:3000 접속

✅ 주요 차이점

HTML → JSX

Before (Session 0)

<!-- index.html -->
<script src="https://cdn.tailwindcss.com"></script>
← 필요했음

<div class="flex flex-col gap-4 p-8">
  <div>프로필</div>
  <div>카운터</div>
  <div>토글</div>
</div>

After (Session 5)

// app/page.jsx
// Tailwind 자동으로 작동! ✨

export default function Home() {
  return (
    <div className="flex flex-col gap-4 p-8">
      <div>프로필</div>
      <div>카운터</div>
      <div>토글</div>
    </div>
  );
}

📌 핵심 차이점

1️⃣
class → className
2️⃣
HTML 파일 → .jsx 컴포넌트
3️⃣
재사용 가능한 컴포넌트

💻 실습: 기본 레이아웃 만들기

프로필
카운터
토글

홈입니다.

💡 Tailwind 힌트

flex gap-6 - 가로 배치 + 간격
px-8 py-4 - 좌우/상하 패딩
bg-gray-100 - 메뉴 배경색
border-b border-gray-200 - 아래쪽 테두리로 구분선

💡 다음 단계에서 이 메뉴들을 실제 페이지로 만들어갑니다!