blog › posts › 01-사전-준비물.md

01. 사전 준비물

“도구가 없으면 시작할 수 없다. 다만 도구는 다 무료다.”

이것을 왜 배우는가?

블로그를 만들려면 4가지 도구·계정이 필요합니다. 다행히 모두 무료입니다.

이 단계를 건너뛰고 다음으로 가면 명령어 입력 시 “command not found” 같은 에러를 만나게 됩니다. 이 단계만 끝내면 나머지는 비교적 매끄럽게 진행됩니다.

준비물 한눈에 보기

도구역할시간
Node.jsAstro를 실행시키는 엔진5분
VS Code (또는 Cursor)코드 편집기 (글도 여기서 씀)5분
GitHub 계정코드·글 저장소5분
Cloudflare 계정사이트 호스팅 (사이트를 인터넷에 띄움)5분
Git (보통 Mac은 기본 설치, Windows는 별도)코드 변경 추적·전송 도구10분

총 30분. 이미 일부 갖고 있으면 더 짧음.

1. Node.js 설치

무엇이고 왜 필요한가

Node.js = “노드”(연결점)에서 따온 이름. 자바스크립트를 본인 컴퓨터에서 실행시키는 프로그램.

왜 필요한가:

Astro는 자바스크립트로 만들어졌습니다. 본인 컴퓨터가 자바스크립트를 이해하려면 Node.js가 있어야 합니다.

비유:

한국어 책을 읽으려면 한국어를 알아야 하듯, 자바스크립트로 만든 도구(Astro)를 본인 컴퓨터에서 쓰려면 자바스크립트를 “이해하는 프로그램”(Node.js)이 필요합니다.

어떤 버전을 깔까? (2026년 4월 기준)

🟡 INFERRED — 2026년 4월 시점 권장 버전:

버전상태추천도
Node.js 22.x LTSActive LTS (장기 지원)⭐⭐⭐⭐⭐ 가장 추천
Node.js 24.x LTSLTS 진입 가능성⭐⭐⭐⭐ (출시됐다면 OK)
Node.js 20.xMaintenance LTS⭐⭐⭐ 이미 깔려있으면 OK
Node.js 18.x 이하지원 종료❌ 업그레이드 필요

LTS = Long-Term Support. “오래 안정적으로 지원되는 버전”. 실험적 기능 없이 안전한 버전.

⚠️ 중요: nodejs.org에서 “LTS 버전” 표시된 걸로 다운로드. “Current”는 최신이지만 실험 버전이라 문제 발생 가능.

설치 방법

Mac:

# 방법 1: 공식 설치 파일 (가장 쉬움)
# 1. https://nodejs.org 접속
# 2. "LTS" 표시된 버튼 클릭 → 다운로드
# 3. .pkg 파일 더블클릭 → 설치 마법사 따라하기

# 방법 2: Homebrew로 설치 (Homebrew 있으면 더 깔끔)
brew install node@22

Windows:

# 1. https://nodejs.org 접속
# 2. "LTS" 표시된 버튼 클릭 → .msi 파일 다운로드
# 3. 더블클릭 → 설치 마법사
# 4. 설치 옵션 다 기본값 그대로 OK

설치 확인

설치 후 터미널(Mac) 또는 PowerShell(Windows)을 열고:

node --version    # v22.x.x 같은 게 나오면 성공
npm --version     # 10.x.x 같은 게 나오면 성공

npm = Node Package Manager. Node.js와 함께 자동 설치됨. 다른 사람들이 만든 도구(패키지)를 다운받게 해주는 도구.

⚠️ 흔한 실수: 터미널을 설치 전에 열어둔 채 그대로 사용 → 바뀐 환경 변수 인식 안 됨. 터미널 다시 열기 권장.

❌ node: command not found 에러:

  • 이유: Node.js 설치 안 됐거나 PATH 환경변수에 등록 안 됨
  • 해결: 터미널 닫고 다시 열기 → 그래도 안 되면 컴퓨터 재부팅 → 그래도 안 되면 nodejs.org에서 재설치

✅ v22.x.x 표시되면 성공. 다음으로.

2. VS Code 또는 Cursor 설치

무엇이고 왜 필요한가

VS Code = Visual Studio Code. Microsoft가 만든 무료 코드 편집기. Cursor = VS Code 기반에 AI(Claude·GPT) 통합된 편집기. 무료 플랜 있음.

왜 필요한가:

마크다운 글을 쓰고 코드 일부를 수정해야 합니다. 일반 메모장으로도 가능하지만 색깔 구분·자동 완성·에러 표시가 없어 매우 비효율적입니다.

비유:

한글 문서를 메모장에 쓰는 것 vs 한글 워드에 쓰는 것. 도구의 차이.

어느 것을 선택할까?

편집기추천 상황
VS Code안정적, 가장 표준. 처음이면 이걸로
CursorAI 도움 많이 받을 거면 (코드 짜달라 시키기 가능)

🟡 INFERRED — Cursor는 무료 플랜 사용량 제한이 있을 수 있음. 가입 시점 정책 확인.

설치

VS Code:

Cursor:

설치 후 한 번 실행해서 제대로 켜지는지 확인.

3. Git 설치 및 설정

무엇이고 왜 필요한가

Git = “분산 버전 관리 시스템”. 코드 변경 이력을 자동으로 저장·관리하는 도구.

왜 필요한가:

블로그 코드와 글을 GitHub(클라우드)에 저장·동기화하려면 Git이 필요합니다. Git 없이는 본인 컴퓨터의 글을 GitHub에 올릴 수 없습니다.

비유:

Google Drive에 파일 업로드하는 것 = GitHub에 올리는 것. 그 업로드/다운로드를 가능하게 해주는 프로그램이 Git.

설치 확인

Mac: 보통 Xcode Command Line Tools와 함께 자동 설치됨. 터미널에서:

git --version
# git version 2.x.x 나오면 OK

만약 안 나오면:

# Mac: 자동으로 설치 묻는 창이 뜸. "Install" 클릭
xcode-select --install

Windows: 별도 설치 필요.

# https://git-scm.com 접속 → Windows용 다운로드 → 설치
# 설치 옵션 다 기본값 OK

설치 후 PowerShell 다시 열고:

git --version
# git version 2.x.x 나오면 OK

Git 초기 설정 (필수)

⚠️ 이것을 안 하면 git commit 시 에러 납니다.

설치 후 한 번만 다음 명령어를 실행하세요:

# 본인 이름 (GitHub 가입 시 사용할 이름)
git config --global user.name "Your Name"

# 본인 이메일 (GitHub 가입 시 사용할 이메일)
git config --global user.email "your@email.com"

→ 이 정보는 git commit 시 “누가 변경했나” 기록에 사용됩니다. 본인 이메일이어야 GitHub과 연결됩니다.

확인:

git config --global user.name
# Your Name 출력되면 OK

git config --global user.email
# your@email.com 출력되면 OK

4. GitHub 계정 만들기

무엇이고 왜 필요한가

GitHub = Git을 사용하는 코드 저장소를 클라우드에서 무료로 제공하는 서비스 (Microsoft 소유).

왜 필요한가:

  • 본인 코드와 글을 클라우드에 백업
  • Cloudflare Pages가 GitHub의 변경을 감지해서 자동 배포
  • 본인 컴퓨터 망가져도 글 안전

가입 방법

  1. https://github.com 접속
  2. 우측 상단 “Sign up” 클릭
  3. 이메일 입력 → 비밀번호 → 사용자명 (이게 본인 GitHub 아이디)
  4. 인증 절차 따라하기
  5. 무료 플랜 선택 (Free)

⚠️ 사용자명 정할 때 주의:

좋은 사용자명나쁜 사용자명
kimminsooaaaaa1234 (의미 없음)
jane-doecool_dev_2026 (날짜 박힘)
developerjohnmyFirstAcc (장난스러움)

이유: GitHub 아이디는 본인 명함입니다. github.com/yourname 주소가 됩니다. 나중에 채용·협업 시에도 보입니다. 신중하게.

본인 이메일 확인 (중요)

가입 후 GitHub이 보낸 이메일에서 “Verify email address” 링크 클릭. 안 하면 일부 기능(저장소 생성 등) 제한.

Git에 등록한 이메일과 GitHub 이메일 일치 확인

# 위에서 git config로 등록한 이메일 확인
git config --global user.email

# 이 이메일이 GitHub 가입 이메일과 같아야 함

⚠️ 다르면 commit이 본인 GitHub 프로필에 안 잡힐 수 있음. 일치시키세요.

5. Cloudflare 계정 만들기

무엇이고 왜 필요한가

Cloudflare = 미국의 인터넷 인프라 회사. 전 세계 200+ 도시에 서버 있음. Cloudflare Pages = 정적 사이트(Astro 같은)를 무료로 호스팅해주는 서비스.

왜 필요한가:

  • 본인 사이트를 인터넷에 띄울 곳
  • 무료 + 광고 수익 모델 OK (상업적 사용 허용)
  • GitHub 연동 자동 배포

가입 방법

  1. https://cloudflare.com 접속
  2. 우측 상단 “Sign Up” 클릭
  3. 이메일·비밀번호 입력
  4. 무료 플랜으로 시작

⚠️ 신용카드 등록 안 해도 됩니다. 무료 플랜은 카드 없이 사용 가능.

가입 후 이메일 인증 메일 클릭해서 인증 완료.

Cloudflare Pages 위치 확인

가입 후 대시보드에서:

  • 좌측 메뉴 → “Workers & Pages” 가 보이는지 확인
  • 안 보이면 검색 아이콘으로 “Workers & Pages” 검색

→ 이 위치가 다음 단계에서 사용됩니다.

정리 및 체크리스트

다음 단계로 가기 전에 모두 ✅ 확인하세요:

□ Node.js 22.x LTS (또는 최신 LTS) 설치 완료
□ 터미널에서 `node --version` 입력 시 v22.x.x 출력됨
□ 터미널에서 `npm --version` 입력 시 10.x.x 출력됨
□ VS Code 또는 Cursor 설치하고 한 번 실행해봄
□ 터미널에서 `git --version` 입력 시 git version 2.x.x 출력됨
□ git config --global user.name / user.email 등록 완료
□ GitHub 가입 + 이메일 인증 완료
□ Git에 등록한 이메일과 GitHub 가입 이메일이 일치함
□ Cloudflare 가입 + 이메일 인증 완료
□ Cloudflare 대시보드에서 "Workers & Pages" 메뉴 위치 확인

체크 다 안 됐으면 그 항목 다시 진행. 전부 ✅면 다음.

흔한 실수 모음

실수결과해결
Node.js Current 버전 설치일부 패키지 호환 안 됨LTS 재설치
Git 이메일 등록 안 함commit 시 에러git config --global user.email 실행
GitHub과 Git 이메일 불일치본인 프로필에 commit 안 잡힘둘을 동일하게 통일
터미널 재시작 안 함”command not found” 에러터미널 닫고 다시 열기
Windows에서 Git Bash 안 씀일부 명령어 동작 안 함Git Bash 또는 PowerShell 사용

💡 핵심 포인트

이 단계의 핵심: 본인 컴퓨터가 코드를 실행·전송할 수 있는 상태로 준비.

이걸 안 했으면 다음 단계에서 100% 막힙니다. 30분 투자해서 확실히 끝내고 가세요.

다음 단계

02-create-astro.md — Astro 프로젝트 생성·로컬 실행·본인 정보 수정

main ⚠ 0 ✕ 0 Ln 1, Col 1 Spaces: 2 UTF-8 LF Markdown