๐Ÿคฉ 1. Angular 8

@winuss ยท July 22, 2019 ยท 8 min read

Angular 8๋ฒ„์ „์ด ์ถœ์‹œ ๋˜์—ˆ๋‹ค. ์ด๋ฒˆ ๋ฒ„์ ผ์€ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ตฌ๋™ ์‹œ๊ฐ„์„ ๋‹จ์ถ•์‹œํ‚ค๊ณ , CLI์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ƒˆ๋กœ์šด API๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ํ•„์ž๋Š” ๊ธฐ์กด Angular 6์—์„œ 8๋ฒ„์ „์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ๋ฅผ ํ•˜์˜€๋Š”๋ฐ, ์„ฑ๋Šฅ์ ์ธ ๋ฉด์—์„œ ๋งŽ์ด ํ–ฅ์ƒ์ด ๋œ ๊ฒƒ์„ ์ฒด๊ฐ์ ์œผ๋กœ๋„ ๋Š๋‚„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

Update

update.angular.io๋ฅผ ๋ฐฉ๋ฌธํ•ด ์ž์„ธํ•œ ์ •๋ณด์™€ ๊ฐ€์ด๋“œ๋ฅผ ์ฐธ๊ณ  ํ•˜์ž.

ng update @angular/cli @angular/core

Differential loading

์ฐจ๋“ฑ ๋กœ๋”ฉ(Differential loading)์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ž์‹ ์˜ ๋Šฅ๋ ฅ์— ๋”ฐ๋ผ ์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ์›์‹œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์„ ํƒํ•˜๋Š” ๊ณผ์ •์„ ๋งํ•œ๋‹ค. ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ Angular 8์€ ์ตœ์‹  ๋นŒ๋“œ(es2015)์™€ ์›์‹œ ๋นŒ๋“œ(es5)๋ฅผ ๊ฐ๊ฐ ์ˆ˜ํ–‰ํ•˜๊ณ  ์‚ฌ์šฉ์ž๊ฐ€ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋กœ๋“œํ–ˆ์„ ๋•Œ, ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ €๋Š” ์ž๋™์œผ๋กœ ํ•„์š”ํ•œ ๋ฒˆ๋“ค์„ ์„ ํƒํ•  ๊ฒƒ์ด๋‹ค.

ng update ๋ช…๋ น์–ด๋ฅผ ์“ฐ๋ฉด Angular๋Š” ์ฐจ๋“ฑ ๋กœ๋”ฉ์„ ์œ„ํ•ด ํ”„๋กœ์ ํŠธ์˜ tsconfig.json๋ฅผ ์—…๋ฐ์ดํŠธ ํ•œ๋‹ค. Angular CLI๋Š” ์ฐจ๋“ฑ ๋กœ๋”ฉ์˜ ์ˆ˜ํ–‰ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๊ธฐ ์œ„ํ•ด tsconfig.json ํŒŒ์ผ์˜ target ํ”„๋กœํผํ‹ฐ์— ๋ช…์‹œ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฒ„์ ผ์„ ํ™•์ธํ•œ๋‹ค.

{
  "compilerOptions": {
  โ€ฆ
  "module": "esnext",
  "moduleResolution": "node",
  โ€ฆ
  "target": "es2015",
  โ€ฆ
},

target ํ”„๋กœํผํ‹ฐ๊ฐ€ es2015๋กœ ์„ค์ •๋˜์—ˆ์„ ๋•Œ, Angular๋Š” ๋‘ ๊ฐœ์˜ ๋ฒˆ๋“ค์„ ์ƒ์„ฑํ•˜๊ณ  ๊ฐ๊ฐ ์ด๋ฆ„์„ ๋ถ€์—ฌํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ €๋Š” ๋Ÿฐํƒ€์ž„์‹œ์— script ํƒœ๊ทธ์˜ ์†์„ฑ์„ ํ†ตํ•ด ์–ด๋–ค ๋ฒˆ๋“ค์„ ๋กœ๋“œํ• ์ง€ ๊ฒฐ์ •ํ•œ๋‹ค.

//์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
<script type="module" src="โ€ฆ">

//์›์‹œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
<script nomodule src="โ€ฆ">

์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ดˆ๊ธฐ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ๋ฅผ 40kB ์ด์ƒ ์ ˆ๊ฐ ํ–ˆ๊ณ , ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ๋„ ์–ผ๋งˆ๋‚˜ ์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ–ˆ๋Š”๊ฐ€์— ๋”ฐ๋ผ 7-20% ์ •๋„์˜ ์ ˆ๊ฐ ํšจ๊ณผ๋ฅผ ๋ณด์•˜๋‹ค๋Š” ์ด์•ผ๊ธฐ๊ฐ€ ๋‚˜์™”๋‹ค๊ณ  ํ•œ๋‹ค.

01

์ž์„ธํ•œ ๋‚ด์šฉ์€ ์—ฌ๊ธฐ๋ฅผ ์ฐธ๊ณ ํ•˜์ž.

Route Configurations use Dynamic Imports

Angular๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ผ๋ถ€๋ฅผ ๋ผ์šฐํ„ฐ๋ฅผ ์ด์šฉํ•œ ์ง€์—ฐ ๋กœ๋”ฉ ๊ธฐ๋ฒ•์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ฌ ๊ฒƒ์„ ๊ถŒ์žฅํ•œ๋‹ค. ์ด๋Š” ๋ผ์šฐํŠธ ์„ค์ •์˜ loadChildren ํ”„๋กœํผํ‹ฐ๋ฅผ ํ†ตํ•ด ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, 8 ๋ฒ„์ „์—์„œ๋Š” ๋™์  ์ž„ํฌํŠธ์˜ ์‚ฐ์—… ํ‘œ์ค€์œผ๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ๋‹ค.

//๊ธฐ์กด ๋ฐฉ์‹
{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

// Angular 8 ๋™์  ์ž„ํฌํŠธ ๋ฐฉ์‹
{path: `/admin`, loadChildren:
 () => import(`./admin/admin.module`).then(m => m.AdminModule)}

์ด๋Š” VSCode ๊ฐ™์€ ํˆด์—์„œ ํ•ด๋‹น ์ž„ํฌํŠธ ๊ตฌ๋ฌธ์„ ์ดํ•ดํ•˜๊ณ  ๊ต์ •ํ•ด์ค„ ์ˆ˜ ์žˆ๋Š” ์—๋””ํ„ฐ์˜ ์ง€์›์„ฑ์„ ๋†’์ผ ๊ฒƒ์ด๋‹ค.

ng update ๋ช…๋ น์–ด๋ฅผ ์“ฐ๋ฉด Angular๋Š” ์ž๋™์œผ๋กœ ํ•ด๋‹น ๊ตฌ๋ฌธ์„ ๋ณ€๊ฒฝํ•œ๋‹ค.

Builder APIs in the CLI

Angular Schematics๊ฐ€ ng new, ng generate, ng add, ng update์™€ ๊ฐ™์€ ๋ช…๋ น์–ด์— ์ ‘๊ทผํ•˜๋“ฏ, ์ƒˆ๋กœ์šด Builder API๋Š” ng build์™€ ng test ๊ทธ๋ฆฌ๊ณ  ng run์— ์ ‘๊ทผํ•ด ๋นŒ๋“œ๋‚˜ ๋ฐฐํฌ ๊ณผ์ •์„ ํ›„ํ‚นํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

๊ณต์‹ API ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ .

CLI์˜ Workspace API

๊ธฐ์กด์— Schematics๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด angular.json์„ ์—ด์–ด ์ˆ˜๋™์œผ๋กœ ์ž‘์—… ์ €์žฅ์†Œ ์„ค์ •์„ ์ˆ˜์ •ํ•ด์•ผ ํ–ˆ๋‹ค. Angular 8์€ angular.json์„ ๋” ์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” API๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

Workspace API์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์„ค๋ช…์€ ์—ฌ๊ธฐ๋ฅผ ์ฐธ๊ณ 

Web Worker ์ง€์›

Web Workers๋Š” cpu ์ž์›์„ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์†๋„๋ฅผ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ๋ฐฉ์•ˆ์ด๋‹ค. Web Workers๋Š” ์ด๋ฏธ์ง€๋‚˜ ๋น„๋””์˜ค ์ฒ˜๋ฆฌ๋ฅผ ๋ฐฑ๊ทธ๋ผ์šด๋“œ ์Šค๋ ˆ๋“œ๋กœ ์˜ฎ๊ธธ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค. angular.io ๊ณต์‹ํ™ˆ๋„ ๋‚ด๋ถ€์˜ ๊ฒ€์ƒ‰๊ณผ ์ƒ‰์ธ์„ ์œ„ํ•ด Web Workers๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค๊ณ  ํ•œ๋‹ค.

์ด์ œ CLI๋กœ Web Workers๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๊ณ , worker๋ฅผ ์ƒ์„ฑํ•˜๋ ค๋ฉด ๋‹ค์Œ ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

ng generate webWorker my-worker

web worker๋ฅผ ์ƒ์„ฑํ–ˆ๋‹ค๋ฉด, ์›๋ž˜ ์‚ฌ์šฉํ•˜๋˜ ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค. CLI๊ฐ€ web worker๋ฅผ ์•Œ์•„์„œ ๋ฒˆ๋“คํ™” ํ•˜๊ณ  ์ •๋ฆฌํ•ด์ค€๋‹ค.

const worker = new Worker(`./my-worker.worker`, { type: `module` });

๋” ์ž์„ธํ•œ Angular CLI์˜ Web Workers์— ๋Œ€ํ•ด์„œ ์•Œ๋ ค๋ฉด ์—ฌ๊ธฐ๋ฅผ ์ฐธ๊ณ .

Deprecation

Angular๋Š” ๊ณต๊ฐœ API๊ฐ€ n + 2 ๋ฒ„์ ผ์„ ์ง€์›ํ•˜๋„๋ก ํ•œ๋‹ค. ์ฆ‰ 8.1 ๋ฒ„์ ผ์—์„œ ํ๊ธฐ ์ฒ˜๋ถ„๋  ๊ธฐ๋Šฅ์€ 9 ๋ฒ„์ ผ๊ณผ 10 ๋ฒ„์ ผ๊นŒ์ง€๋Š” ์ž‘๋™ํ•  ๊ฒƒ์ด๋ผ๋Š” ์ด์•ผ๊ธฐ์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฒ„์ ผ 8์—์„œ platform-webworker๋ฅผ ํ๊ธฐ ํ•˜๊ฒŒ ๋œ๋‹ค.

Angular์—์„œ ํ๊ธฐ, ์ œ๊ฑฐ๋œ ๊ธฐ๋Šฅ ๊ด€๋ จํ•˜์—ฌ ์ •๋ฆฌ๋œ ๋ฆฌ์ŠคํŠธ๋ฅผ ๋ณด๋ ค๋ฉด Deprecation Guide๋ฅผ ์ฐธ๊ณ ํ•˜์ž.

Ivy & Bazel

Ivy๋ฅผ 8.0 ๋ฒ„์ „์—์„œ ํ”„๋ฆฌ๋ทฐ ์˜ต์…˜ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

Angular Ivy

Angular Ivy๋Š” ๊ฐ€์ƒ DOM์˜ ํ•œ๊ณ„๋ฅผ ์ง€๋‹Œ ์ด์ „ ๋ Œ๋”๋Ÿฌ์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด ์กŒ๋‹ค. Ivy๋Š” ์›๋ณธ๋ณด๊ธฐ ์—”์ง„์˜ ํฌ๊ธฐ๊ฐ€ ์ž‘๊ณ , ๋น ๋ฅด๊ณ  ๊ฐ„๋‹จํ•˜๋ฉฐ, Tree Shaking์˜ ์žฅ์ ๊ณผ Incremental DOM์˜ ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ ๊ณต๊ฐ„์„ ์ค„์ธ๋‹ค. Ivy๋ฅผ ํ†ตํ•ด ๋ Œ๋”๋งํ•˜๋Š” ๋™์•ˆ ๋ฉ”๋ชจ๋ฆฌ ํ• ๋‹น์„ ์ตœ์†Œํ™”ํ•˜๊ณ  ์ฆ๋ถ„ ๋นŒ๋“œ๋ฅผ ํ—ˆ์šฉํ•˜๋Š” ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์˜ ํŒŒ์ผ์„ ์ปดํŒŒ์ผํ•˜์—ฌ ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ์ œํ•œ๋œ ์žฅ์น˜์—์„œ ์•ฑ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ ์‹œํ‚ค๋„๋ก ์„ค๊ณ„๋˜์—ˆ๋‹ค. ์ฆ‰, Ivy๋Š” ์ปดํŒŒ์ผ ํ”„๋กœ์„ธ์Šค๋ฅผ ๋‹จ์ˆœํ™”ํ•˜์—ฌ ์••์ถ•ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋” ์ž‘๊ณ  ๋” ๋งŽ์€ ์›์ž ํ•จ์ˆ˜๋กœ ๋‚˜๋ˆ„๊ธฐ ๋•Œ๋ฌธ์— Ivy๋Š” ์ด์ „ ๋ Œ๋”๋Ÿฌ์— ๋น„ํ•ด Tree Shaking์— ๋” ์ตœ์ ํ™”๋˜์–ด ์žˆ๋‹ค.

Ivy enable

tsconfig.app.json์„ ํŽธ์ง‘ํ•˜์—ฌ Ivy๋ฅผ ์„ ํƒํ•˜๊ณ  angularComplierOption ์„น์…˜์„ ์ถ”๊ฐ€ํ•˜๊ณ  enableIvy๋ฅผ true๋กœ ์„ค์ •ํ•œ๋‹ค. ์ƒˆ๋กœ์šด Angular CLI ํ”„๋กœ์ ํŠธ์˜ ๊ฒฝ์šฐ, newscript๋ฅผ ์‹คํ–‰ํ•  ๋•Œ --enableIvy ํ”Œ๋ž˜๊ทธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

ng build --prod

.....
chunk {1} main-es2015.xxxxxxx.js 000 kB [initial] [rendered]
.....

๊ทธ ๊ฒฐ๊ณผ, ๋ฒˆ๋“ค ํฌ๊ธฐ์˜ 15%๋กœ ์ค„์–ด๋“ค์—ˆ๋‹ค๋ฉด ์ด๋Š” ์›น ์‚ฌ์ดํŠธ ๋กœ๋”ฉ ์‹œ๊ฐ„์ด 15% ๋” ๋นจ๋ผ์ง์„ ์˜๋ฏธํ•œ๋‹ค.

์ฐธ๊ณ  (blog.angularindepth.com - Angular Ivy)

@winuss
Hello :) Developer notes!