๐Ÿ”ฏ create-react-app(1) ๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋ฌธ๋ฒ• ์ง€์›

4226 ๋‹จ์–ด CRAReactCRA

๋ฆฌ์•กํŠธ๋ฅผ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ ํ•ญ์ƒ cra(creat react app)ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค.

ํ•˜์ง€๋งŒ ๋ฌธ๋“ ๋ฌด์ง€์„ฑ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š”๊ฑด ์•„๋‹Œ๊ฐ€ ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด ์˜ค๋Š˜์€ cra์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ณ ์ž ํ•œ๋‹ค.

์‚ดํŽด๋ณผ ๋‚ด์šฉ์ด ๋งŽ์œผ๋‹ˆ ๋‹จ๊ณ„๋ณ„๋กœ ์•Œ์•„๋ณด๊ณ ์ž ํ•œ๋‹ค.

์˜ค๋Š˜์€ ์ผ๋‹จ CRA์—์„œ ์ง€์›ํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋ฌธ๋ฒ• ์ง€์›์— ๊ด€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ๋‹ค.

CRA(create-react-app)

react project๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ์— ์›นํŒฉ ๋ฐ ๋ฐ”๋ฒจ ์„ค์ • ๋“ฑ ๊ธฐ๋ณธ์ ์ธ ์„ค์ •๋“ค์„ ๊ฐ–์ถ˜์ฑ„๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ํŒจํ‚ค์ง€์ด๋‹ค.

์„ค์น˜๋ฐฉ๋ฒ•
npx create-react-app [project name]
npm create react-app [project name]
yarn create react-app [project name]

CRA ํ”„๋กœ์ ํŠธ๋Š” ์ง€์› ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•œ ์„ค์ • ๋ฐ ๋ฌธ๋ฒ•์  ์ง€์› ํŠน์ง•์ด ์–ด๋–ค์ง€ ์‚ดํŽด๋ณด์ž.

์ง€์› ๋ธŒ๋ผ์šฐ์ € ๋ฐ ํŠน์ง•

์ง€์› ๋ธŒ๋ผ์šฐ์ €
๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›(ํ˜ธํ™˜)์ด ๋˜์ง€๋งŒ Internet Explorer 9,10,11์—์„œ๋Š” ์ง€์›์ด ์•ˆ๋˜๋ฏ€๋กœ react-app-polyfill์„ ์‚ฌ์šฉํ•  ๊ฒƒ์„ ๊ถŒ์žฅํ•˜๊ณ  ์žˆ๋‹ค.

(์ถ”ํ›„์— ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— polyfill์„ ์ ์šฉํ•˜๋Š”๋ฐ ์ž‘์—…์„ ํ•ด๋ด์•ผ๊ฒ ๋‹ค.)

๋ฌธ๋ฒ• ์ง€์›
cra ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ตœ์‹  ๋ฌธ๋ฒ• ๋“ฑ์„ ์ง€์›ํ•˜๊ณ  ์žˆ๋‹ค.

  • ์ง€์ˆ˜ ์—ฐ์‚ฐ์ž(ES2016)
  • Async/Await(ES2017)
  • Rest/Spread ์—ฐ์‚ฐ์ž(ES2018)
  • Dynamic import
  • ํด๋ž˜์Šค ํ•„๋“œ ๋ฐ ์ •์  ํ”„๋กœํผํ‹ฐ
  • JSX,Flow,TypeScript

CRA ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ polyfill(ํ•˜์œ„๋ฌธ๋ฒ•์œผ๋กœ ๋ณ€ํ™˜)์„ ์ง€์›ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ํ•„์š”ํ•˜๋‹ค๋ฉด(๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•ด๋‹น ๋ฌธ๋ฒ•์„ ์ง€์›ํ•˜๋Š”์ง€ ์—ฌ๋ถ€) ์ ์ ˆํžˆ polyfill์„ ํ•ด์ค˜์•ผํ•œ๋‹ค.

์ง€์› ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•œ ๊ตฌ์„ฑ

์ง€์›ํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•œ ์„ค์ •์€ package.json์˜ browserslist์— ๋ช…์‹œ๋˜์–ด์žˆ๋‹ค.

browserslist๋ž€ ์ง€์›๋˜๋Š” ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋ช…์‹œํ•จ์œผ๋กœ์จ ์ง€์› ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ๊ธฐ๋Šฅ์ด๋‹ค.
์ด๋ฅผ ์„ค์ •ํ•ด์ฃผ๋Š” ์ด์œ ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ตœ์‹  ๋ฌธ๋ฒ•์ด ์ง€์›๋˜์ง€ ์•Š์€ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ทธ๋ฃนํ™”ํ•ด ํƒ€๊ฒŸํŒ…ํ•˜์—ฌ ๊ด€๋ จ ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•ด์„œ ๋ฒˆ๋“ค๋ง์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
(๋ธŒ๋ผ์šฐ์ €์— ๋”ฐ๋ฅธ ๋ฒˆ๋“ค๋ง์€ ์›น์˜ ์„ฑ๋Šฅ ๋ฐ ์ตœ์ ํ™”์— ๋„์›€์ด ๋œ๋‹ค.)

CRA package.json

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

ํ•ด๋‹น ์„ค์ •์— ๋”ฐ๋ผ ์ง€์›๋˜๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์„ค์ •์ด ๋˜์–ด์žˆ๋‹ค.

production์„ buildํ•˜์˜€์„ ๋•Œ ์ง€์›๋˜๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•œ ์„ค์ •์ด๊ณ 
development๋Š” ๊ฐœ๋ฐœํ•  ๋•Œ์— ์ง€์›๋˜๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•œ ์„ค์ •์ด๋‹ค.

ํ•ด๋‹น ์„ค์ •์„ ๋ฐ”๊พธ๊ณ  ์‹ถ๋‹ค๋ฉด node_modules/.cache๋ฅผ ์ œ๊ฑฐํ•œ๋’ค์— ๋ฐ”๊ฟ”์•ผํ•œ๋‹ค.
(babel-loader์—์„œ ๋ณ€ํ™”๋ฅผ ์ธ์‹ํ•˜์ง€ ๋ชปํ•˜๋„๋ก ์„ค์ •์ด ๋˜์žˆ๊ธฐ ๋•Œ๋ฌธ)

์œ„ ์„ค์ •์— ๋Œ€ํ•œ ์„ค๋ช…์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • ">0.2%" | ์ „์„ธ๊ณ„ ์ ์œ ์œจ 0.2% ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•˜์—ฌ ์ง€์›์„ ํ•˜๊ฒ ๋‹ค.

  • "not dead" | ์ง€์›์ด ์ค‘๋‹จ๋œ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๊ฒ ๋‹ค.

  • "not op_mini all" | opera-mini๋Š” ์ง€์›ํ•˜์ง€ ์•Š๊ฒ ๋‹ค.

  • "last 1 chrome version" | ์ตœ์‹  ํฌ๋ก  ๋ธŒ๋ผ์šฐ์ € 1๊ฐœ ๋ฒ„์ „์„ ์ง€์›ํ•˜๊ฒ ๋‹ค.

  • "last 1 firefox version" | ์ตœ์‚ฐ ํŒŒ์ด์–ดํญ์Šค ๋ธŒ๋ผ์šฐ์ € 1๊ฐœ ๋ฒ„์ „์„ ์ง€์›ํ•˜๊ฒ ๋‹ค.

  • "last 1 safari version" | ์ตœ์‹  ์‚ฌํŒŒ๋ฆฌ ๋ธŒ๋ผ์šฐ์ € 1๊ฐœ ๋ฒ„์ „์„ ์ง€์›ํ•˜๊ฒ ๋‹ค.

Conclusion

CRA๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•œ ์„ค์ •์ด ๋Œ€๋ถ€๋ถ„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋˜์–ด์žˆ์ง€๋งŒ IE์˜ ๊ฒฝ์šฐ ์ง€์›์ด ์•ˆ๋˜๋ฏ€๋กœ ํ•ด๋‹น ๊ฒฝ์šฐ์— ๋Œ€๋น„ํ•œ poly fill์„ ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๋Š” ์—ฐ์Šต์„ ํ•ด๋ด์•ผ๊ฒ ๋‹ค.

๋˜ํ•œ ์ตœ์‹  ๋ฌธ๋ฒ•์— ๋Œ€ํ•œ ํด๋ฆฌํ•„์ด ์•ˆ๋˜๋ฏ€๋กœ ๋ธŒ๋ผ์šฐ์ €์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ตœ์‹  ๋ฌธ๋ฒ• ์ง€์›์˜ ์œ ๋ฌด์— ๋”ฐ๋ผ ํด๋ฆฌํ•„์„ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์•Œ์•„๋‘๋„๋ก ํ•ด์•ผ๊ฒ ๋‹ค.

๋‹ค์Œ์— ์ด์–ด์„œ CRA์— ๋Œ€ํ•˜์—ฌ ๋” ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค

-์ด์ƒ-

Reference

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ