๐Ÿฑ #3 React.js - Node.js ์„ค์น˜

๋ฐ•์ค€์„ยท2022๋…„ 10์›” 18์ผ
1

React

๋ชฉ๋ก ๋ณด๊ธฐ
4/13
post-thumbnail

๐Ÿงฉ Node.js ์„ค์น˜

๋จผ์ € React๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ์ „์— Node.js๋ฅผ ์„ค์น˜ํ•ด ํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•ด์ค˜์•ผ ํ•œ๋‹ค.

์„ค์น˜๋ฐฉ๋ฒ• ๋ถ€ํ„ฐ ์•Œ์•„๋ณด์ž.

  1. Node.js ์„ค์น˜ ์‚ฌ์ดํŠธ๋ฅผ ๋จผ์ € ๋“ค์–ด๊ฐ„๋‹ค.

  1. 16.18.0 LTS๋ฅผ ๋ˆŒ๋Ÿฌ recommanded for most users๋ฅผ ์„ค์น˜ํ•œ๋‹ค. ๋‹ค ์„ค์น˜๊ฐ€ ๋˜์—ˆ๋‹ค๋ฉด ์„ค์น˜๊ฐ€ ๋˜์–ด์žˆ๋Š” ์ง€ ํ™•์ธ์„ ํ•ด์•ผํ•œ๋‹ค. ํ™•์ธ ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ cmd์ฐฝ์„ ์ผœ์„œ node -v๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•œ ํ›„ node.js ๋ฒ„์ „์ด ๋œจ๋ฉด ์„ค์น˜๊ฐ€ ์™„๋ฃŒ ๋œ๊ฒƒ์ด๋‹ค.

  1. ์ดํ›„ cmd์ฐฝ์—์„œ ์›ํ•˜๋Š” ํŒŒ์ผ์˜ ๊ฒฝ๋กœ๋ฅผ ๋“ค์–ด๊ฐ„๋‹ค.

    ๋“ค์–ด๊ฐ€๋Š” ๋ฐฉ๋ฒ•์€ cd ํŒŒ์ผ๋ช…์„ ์ž…๋ ฅํ•˜๋ฉด ํ•ด๋‹น ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•œ๋‹ค.

  2. ์›ํ•˜๋Š” ๊ฒฝ๋กœ๋ฅผ ๋“ค์–ด๊ฐ”๋‹ค๋ฉด. cmd์ฐฝ์— npx create-react-app ํ”„๋กœ์ ํŠธํŒŒ์ผ๋ช… ์„ ์ž…๋ ฅํ•˜๋ฉด ๋ฆฌ์•กํŠธ๋ฅผ ์„ค์น˜ํ•˜๋Š”๋ฐ ์žˆ์–ด์„œ ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ์•Œ์•„์„œ ์„ค์น˜ํ•ด์ค€๋‹ค.

์ดํ›„ ๋‹ค์šด๋กœ๋“œ๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด happy hacking!์ด๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ๋–ด๋‹ค๋ฉด ์™„๋ฃŒ๋œ๊ฒƒ์ด๋‹ค.

  1. ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“  ๊ฒฝ๋กœ๋กœ ๊ฐ€์„œ code .๋ฅผ ์ž…๋ ฅํ•œ๋‹ค. ๊ทธ๋Ÿผ vscode๊ฐ€ ์ผœ์ง„๋‹ค.

    vscode๊ฐ€ ์ผœ์ง€๋ฉด App.js๋กœ ๋“ค์–ด๊ฐ€ Terminal ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ Terminal์ฐฝ์„ ๋„์šฐ๊ณ 

    Terminal ์ฐฝ์— npm start๋ฅผ ์ž…๋ ฅํ•˜๋ฉด localhost:3000๊ฐ€ ์ƒ๊ธฐ๋ฉด์„œ ๋ฆฌ์•กํŠธ๊ฐ€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์„ธํŒ…ํ•ด์ค€๋‹ค.
profile
์•ˆ๋…•ํ•˜์„ธ์š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค. ๊ธ€์„ ์ด์ „ ์ค‘์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€