๐Ÿ“บ Front End/- React, Next.js

[๋ฆฌ์•กํŠธ ๋ถ„์„ํ•˜๊ธฐ] Create-React-App์œผ๋กœ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•ด๋ณด์ž.

Wonit 2020. 7. 20. 00:25

 

์ง€๋‚œ ์‹œ๊ฐ„์—๋Š” ์™œ ์šฐ๋ฆฌ๋Š” ๋ฆฌ์•กํŠธ์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”์ง€์™€ Create-React-App์ด ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋‹ค. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” create-reacat-app์œผ๋กœ ์‹ค์ œ๋กœ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•ด๋ณด์ž.

ํ•ด๋‹น ๊ฒŒ์‹œ๋ฌผ์˜ ์†Œ์Šค์ฝ”๋“œ๋Š” ๋ฆฌ์•กํŠธ ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์˜ ์ด๋ฏธ์ง€๋ฅผ ๊ฐ€์ ธ๋‹ค ์“ด ๊ธ€์ž…๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ๋Š” 4 ๊ฐ€์ง€์˜ ๋ฐฉ์‹์œผ๋กœ Create-React-App์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

  • NPM
  • NPX
  • Yarn
  • CDN (react)

๋ณ„๋กœ ์–ด๋ ต์ง€ ์•Š์œผ๋ฏ€๋กœ ์ฐจ๋ก€๋Œ€๋กœ ๋ด๋ณด์ž.

 

์ด๋“ค์ค‘์— ๊ผญ ๋ฌด์—‡์„ ์จ์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์€ ์—†๋‹ค. ๊ทธ๋ƒฅ ์›ํ•˜๋Š” ๋„๊ตฌ๋กœ ์‹œ์ž‘์„ ํ•˜๋ฉด๋œ๋‹ค.

 

npm์œผ๋กœ create-react-app ์‹œ์ž‘ํ•˜๊ธฐ

 

npm install -g 

๋Š” pc์— globalํ•˜๊ฒŒ ์„ค์ •ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

npx๋กœ create-react-app ์‹œ์ž‘ํ•˜๊ธฐ

 

npm๊ณผ ๋‹ค๋ฅธ ์ ์€ pc ์ „์—ญ์— ํ•ด๋‹น ๊ธฐ๋Šฅ์„ enableํ•˜์ง€ ์•Š๊ณ , 1ํšŒ์„ฑ์œผ๋กœ create-react-app์ด๋ผ๋Š” ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Yarn์œผ๋กœ create-react-app ์‹œ์ž‘ํ•˜๊ธฐ

CDN์œผ๋กœ  React ์‹œ์ž‘ํ•˜๊ธฐ

CDN์€ html์— ๋‹จ์ง€ ํƒœ๊ทธ๋งŒ ์ถ”๊ฐ€ํ•˜๋ฉด ๊ทธ์™€ ๊ด€๋ จ๋œ ์˜์กด์„ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.