🚀 NextJS + Gemini CLI로 웹 개발 시작하기 - 1일차 강의

안녕하세요! 오늘은 Gemini CLI를 활용해서 NextJS 웹 애플리케이션을 개발하고 배포하는 방법을 배워보겠습니다. 최종 목표는 PC와 대전할 수 있는 오목 게임을 만들어서 인터넷에 공개하는 것입니다.

🎯 강의 목표

• Gemini CLI로 AI의 도움을 받아 코드 작성하기
• NextJS 개발 환경 구축하기
• 로컬에서 웹 애플리케이션 실행하기
• 배포의 개념 이해하기

소요 시간: 약 2시간
난이도: 초급 (프로그래밍 경험 없어도 OK)

---

📋 사전 준비사항

이 강의를 듣기 위해 필요한 것은 딱 한 가지입니다:

• 기본적인 컴퓨터 사용 능력 (파일 다운로드, 설치 프로그램 실행 등)

그 외 모든 것은 함께 설치하면서 배워나갈 예정입니다!

---

🚀 1회차: 개발 환경 구축 (60분)

1. 기초 개념 이해하기 (15분)

본격적인 설치에 앞서, 몇 가지 기본 개념을 짚고 넘어가겠습니다.

Node.js가 뭔가요?

JavaScript는 원래 웹 브라우저에서만 동작하는 언어였습니다. 하지만 Node.js 덕분에 내 컴퓨터에서도 JavaScript를 실행할 수 있게 되었죠.

왜 필요한가요?

• NextJS 같은 현대적인 웹 개발 도구들이 Node.js 위에서 동작합니다
• 개발 서버를 내 컴퓨터에서 실행할 수 있습니다

npm은 무엇인가요?

npm(Node Package Manager)은 JavaScript 라이브러리를 설치하고 관리하는 도구입니다. 스마트폰의 앱스토어와 비슷하다고 생각하면 됩니다.

package.json의 역할

• 프로젝트에 필요한 라이브러리 목록을 저장합니다
• 다른 개발자와 협업할 때 필수적입니다

터미널/커맨드라인 기초

검은 화면에 명령어를 입력하는 것을 두려워하지 마세요! 몇 가지 기본 명령어만 알면 충분합니다.

# 폴더 이동
cd 폴더이름

# 현재 폴더의 파일 목록 보기
dir          # Windows
ls           # Mac/Linux

# 상위 폴더로 이동
cd ..

실습해보기: 명령 프롬프트(cmd)를 열어서 위 명령어들을 직접 입력해보세요!

---

2. 필수 프로그램 설치하기 (25분)

이제 본격적으로 개발 환경을 구축해봅시다.

Step 1: Node.js 설치

1. Node.js 공식 사이트 접속
2. LTS 버전 다운로드 (안정적인 버전)
3. 설치 프로그램 실행 (기본 설정으로 진행)

설치 확인하기

명령 프롬프트(cmd)를 열고 다음 명령어를 입력하세요:

node -v
npm -v

버전 번호가 표시되면 성공입니다!

v20.10.0
10.2.3

Step 2: Git 설치

Git은 코드 버전 관리 도구입니다. 나중에 GitHub에 코드를 업로드할 때 필요합니다.

1. Git 공식 사이트 접속
2. Windows용 Git 다운로드
3. 설치 (모두 기본 설정으로 진행)

GitHub 계정 만들기

• GitHub 접속
• 무료 계정 생성

Git 초기 설정

명령 프롬프트에서 다음 명령어를 실행하세요:

git config --global user.name "내이름"
git config --global user.email "이메일@example.com"

Step 3: Gemini CLI 설치

Gemini CLI는 Google의 AI를 터미널에서 사용할 수 있게 해주는 도구입니다.

npm install -g @google/generative-ai-cli

인증하기

gemini auth

브라우저가 열리면서 Google 계정으로 로그인하라는 메시지가 나타납니다. Web auth 방식으로 진행되므로 별도의 API 키 발급은 필요 없습니다!

Step 4: NextJS 프로젝트 생성

드디어 우리의 첫 NextJS 프로젝트를 만들어봅시다!

npx create-next-app@latest my-omok-game

다음과 같은 질문들이 나타날 것입니다:

✔ Would you like to use TypeScript? … No / Yes
→ Yes 선택

✔ Would you like to use ESLint? … No / Yes  
→ Yes 선택

✔ Would you like to use Tailwind CSS? … No / Yes
→ Yes 선택

✔ Would you like to use `src/` directory? … No / Yes
→ No 선택

✔ Would you like to use App Router? … No / Yes
→ Yes 선택

✔ Would you like to customize the default import alias? … No / Yes
→ No 선택

설치가 완료되면 프로젝트 폴더로 이동합니다:

cd my-omok-game

---

3. 프로젝트 구조 이해하기 (10분)

생성된 프로젝트의 구조를 살펴봅시다.

my-omok-game/
├── app/              # 페이지 파일들
│   ├── page.tsx     # 메인 페이지
│   └── layout.tsx   # 공통 레이아웃
├── public/          # 이미지 등 정적 파일
├── node_modules/    # 설치된 라이브러리들
├── package.json     # 프로젝트 설정 파일
└── next.config.js   # NextJS 설정

중요한 파일들

• app/page.tsx: 웹사이트의 메인 페이지
• package.json: 프로젝트 정보와 필요한 라이브러리 목록
• public/: 이미지, 아이콘 등을 저장하는 폴더

---

4. 개발 서버 실행하기 (10분)

이제 우리가 만든 웹사이트를 브라우저에서 확인해봅시다!

Windows 환경 설정

두 개의 명령 프롬프트 창이 필요합니다

첫 번째 cmd 창: 개발 서버 실행

cd my-omok-game
npm run dev

다음과 같은 메시지가 나타나면 성공입니다:

  ▲ Next.js 14.0.0
  - Local:        http://localhost:3000
  - Network:      http://192.168.0.1:3000

 ✓ Ready in 2.3s

두 번째 cmd 창: Gemini CLI 사용

cd my-omok-game
gemini

이제 AI에게 질문하거나 코드 작성을 요청할 수 있습니다!

브라우저에서 확인하기

웹 브라우저를 열고 주소창에 다음을 입력하세요:

http://localhost:3000

NextJS 기본 페이지가 보인다면 성공입니다! 🎉

포트 번호 참고: NextJS의 기본 포트는 3000입니다. 만약 3000번 포트가 사용 중이라면 3001, 3002 등 다른 포트가 자동으로 할당됩니다.