설치 가이드
개발을 시작하기 위해 필요한 기본 도구들을 설치해봅시다! 🛠️
필수 도구들
1. Node.js 설치
Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있게 해주는 런타임입니다.
Windows & macOS
- Node.js 공식 사이트에 접속
- LTS(Long Term Support) 버전 다운로드 (안정성이 중요!)
- 설치 파일 실행하고 기본 설정으로 설치
설치 확인
터미널(명령 프롬프트)에서 다음 명령어로 확인:
node --version
npm --version
✅ 버전 번호가 나오면 설치 완료!
2. Git 설치
Git은 코드 버전 관리를 위한 필수 도구입니다.
Windows
- Git for Windows 다운로드
- 설치 중 기본 설정 그대로 진행 (초보자에게 안전)
macOS
# Homebrew 설치되어 있다면
brew install git
# 또는 Xcode Command Line Tools
xcode-select --install
설치 확인
git --version
3. VS Code 설치
가장 인기 있는 코드 에디터입니다.
- VS Code 공식 사이트 접속
- 운영체제에 맞는 버전 다운로드
- 설치 후 유용한 확장 프로그램들 설치
추천 확장 프로그램
- Korean Language Pack: 한국어 지원
- Prettier: 코드 자동 정렬
- ES7+ React/Redux/React-Native snippets: React 개발에 유용
- Auto Rename Tag: HTML/JSX 태그 자동 수정
- Bracket Pair Colorizer: 괄호 색상 구분
프로젝트별 설정
React 프로젝트 시작하기
# Create React App으로 새 프로젝트 생성
npx create-react-app my-app
cd my-app
# 개발 서버 실행
npm start
브라우저에서 http://localhost:3000이 열리면 성공! 🎉
Next.js 프로젝트 시작하기
# Next.js 프로젝트 생성
npx create-next-app@latest my-next-app
cd my-next-app
# 개발 서버 실행
npm run dev
TypeScript 추가하기
기존 프로젝트에 TypeScript를 추가하려면:
# React 프로젝트에 TypeScript 추가
npm install --save typescript @types/node @types/react @types/react-dom
# Next.js는 생성 시 옵션으로 선택 가능
npx create-next-app@latest --typescript
유용한 도구들 (선택사항)
패키지 매니저 업그레이드
Yarn 설치 (npm 대신 사용 가능)
npm install -g yarn
# 사용법
yarn install # npm install 대신
yarn add react # npm install react 대신
pnpm 설치 (더 빠른 패키지 매니저)
npm install -g pnpm
# 사용법
pnpm install # npm install 대신
pnpm add react # npm install react 대신
터미널 개선
Windows: Windows Terminal
Microsoft Store에서 "Windows Terminal" 검색 후 설치
macOS: iTerm2
iTerm2 공식 사이트에서 다운로드
문제 해결
자주 발생하는 문제들
command not found 오류
- 해결법: 터미널을 재시작하거나 컴퓨터를 재부팅
- 원인: 환경 변수(PATH) 설정이 아직 적용되지 않음
권한 오류 (Permission denied)
# Windows (관리자 권한으로 실행)
# PowerShell을 "관리자 권한으로 실행"
# macOS/Linux
sudo npm install -g 패키지명
느린 설치 속도
# npm 레지스트리를 한국 미러로 변경
npm config set registry https://registry.npmjs.org/
# 또는 Yarn 사용
npm install -g yarn
다음 단계
설치가 완료되었다면 이제 실제 개발을 시작해볼 차례입니다!
- 🎯 React 기초 - React의 첫 걸음
- 🚀 JavaScript 기초 - JavaScript 문법 복습
- 🔷 Next.js 소개 - 풀스택 개발의 시작
💡 꿀팁: 개발 환경은 한 번 잘 설정해두면 오랫동안 사용할 수 있어요. 처음엔 복잡해 보이지만 천천히 따라해보세요!
설치 중 문제가 생겼다면 GitHub Issues에 질문 남겨주세요! 🙋♂️