3 / 9약 40분입문

환경 만들기 — 설치부터 첫 실행

도구를 켜고 ‘Hello’ 화면을 내 브라우저에 띄운다

이 장을 끝내면

터미널에서 프로젝트 폴더 열기
로컬 주소(localhost)로 화면 보기
GitHub에 코드 올리기(비공개여도 됨)

단어 먼저 (겁먹지 말 것)

터미널=명령을 치는 창. 폴더=파일 묶음. 로컬=내 컴퓨터. 패키지=남이 만든 코드 조각. 설치=그 조각을 내 프로젝트에 받기.

1) Node.js

JavaScript를 내 컴퓨터에서 실행·설치 도구(npm)를 쓰게 해 줍니다. 공식 사이트 LTS 버전을 설치합니다. 설치 후 터미널에서 node -v 가 버전 숫자를 보여 주면 성공입니다.

지금 하기

Node LTS 설치
터미널에서 node -v , npm -v 확인

2) Git

저장의 저장(버전 기록) 도구입니다. 나중에 실수해도 되돌리기 쉽습니다. GitHub는 그 기록을 인터넷에 두는 곳입니다.

지금 하기

Git 설치 후 git --version
GitHub 로그인, 새 저장소 이름만 만들어 두기 (아직 푸시 설명은 아래)

3) 코딩 에이전트·에디터

하나만 고르세요. Cursor(에디터+에이전트), Claude Code(터미널 에이전트), VS Code+Copilot 등. ‘예쁜 IDE’보다 ‘오늘 쓸 것’이 중요합니다.

에이전트에게 복붙

이 컴퓨터에서 Next.js TypeScript Tailwind 프로젝트를 최소 설정으로 만드는 명령을 단계별로 알려줘. 내가 윈도우/맥인지 물어본 뒤 진행해.

4) 첫 프로젝트 생성 (개념)

보통 create-next-app 같은 명령으로 뼈대가 생깁니다. 에이전트에게 시켜도 됩니다. 끝나면 npm run dev (또는 pnpm dev) 로 개발 서버를 켭니다.

# 개념 예시 (버전·옵션은 공식/에이전트 안내에 따를 것)
npx create-next-app@latest my-app
cd my-app
npm run dev
# 브라우저에서 http://localhost:3000

지금 하기

localhost 주소가 열리고 기본 Next 화면이 보이면 스크린샷 저장
터미널을 끄면 로컬 사이트도 꺼진다는 것을 확인

5) 프로젝트에 규칙 파일 한 장

에이전트가 매 채팅마다 헤매지 않게, 루트에 AGENTS.md 또는 CLAUDE.md를 둡니다.

# 프로젝트 규칙 (초안)

## 스택
- Next.js App Router, TypeScript, Tailwind, shadcn/ui

## 금지
- API 키를 코드·채팅에 넣지 말 것
- force push, 프로덕션 DB 직접 삭제 금지

## 완료 조건
- 변경 후 내가 브라우저로 확인하기 전까지 완료라고 말하지 말 것
- 가능하면 npm run build 통과

## 디자인
- 모노톤 + 강조색 1, 과한 그라디언트 금지

에이전트에게 복붙

위 규칙 파일 초안을 프로젝트 루트에 만들어 줘. 내 제품 한 줄을 반영해.

6) GitHub에 첫 push (개요)

로컬 폴더를 원격 저장소와 연결합니다. 토큰·로그인은 GitHub 안내를 따릅니다. .env 파일은 절대 올리지 않습니다 (.gitignore 확인).

막히면

명령이 무섭면: GitHub Desktop 앱으로 ‘Publish repository’
에러 메시지를 통째로 복사해 에이전트에게 ‘설명하고 다음 한 줄 명령만’

# 프로젝트 규칙 (초안) ## 스택 - Next.js App Router, TypeScript, Tailwind, shadcn/ui ## 금지 - API 키를 코드·채팅에 넣지 말 것 - force push, 프로덕션 DB 직접 삭제 금지 ## 완료 조건 - 변경 후 내가 브라우저로 확인하기 전까지 완료라고 말하지 말 것 - 가능하면 npm run build 통과 ## 디자인 - 모노톤 + 강조색 1, 과한 그라디언트 금지