최소한의 프론트엔드 개발 환경 설정하기

Frontend Development Environment — Photo by Ilya Pavlov on Unsplash

프론트엔드 개발을 시작하려면 세 가지 도구가 필요합니다. 에디터, 런타임, 버전 관리 도구입니다.

VSCode 설치

code.visualstudio.com에서 다운로드합니다.

설치 후 유용한 확장 프로그램을 추가합니다.

Prettier - 코드 포맷팅
ESLint - 코드 품질 검사
Live Server - 로컬 개발 서버

Cmd+Shift+X (Mac) 또는 Ctrl+Shift+X (Windows)로 확장 탭을 열고 검색해서 설치합니다.

Node.js 설치

nodejs.org에서 LTS 버전을 다운로드합니다.

설치 확인:

node --version
npm --version

버전 번호가 출력되면 성공입니다.

Git 설치

git-scm.com에서 다운로드합니다.

설치 후 사용자 정보를 설정합니다.

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

설정 확인:

git config --list

첫 프로젝트 만들기

터미널에서 프로젝트를 생성합니다.

mkdir my-project
cd my-project
npm init -y
git init

VSCode로 폴더를 엽니다.

code .

index.html 파일을 만듭니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Project</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Live Server 확장으로 우클릭 후 “Open with Live Server”를 선택하면 브라우저에서 확인할 수 있습니다.

.gitignore 설정

node_modules 폴더는 Git에 포함하지 않습니다.

echo "node_modules" > .gitignore

첫 커밋

git add .
git commit -m "Initial commit"

개발 환경 설정이 완료되었습니다.