Search

React κ°œλ°œν™˜κ²½ μ„€μΉ˜

Node.js μ„€μΉ˜ν•˜κΈ° (Windows)

1. winget으둜 Node.js μ„€μΉ˜

winget install OpenJS.NodeJS
Bash
볡사

2. μ„€μΉ˜ 확인

μ„€μΉ˜κ°€ μ™„λ£Œλ˜λ©΄ λ‹€μŒ λͺ…λ Ήμ–΄λ‘œ Node.js와 npm 버전을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€:
node --version
Bash
볡사

3. PowerShell μ—μ„œ node λͺ…λ Ήμ–΄ μ‹€ν–‰ μ•ˆλ  λ•Œ

PowerShell 슀크립트 μ‹€ν–‰ ν—ˆμš©

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
PowerShell
볡사
PowerShellμ—μ„œ 슀크립트λ₯Ό μ‹€ν–‰ν•  수 μžˆλ„λ‘ λ³΄μ•ˆ 정책을 λ³€κ²½ν•˜λŠ” λͺ…λ Ήμ–΄
β€’
μ˜΅μ…˜ μ„€λͺ…
β—¦
RemoteSigned
β–ͺ
λ‘œμ»¬μ—μ„œ λ§Œλ“  μŠ€ν¬λ¦½νŠΈλŠ” μ‹€ν–‰ κ°€λŠ₯
β–ͺ
μΈν„°λ„·μ—μ„œ λ‹€μš΄λ‘œλ“œν•œ μŠ€ν¬λ¦½νŠΈλŠ” μ„œλͺ… ν•„μš”
β–ͺ
개발 ν™˜κ²½μ—μ„œ κ°€μž₯ 많이 μ“°λŠ” μ„€μ •
β—¦
Scope CurrentUser
β–ͺ
ν˜„μž¬ λ‘œκ·ΈμΈν•œ μ‚¬μš©μžμ—κ²Œλ§Œ 적용
β–ͺ
κ΄€λ¦¬μž κΆŒν•œ ν•„μš” μ—†μŒ
β–ͺ
μ‹œμŠ€ν…œ 전체에 영ν–₯ μ—†μŒ

ν™˜κ²½λ³€μˆ˜ PATH μΆ”κ°€

[Environment]::SetEnvironmentVariable( "Path", $env:Path + ";C:\Program Files\nodejs", "User" )
PowerShell
볡사
μ‚¬μš©μž(User) λ²”μœ„ PATH ν™˜κ²½λ³€μˆ˜μ— Node.js 경둜 μΆ”κ°€
node λͺ…λ ΉνŒŒμΌμ΄ μžˆλŠ” node.js μ„€μΉ˜ 경둜λ₯Ό ν™˜κ²½ λ³€μˆ˜ PATH 에 μΆ”κ°€ν•΄μ£Όμ–΄μ„œ, μ–΄λŠ κ²½λ‘œμ—μ„œλ‚˜ node λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•  수 있게 ν•΄μ€€λ‹€.

4. React ν”„λ‘œμ νŠΈ 생성

이제 React ν”„λ‘œμ νŠΈλ₯Ό 생성해 λ³΄κ² μŠ΅λ‹ˆλ‹€. λ‹€μŒ λͺ…λ Ήμ–΄λ₯Ό μ‚¬μš©ν•˜μ—¬ μƒˆ React μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€:
npx create-react-app my-app
Bash
볡사
μœ„ λͺ…λ Ήμ–΄λŠ” 'my-app'μ΄λΌλŠ” μ΄λ¦„μ˜ μƒˆ React ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. ν”„λ‘œμ νŠΈ 이름은 μ›ν•˜λŠ” λŒ€λ‘œ λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

Vite둜 React ν”„λ‘œμ νŠΈ 생성

ViteλŠ” 더 λΉ λ₯Έ λΉŒλ“œ 속도와 개발 κ²½ν—˜μ„ μ œκ³΅ν•˜λŠ” μ΅œμ‹  ν”„λ‘ νŠΈμ—”λ“œ λΉŒλ“œ λ„κ΅¬μž…λ‹ˆλ‹€. Vite둜 React ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν•˜λŠ” 방법은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€:
npm create vite@latest vite-app -- --template react
Bash
볡사
λ˜λŠ” ν”„λ‘œμ νŠΈ 이름과 ν…œν”Œλ¦Ώμ„ λŒ€ν™”ν˜•μœΌλ‘œ 선택할 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€:
npm create vite@latest
Bash
볡사
μœ„ λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•˜λ©΄ ν”„λ‘œμ νŠΈ 이름과 ν”„λ ˆμž„μ›Œν¬(React), 그리고 JavaScript/TypeScript 쀑 선택할 수 μžˆλŠ” ν”„λ‘¬ν”„νŠΈκ°€ λ‚˜νƒ€λ‚©λ‹ˆλ‹€.

5. λͺ¨λ“ˆ μ„€μΉ˜

React ν”„λ‘œμ νŠΈμ—μ„œ ν•„μš”ν•œ λͺ¨λ“ˆμ„ μ„€μΉ˜ν•˜λ €λ©΄ ν”„λ‘œμ νŠΈ λ””λ ‰ν† λ¦¬λ‘œ μ΄λ™ν•œ ν›„ npm을 μ‚¬μš©ν•©λ‹ˆλ‹€:
β€’
ν”„λ‘œμ νŠΈλ‘œ 이동
cd my-app
Bash
볡사
npm install
Bash
볡사

6. μ„œλ²„ μ‹€ν–‰

개발 μ„œλ²„λ₯Ό μ‹€ν–‰ν•˜λ €λ©΄ λ‹€μŒ λͺ…λ Ήμ–΄λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€:
β€’
npx
npm start
Bash
볡사
β€’
vite
npm run dev
Bash
볡사
이 λͺ…λ Ήμ–΄λŠ” 개발 μ„œλ²„λ₯Ό μ‹œμž‘ν•˜κ³  λΈŒλΌμš°μ €μ—μ„œ http://localhost:3000 μ£Όμ†Œλ‘œ React μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μžλ™μœΌλ‘œ μ—΄μ–΄μ€λ‹ˆλ‹€.

7. λΈŒλΌμš°μ € μ‹€ν–‰

http://localhost:3000
http://localhost:3000