๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

node.js2

Window ์œˆ๋„์šฐ NVM์œผ๋กœ Node.js ๋ฒ„์ „ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ• Node.js๋Š” ๋‹ค์–‘ํ•œ ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋ฉฐ, ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ์š”๊ตฌํ•˜๋Š” ๋ฒ„์ „์ด ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿด ๋•Œ NVM(Node Version Manager)์„ ์‚ฌ์šฉํ•˜๋ฉด ์—ฌ๋Ÿฌ ๋ฒ„์ „์„ ์„ค์น˜ํ•˜๊ณ  ์†์‰ฝ๊ฒŒ ์ „ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” NVM์„ ํ™œ์šฉํ•˜์—ฌ Node.js ๋ฒ„์ „์„ ์„ค์น˜ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.[ ์—”์นด์ฝ” ] 1. NVM ์„ค์น˜ํ•˜๊ธฐnvm-windows ๋ฆด๋ฆฌ์Šค ํŽ˜์ด์ง€์—์„œ ์ตœ์‹  ๋ฒ„์ „์˜ nvm-setup.exe๋ฅผ ๋‹ค์šด๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.๋‹ค์šด๋กœ๋“œํ•œ ํŒŒ์ผ์„ ์‹คํ–‰ํ•˜๊ณ  ์ง€์‹œ์— ๋”ฐ๋ผ ์„ค์น˜๋ฅผ ์™„๋ฃŒํ•ฉ๋‹ˆ๋‹ค.๋ช…๋ น ํ”„๋กฌํ”„ํŠธ(cmd)๋ฅผ ์—ด๊ณ  ๋‹ค์Œ ๋ช…๋ น์–ด๋กœ ์„ค์น˜ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.nvm --version2. Node.js ์„ค์น˜ ๋ฐ ๋ฒ„์ „ ๊ด€๋ฆฌ์„ค์น˜ ๊ฐ€๋Šฅํ•œ ๋ฒ„์ „ ๋ชฉ๋ก ํ™•์ธ์ตœ์‹  LTS ๋ฒ„์ „๋งŒ ํ™•์ธํ•˜๋ ค๋ฉด:nvm ls-remote --lts.. 2025. 1. 31.
React + Vite ๋ฒˆ๋“ค๋ง์œผ๋กœ ๋น ๋ฅด๊ฒŒ ์„ค์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ• React๋ฅผ ์‹œ์ž‘ํ•  ๋•Œ ์†๋„๊ฐ€ ๋А๋ ค ๊ณ ๋ฏผ์ด์‹ ๊ฐ€์š”? ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” React ํ”„๋กœ์ ํŠธ๋ฅผ Vite๋กœ ๋น ๋ฅด๊ฒŒ ์„ค์น˜ํ•˜๊ณ  ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๋ ค๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. Vite๋Š” ๊ฒฝ๋Ÿ‰ํ™”๋œ ๋ฒˆ๋“ค๋Ÿฌ๋กœ, ๋น ๋ฅธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•˜๋ฉฐ ๋ณต์žกํ•œ ์„ค์ • ์—†์ด๋„ React๋ฅผ ๊ฐ„ํŽธํ•˜๊ฒŒ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.[ ์—”์นด์ฝ” ]1. Vite๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?Vite๋Š” “๋น ๋ฅด๋‹ค”๋Š” ์˜๋ฏธ๋ฅผ ๊ฐ€์ง„ ํ”„๋ž‘์Šค์–ด ๋‹จ์–ด์—์„œ ์œ ๋ž˜ํ–ˆ์œผ๋ฉฐ, JavaScript์™€ TypeScript ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ์ฐจ์„ธ๋Œ€ ๋นŒ๋“œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. Vite๋Š” ๊ธฐ์กด ๋ฒˆ๋“ค๋Ÿฌ์™€ ๋‹ฌ๋ฆฌ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํŠน์ง•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.๋น ๋ฅธ ์„œ๋ฒ„ ์‹œ์ž‘: Vite๋Š” ES ๋ชจ๋“ˆ์„ ํ™œ์šฉํ•˜์—ฌ ๊ธฐ์กด์˜ ๋ฒˆ๋“ค๋ง ๊ณผ์ • ์—†์ด ๊ฐœ๋ฐœ ์„œ๋ฒ„๋ฅผ ์ฆ‰์‹œ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.๋น ๋ฅธ HMR(Hot Module Replacement): ์ฝ”๋“œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ˜์˜ํ•ฉ๋‹ˆ๋‹ค.. 2025. 1. 26.