최소한의 프론트엔드 개발 환경 설정하기
프론트엔드 개발을 시작하려면 세 가지 도구가 필요합니다. 에디터, 런타임, 버전 관리 도구입니다.
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 initVSCode로 폴더를 엽니다.
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"개발 환경 설정이 완료되었습니다.
Frontend development requires three tools: an editor, a runtime, and version control.
Install VSCode
Download from code.visualstudio.com.
After installation, add useful extensions:
- Prettier - Code formatting
- ESLint - Code quality
- Live Server - Local dev server
Open the extensions tab with Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows) and search to install.
Install Node.js
Download the LTS version from nodejs.org.
Verify installation:
node --version
npm --version
Version numbers mean success.
Install Git
Download from git-scm.com.
After installation, set your user info:
git config --global user.name "Your Name"
git config --global user.email "email@example.com"
Verify settings:
git config --list
Create Your First Project
Create a project in the terminal:
mkdir my-project
cd my-project
npm init -y
git init
Open the folder in VSCode:
code .
Create an index.html file:
<!DOCTYPE html>
<html lang="en">
<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>
Right-click and select "Open with Live Server" to view in browser.
Set Up .gitignore
Don't include node_modules in Git:
echo "node_modules" > .gitignore
First Commit
git add .
git commit -m "Initial commit"
Your dev environment is ready.
前端开发需要三个工具：编辑器、运行时和版本控制。
安装VSCode
安装后，添加有用的扩展：
- 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="zh">
<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>
右键选择"Open with Live Server"在浏览器中查看。
设置.gitignore
不要把node_modules包含在Git中：
echo "node_modules" > .gitignore
第一次提交
git add .
git commit -m "Initial commit"
开发环境设置完成。
フロントエンド開発には3つのツールが必要です。エディタ、ランタイム、バージョン管理ツールです。
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="ja">
<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"
開発環境の設定が完了しました。
El desarrollo frontend requiere tres herramientas: un editor, un runtime y control de versiones.
Instalar VSCode
Descarga desde code.visualstudio.com.
Después de instalar, añade extensiones útiles:
- Prettier - Formateo de código
- ESLint - Calidad del código
- Live Server - Servidor de desarrollo local
Abre la pestaña de extensiones con Cmd+Shift+X (Mac) o Ctrl+Shift+X (Windows) y busca para instalar.
Instalar Node.js
Descarga la versión LTS desde nodejs.org.
Verifica la instalación:
node --version
npm --version
Si aparecen los números de versión, fue exitoso.
Instalar Git
Descarga desde git-scm.com.
Después de instalar, configura tu información de usuario:
git config --global user.name "Tu Nombre"
git config --global user.email "email@example.com"
Verifica la configuración:
git config --list
Crear tu primer proyecto
Crea un proyecto en la terminal:
mkdir my-project
cd my-project
npm init -y
git init
Abre la carpeta en VSCode:
code .
Crea un archivo index.html:
<!DOCTYPE html>
<html lang="es">
<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>
Haz clic derecho y selecciona "Open with Live Server" para ver en el navegador.
Configurar .gitignore
No incluyas node_modules en Git:
echo "node_modules" > .gitignore
Primer commit
git add .
git commit -m "Initial commit"
Tu entorno de desarrollo está listo.