๐Ÿ˜Ž Angular & Angular Material 3์ผ๋งŒ์— ๋ฝ€๊ฐœ๊ธฐ - 1. Angular์˜ ์ปจ์…‰

addiescodeยท2020๋…„ 8์›” 15์ผ
4

(์ฐธ๊ณ ๋กœ ์ œ ์–ด๋ฒค์ ธ์Šค ํžˆ์–ด๋กœ ์ตœ์• ๋Š” ์Šค์นผ๋ › ์œ„์น˜์ž…๋‹ˆ๋‹ค ๐Ÿ˜)

์‹ ์ž… ํ”„๋ก ํŠธ์—”๋“œ ์ฃผ๋‹ˆ์–ด๋กœ์„œ ์ฒ˜์Œ์œผ๋กœ ๋ฐ›์€ ๊ณผ์ œ๋Š”,
Angular ๊ณต์‹ ๋ฌธ์„œ์— ์žˆ๋Š” Tour of Heroes Application ๋งŒ๋“ค๊ธฐ, ๊ทธ๋ฆฌ๊ณ  Angular Materail(Material UI ์ ์šฉํ•˜๊ธฐ)์˜€๋‹ค.

์šฐ๋ฆฌ ํšŒ์‚ฌ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ํฅ๋ฏธ์žˆ๋Š” ์–ธ์–ด๋กœ ๊ฐœ๋ฐœํ•˜๊ฒŒ ํ•ด์ฃผ๊ธฐ๋•Œ๋ฌธ์—
๊ธฐ์กด ํ”„๋กœ์ ํŠธ๋ฅผ ๋ณด๋‹ˆ React, Angular, Vue๋ฅผ ๋‹ค ์“ฐ๊ณ  ์žˆ์—ˆ๋‹ค.

์˜ˆ์ „ ๊ธฐ์—…ํ˜‘์—…์„ ํ–ˆ์„ ๋‹น์‹œ ๊ฐœ๋ฐœ ํŒ€์žฅ๋‹˜์ด ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž๋Š” 2-3๋…„ ๋™์•ˆ์€ ์™„์ „ํžˆ ๊ฐœ๋ฐœ์— ๋ชฐ์ž…ํ•˜๋Š” ๊ฒฝํ—˜์ด ํ•„์š”ํ•˜๋‹ค๊ณ , ๊ทธ๋ ‡๊ฒŒ ์ฃผ๋‹ˆ์–ด ์‹œ์ ˆ์„ ๋ณด๋‚ด๊ณ  ๋‚˜๋ฉด ํ™•์‹คํžˆ ๋‹จ๊ณ„๊ฐ€ ๋‹ฌ๋ผ์ง€๋Š” ๊ฑธ ๋Š๋ผ๊ฒŒ ๋œ๋‹ค๊ณ  ๊ฐœ์ธ์ ์ธ ๊ฒฝํ—˜์„ ์–˜๊ธฐํ•ด์ฃผ์‹  ์ ์ด ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ž…์‚ฌ ํ•˜์ž๋งˆ์ž 2-3๋‹ฌ๋™์•ˆ์€ Vue.js๋‚˜ AngularJs ๊ฐ™์€ ์ƒˆ๋กœ์šด ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๋น ๋ฅด๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” ๊ฑธ ์ถ”์ฒœํ•ด์ฃผ์…จ๋Š”๋ฐ, ์ด๋•Œ ์ƒ๊ฐ์ด ๋‚˜์„œ ์ข‹์€ ๊ธฐํšŒ๋ผ๊ณ  ์ƒ๊ฐํ•˜๊ณ  ์งง์€ ์‹œ๊ฐ„์•ˆ์— ์ƒˆ๋กœ์šด ํ”„๋ ˆ์ž„์›Œํฌ ๋„์žฅ๊นจ๊ธฐ๋ฅผ ์‹œ๋„ํ•ด๋ดค๋‹ค.

๊ฒฐ๋ก ์€.. ๋ˆˆ๋„ ์•„ํ”„๊ณ , ์ŠคํŠธ๋ ˆ์Šค๋„ ๋ฐ›๊ณ , ์ฒด๋ ฅ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜์ง€๋งŒ (์—ฌ์ „ํžˆ!)
๋ธ”๋กœ๊ทธ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์ง€๊ธˆ์— ์™€์„  ์ •๋ง ๋ฟŒ๋“ฏํ•œ ๊ฒฝํ—˜์œผ๋กœ ๋‚จ์€ ๊ฒƒ ๊ฐ™๋‹ค.

์‹œ๋„ํ•ด๋ดค๋˜ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ด๋ณด๊ณ ์žํ•œ๋‹ค.

Angular์˜ ํŠน์ง•๋“ค

HTML, Typescript๋กœ ์ฝ”๋“œ ์ž‘์„ฑ

Angular๋Š” HTML๊ณผ Typescript๋กœ ํด๋ผ์ด์–ธํŠธ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ”Œ๋žซํผ/ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค. ์ฆ‰, ํ™•์žฅ์ž๊ฐ€ .ts์™€ .html๋กœ๋งŒ ์ด๋ฃจ์–ด์ง„ ํŒŒ์ผ์„ ์ž‘์„ฑํ•˜๊ฒŒ๋œ๋‹ค.

Angular concept

Angular ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ตฌ์„ฑ์š”์†Œ ์ค‘ ํ•˜๋‚˜์ธ NgModule์€ ๋น„์Šทํ•œ ๊ธฐ๋Šฅ์„ ๊ฐ€์ง„ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ํ•˜๋‚˜๋กœ ๋ฌถ์–ด ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ํ•ด์ค€๋‹ค. ์ฆ‰, Angular์—์„œ ๋ชจ๋“ˆ์„ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์€ ์ค‘์š”ํ•œ ์ปจ์…‰์ด๋‹ค.

Angular์—์„œ์˜ Module

Angular ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ตœ์ƒ์œ„ ๋ชจ๋“ˆ์€ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ(๋ถ€ํŠธ์ŠคํŠธ๋ž˜ํ•‘: ์™ธ๋ถ€ ์—”ํ‹ฐํ‹ฐ์˜ ๋„์›€์œผ๋กœ ์ˆœํ™˜ ์ข…์†์„ฑ์„ ๊นจ๋Š” ๋ฐฉ๋ฒ•, ์ดˆ๊ธฐ ํ”„๋กœ์„ธ์Šค๋ฅผ ์„ค์ •ํ•˜๋Š” ์—ญํ• )์„ ๋‹ด๋‹นํ•˜๊ณ ,

์ด ๋ชจ๋“ˆ ์™ธ์— ๋” ํ•„์š”ํ•œ ๋ชจ๋“ˆ์„ ์ •์˜ํ•ด ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ๋Šฅ ๋ชจ๋“ˆ(feature module)์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค.

Angular์—์„œ์˜ component, template, ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ

์ปดํฌ๋„ŒํŠธ๋Š” ๋ทฐ๋ฅผ ์ •์˜ํ•˜๊ณ , ์–ด๋–ค ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œ์‹œํ•  ์ง€ ์ง€์ •ํ•œ๋‹ค.
์ปดํฌ๋„ŒํŠธ๋Š” ์„œ๋น„์Šค๋ฅผ ํ™œ์šฉํ•ด ๋ทฐ์— ์ง์ ‘์ ์œผ๋กœ ์—ฐ๊ด€์ด ์žˆ์ง€ ์•Š์€ ๊ธฐ๋Šฅ์ธ ๊ฒฝ์šฐ ์ด๋Ÿฐ ๋กœ์ง์€ ์„œ๋น„์Šค์— ์ •์˜ํ•ด ์ปดํฌ๋„ŒํŠธ์— ์˜์กด์„ฑ์œผ๋กœ ์ฃผ์ž…ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํ˜•์‹์œผ๋กœ ์ฝ”๋“œ๋ฅผ ๋ชจ๋“ˆ ๋‹จ์œ„๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋Š” ํด๋ž˜์Šค์™€ ํ…œํ”Œ๋ฆฟ์œผ๋กœ ๊ตฌ์„ฑ๋˜๋Š”๋ฐ, ์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ์ดํ„ฐ์™€ ๋กœ์ง์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ๊ณ  ํ…œํ”Œ๋ฆฟ์€ ํ™”๋ฉด์— ํ‘œ์‹œํ•  HTML์„ ์ •์˜ํ•œ๋‹ค.

Angualr๋Š” ๋ทฐ๊ฐ€ ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๊ธฐ ์ „์— ํ…œํ”Œ๋ฆฟ์— ์‚ฌ์šฉ๋œ ๋””๋ ‰ํ‹ฐ๋ธŒ์™€ ๋ฐ”์ธ๋”ฉ ๋ฌธ๋ฒ•์„ ๋ชจ๋‘ ์ฒดํฌํ•ด HTML ์—˜๋ฆฌ๋จผํŠธ์™€ DOM์„ ๋ณ€ํ˜•ํ•œ๋‹ค. ์ฆ‰, ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ์ดํ„ฐ๋ฅผ HTML ๋ฌธ์„œ์— ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜, ์‚ฌ์šฉ์ž์˜ ๋™์ž‘์— ๋”ฐ๋ผ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐฑ์‹ ํ•˜๊ฑฐ๋‚˜, DOM์ด ๋ณ€๊ฒฝ๋˜์—ˆ์„ ์‹œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค์‹œ ๊ฐฑ์‹ ํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜๋„ ์žˆ๋‹ค.

Angualr์—์„œ์˜ ํด๋ž˜์Šค

๋ชจ๋“ˆ, ์ปดํฌ๋„ŒํŠธ, ์„œ๋น„์Šค๋Š” ๋‹ค ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๊ฐ€ ๋ถ™์€ ํด๋ž˜์Šค์ผ ๋ฟ์ด๋‹ค. ์ฆ‰, ์ด ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋ฅผ ์ง€์ •ํ•จ์œผ๋กœ์จ ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š” ์ง€ Angular๊ฐ€ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค์— ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋กœ ์ง€์ •ํ•˜๋ฉด - ํ…œํ”Œ๋ฆฟ์„ ๋ทฐ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
์„œ๋น„์Šค ํด๋ž˜์Šค์— ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋กœ ์ง€์ •ํ•˜๋ฉด - Angular ์ปดํฌ๋„ŒํŠธ์— ์˜์กด์„ฑ์„ ์ฃผ์ž…ํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ…œํ”Œ๋ฆฟ, ๋ทฐ ์ปดํฌ๋„ŒํŠธ, ์„œ๋น„์Šค, testํŒŒ์ผ์„ CLI๋กœ?

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

1. Angular๋กœ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด Angular CLI๋ฅผ global install ํ•ด์•ผ ํ•œ๋‹ค.

npm install -g @angular/cli

2. ์ด CLI๋ฅผ ์„ค์น˜ํ•œ ํ›„ ๊ธฐ๋ณธ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ํ•ด๋‹น ๋ช…๋ น์„ ํ„ฐ๋ฏธ๋„์— ์‹คํ–‰ํ•œ๋‹ค.

ng new [Angular ํ”„๋กœ์ ํŠธ ์ด๋ฆ„]

*scss๋กœ ์Šคํƒ€์ผ์„ ์ž‘์„ฑํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด - style์˜ต์…˜์„ ๋ณ€๊ฒฝํ•œ๋‹ค.

ng new [Angular ํ”„๋กœ์ ํŠธ ์ด๋ฆ„] --style=scss

3. ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‹คํ–‰ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ํ•ด๋‹น Angular ์›Œํฌ ์ŠคํŽ˜์ด์Šค ํด๋”๋กœ ์ด๋™ ํ›„,
ng serve ๋ช…๋ น์„ ์‹คํ–‰ํ•œ๋‹ค. ์ด ๋ช…๋ น์€ ์„œ๋ฒ„๋ฅผ ์‹คํ–‰์‹œํ‚ค๋ฉฐ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ฝ”๋“œ ๋ณ€๊ฒฝ์„ ๊ฐ์ง€ํ•˜๊ณ  ๋ณ€๊ฒฝ์ด ๋˜์—ˆ๋‹ค๋ฉด ์•ฑ์„ ๋‹ค์‹œ ๋นŒ๋“œํ•ด ์„œ๋น„์Šคํ•œ๋‹ค.

ng serve --open

4. ์ด๋•Œ app.component.ts, app.component.html, app.component.css์ด ๋งŒ๋“ค์–ด์ง€๋Š”๋ฐ, ๊ฐ ํŒŒ์ผ์ด ๋‹ด๋‹นํ•˜๋Š” ์—ญํ• ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • app.component.ts: Typescript๋กœ ์ž‘์„ฑํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค ์ฝ”๋“œ
  • app.component.html: html๋กœ ์ž‘์„ฑํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ํ…œํ”Œ๋ฆฟ
  • app.component.css: ์ด ์ปดํฌ๋„ŒํŠธ(app component)์—๋งŒ ์ ์šฉ๋˜๋Š” css์Šคํƒ€์ผ

์ด๋•Œ reset.css๊ฐ™์€ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋ฃจํŠธ ํด๋” ๋ฐ”๋กœ ๋ฐ‘์— ์žˆ๋Š” styles.css์— ์Šคํƒ€์ผ์„ ์ง€์ •ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

5. ์ƒˆ ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑํ•˜๊ธฐ

Angular๋Š” ํŠน์ดํ•˜๊ฒŒ๋„ CLI๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

ng generate component [์ƒˆ ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„]

์ด๋ ‡๊ฒŒ ์ƒˆ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋ฉด ์œ„์—์„œ ์–˜๊ธฐํ–ˆ๋˜ ํŒŒ์ผ 3๊ฐœ์™€ ํ…Œ์ŠคํŠธํŒŒ์ผ์„ ์ž๋™ ์ƒ์„ฑํ•ด์ค€๋‹ค.

์ž๋™์œผ๋กœ ์ƒ์„ฑ๋œ ํด๋ž˜์Šค ํŒŒ์ผ ๋‚ด์šฉ์„ ๋ณด๊ฒŒ ๋˜๋ฉด, (.tsํŒŒ์ผ)
Angular ์ฝ”์–ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ Component์™€ OnInit ์‹ฌ๋ณผ์„ ๋กœ๋“œํ•ด ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋กœ ์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค๋ฅผ ์ง€์ •ํ•ด์ฃผ๊ฒŒ ๋œ๋‹ค.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

์ด๋•Œ @Component๋Š” ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ์ง€์ •ํ•ด์ฃผ๊ฒŒ๋˜๋Š”๋ฐ ์ž๋™์ ์œผ๋กœ 3๊ฐœ์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.
selector, templateUrl, stylesUrl์ด๋‹ค.

  • selector: ์ปดํฌ๋„ŒํŠธ์˜ css ์—˜๋ฆฌ๋จผํŠธ ์…€๋ ‰ํ„ฐ (DOM ํŠธ๋ฆฌ์—์„œ ์ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ์ด๋ฆ„)
  • templateUrl: ์ปดํฌ๋„ŒํŠธ ํ…œํ”Œ๋ฆฟ ํŒŒ์ผ์˜ ์œ„์น˜
  • stylesUrls: ์ปดํฌ๋„ŒํŠธ css ์Šคํƒ€์ผ ํŒŒ์ผ์˜ ์œ„์น˜

์—ฌ๊ธฐ์„œ ngOnInit์€ ๋ผ์ดํ”„์‚ฌ์ดํด ํ›„ํ‚น ํ•จ์ˆ˜๋กœ, ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•œ ์งํ›„์— ํ˜ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.
๊ทธ๋ž˜์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ๋กœ์ง์€ ์ด ๋ฉ”์†Œ๋“œ์— ์ž‘์„ฑํ•œ๋‹ค.

์—ฌ๊ธฐ์„œ ๋งŒ๋“  class ํ”„๋กœํผํ‹ฐ๋“ค์€ .html ํ…œํ”Œ๋ฆฟ์—์„œ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

๋˜ํ•œ, ํ•ด๋‹น ๊ฐ์ฒด๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ์ •๋ณด ์™ธ์— ๋‹ค๋ฅธ ๋ถ€๊ฐ€ ์ •๋ณด๋“ค์€ interface๋ฅผ ์ƒ์„ฑํ•ด ์ถ”์ƒํ™”ํ•ด์ค€๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด, ํžˆ์–ด๋กœ id์™€ name์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค๋ฉด,

heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

์ด๋Ÿฐ์‹์œผ๋กœ component class๋ฅผ ์ž‘์„ฑํ•ด์ฃผ๊ณ  Hereo์— ํ•ด๋‹นํ•˜๋Š” interface๋Š”
src/app ํด๋” ์•„๋ž˜์— hero.ts ํŒŒ์ผ์— Hero interface๋ฅผ ์ƒ์„ฑํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.

export interface Hero {
  id: number;
  name: string;
}

์ด ๊ฐ์ฒด๋ฅผ ํ‘œ์‹œํ•˜๋Š” ์—ญํ• ์€ ํ…œํ”Œ๋ฆฟ์ด ๋‹ด๋‹นํ•œ๋‹ค.
์ฆ‰, ์ž๋™์ ์œผ๋กœ .ts ํŒŒ์ผ์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด๋ฃจ๋Š” ํด๋ž˜์Šค์™€ ํ•ด๋‹น ํด๋ž˜์Šค ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ๋กœ์ง์„ ๋ทฐ๊ฐ€ ๋‹ด๋‹นํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ์—ญํ• ์ด๊ณ , .html์ด๋ผ๋Š” ํŒŒ์ผ๋ช…์„ ๊ฐ€์ง„ ํ…œํ”Œ๋ฆฟ์ด ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์‹œ์ผœ html ์ฝ”๋“œ๋กœ ๋ณด์—ฌ์ง€๊ฒŒ๋˜๋Š”๊ฒƒ์ด๋‹ค.

heroes.component.html (HeroesComponent์˜ ํ…œํ”Œ๋ฆฟ)

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

*[(ngModel)] ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•ด ์–‘๋ฐฉํ–ฅ ๋ฐ”์ธ๋”ฉ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name"/>
  </label>
</div>

์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•˜๋ฉด hero.name์˜ ํ”„๋กœํผํ‹ฐ๊ฐ€ html ํ…์ŠคํŠธ๋ฐ•์Šค์™€ ์–‘๋ฐฉํ–ฅ ๋ฐ”์ธ๋”ฉ๋˜์–ด,
hero.name์ด ๊ฐ€์ง„ ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ํ…์ŠคํŠธ๋ฐ•์Šค๋กœ, ๋˜ ํ…์ŠคํŠธ๋ฐ•์Šค์˜ ๊ฐ’์ด hero.name ํ”„๋กœํผํ‹ฐ๋กœ ์ „๋‹ฌ๋˜๋Š” ๊ฒŒ ๊ฐ€๋Šฅํ•ด์ง„๋‹ค. ์ด๊ฒƒ์„ ๋””๋ ‰ํ‹ฐ๋ธŒ๋ผ๊ณ  ํ•œ๋‹ค. ํ…œํ”Œ๋ฆฟ์ด ๋ Œ๋”๋ง ๋  ๋•Œ ๋””๋ ‰ํ‹ฐ๋ธŒ๊ฐ€ ์žˆ์œผ๋ฉด DOM์„ ๋””๋ ‰ํ‹ฐ๋ธŒ์˜ ๋กœ์ง์— ๋”ฐ๋ผ ๋ณ€ํ˜•์‹œํ‚จ๋‹ค. @Directive() ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋กœ ์ปค์Šคํ…€ ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์ •์˜ํ•  ์ˆ˜ ๋„ ์žˆ๋‹ค.

์˜ˆ์‹œ๋ฅผ ๋“ค๋ฉด, ๊ตฌ์กฐ ๋””๋ ‰ํ‹ฐ๋ธŒ์˜ ๊ฒฝ์šฐ DOM ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜, ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜, ์น˜ํ™˜ํ•˜๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉ๋˜๋ฉฐ ngFor์™€ ngIf๋ฅผ ์˜ˆ๋กœ ๋“ค ์ˆ˜ ์žˆ๋‹ค. ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๋””๋ ‰ํ‹ฐ๋ธŒ์˜ ๊ฒฝ์šฐ ์ด๋ฏธ ์กด์žฌํ•˜๋Š” ์—˜๋ฆฌ๋จผํŠธ์˜ ๋ชจ์–‘์ด๋‚˜ ๋™์ž‘์„ ๋ณ€ํ˜•์‹œํ‚ค๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉ๋˜๋ฉฐ ์–‘๋ฐฉํ–ฅ ๋ฐ”์ธ๋”ฉ๊ฐ™์ด ์ด๋ฒคํŠธ์— ๋ฐ˜์‘ํ•˜๊ฒŒ๋” DOM์„ ๋ณ€ํ˜•์‹œํ‚ค๋Š” ์—ญํ• ์„ ๋‹ด๋‹นํ•œ๋‹ค.

๋‹ค์Œ๋ถ€ํ„ฐ๋Š” Angular์—์„œ ์ค‘์š”ํ•œ ๊ฐœ๋…์ธ Routing์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์„ค๋ช…ํ•  ์˜ˆ์ •์ด๋‹ค.

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

comment-user-thumbnail
2020๋…„ 8์›” 15์ผ

์ž˜ ๋ณด๊ณ  ๊ฐ‘๋‹ˆ๋‹ค ^^ ใ…Ž

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2020๋…„ 8์›” 18์ผ

๋งŽ์ด ๋ฐฐ์šฐ๊ณ  ๊ฐ‘๋‹ˆ๋‹ค^^๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ

1๊ฐœ์˜ ๋‹ต๊ธ€