Angular

Angular

FRONTEND

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

๋ฐฐ์šธ ๋‚ด์šฉ

๋ฐ์ฝ”๋ ˆ์ดํ„ฐ์™€ ๊ณ ๊ธ‰ ํƒ€์ž… (@Component, @Injectable)์„ ๊ฐ–์ถ˜ ์—„๊ฒฉํ•œ TypeScript

NgModules์™€ lazy loading์„ ๊ฐ–์ถ˜ ๋ชจ๋“ˆ๋Ÿฌ ์•„ํ‚คํ…์ฒ˜

providers์™€ scopes๋ฅผ ๊ฐ–์ถ˜ ๊ณ„์ธต์  ์˜์กด์„ฑ ์ฃผ์ž…

๋ฆฌ์•กํ‹ฐ๋ธŒ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์œ„ํ•œ RxJS (Observables, Operators, Subjects)

๊ฐ•๋ ฅํ•œ ํ…œํ”Œ๋ฆฟ ๊ตฌ๋ฌธ (data binding, directives, pipes)

๊ฒฌ๊ณ ํ•œ ํผ (Template-driven๊ณผ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ๊ฐ–์ถ˜ Reactive Forms)

guards, resolvers, lazy loading, preloading์„ ๊ฐ–์ถ˜ ๊ณ ๊ธ‰ Router

interceptors, caching, ์—๋Ÿฌ ์ฒ˜๋ฆฌ๋ฅผ ๊ฐ–์ถ˜ HttpClient

๋ฆฌ์•กํ‹ฐ๋ธŒ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ Signals (Angular 16+)

ํฌ๊ด„์ ์ธ ํ…Œ์ŠคํŠธ (Jasmine, Karma, TestBed, mocking, Cypress E2E)

๋งˆ์Šคํ„ฐํ•ด์•ผ ํ•  ํ•ต์‹ฌ ์ฃผ์ œ

์ด ๊ธฐ์ˆ ์„ ์ดํ•ดํ•˜๊ณ  ๋ฉด์ ‘์—์„œ ์„ฑ๊ณตํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฐœ๋…

1

TypeScript: decorators, ๊ณ ๊ธ‰ ํƒ€์ž…, interfaces, generics

2

์ปดํฌ๋„ŒํŠธ: templates, styles, lifecycle hooks, ViewChild, ContentChild

3

๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ: interpolation, property binding, event binding, two-way binding

4

Directives: structural (*ngIf, *ngFor, *ngSwitch), attribute (ngClass, ngStyle), custom

5

Pipes: built-in (date, async, json), ์‚ฌ์šฉ์ž ์ •์˜ pipes, pure vs impure

6

์„œ๋น„์Šค์™€ ์˜์กด์„ฑ ์ฃผ์ž…: providers, ๊ณ„์ธต์  DI, injection tokens

7

RxJS: Observables, Operators (map, filter, switchMap, mergeMap), Subjects, unsubscribe

8

ํผ: Template-driven vs Reactive, FormControl, FormGroup, validators, async validators

9

๋ผ์šฐํŒ…: routes, RouterLink, RouterOutlet, guards (CanActivate, CanDeactivate), resolvers

10

HttpClient: GET/POST/PUT/DELETE, interceptors, ์—๋Ÿฌ ์ฒ˜๋ฆฌ, retry logic

11

Change Detection: strategies (Default, OnPush), zones, ์ˆ˜๋™ ํŠธ๋ฆฌ๊ฑฐ

12

NgModules: imports, exports, declarations, providers, lazy loading

13

Signals: signal(), computed(), effect(), ๋ฆฌ์•กํ‹ฐ๋ธŒ ์ƒํƒœ (Angular 16+)

14

์ƒํƒœ ๊ด€๋ฆฌ: BehaviorSubject๋ฅผ ํ™œ์šฉํ•œ Services, NgRx (Store, Effects, Selectors)

15

ํ…Œ์ŠคํŠธ: ๋‹จ์œ„ ํ…Œ์ŠคํŠธ (Jasmine, TestBed), ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ, service mocking, E2E

16

์„ฑ๋Šฅ: OnPush, trackBy, lazy loading, preloading ์ „๋žต, ๋ฒˆ๋“ค ์ตœ์ ํ™”

17

Angular CLI, ๋นŒ๋“œ ์„ค์ •, ๋ฐฐํฌ, Angular Universal์„ ํ™œ์šฉํ•œ SSR

์ตœ์‹  Angular ๊ธฐ์‚ฌ

Angular์— ๊ด€ํ•œ ์ตœ์‹  ๊ธฐ์‚ฌ์™€ ๊ฐ€์ด๋“œ๋ฅผ ํ™•์ธํ•˜์„ธ์š”

์‹œ๊ทธ๋„๊ณผ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” Angular zoneless ๋ณ€๊ฒฝ ๊ฐ์ง€ ์•„ํ‚คํ…์ฒ˜ ๋‹ค์ด์–ด๊ทธ๋žจ

Angular 19 Zoneless: Zone.js ์—†์ด ๊ตฌํ˜„ํ•˜๋Š” ์„ฑ๋Šฅ๊ณผ ๋ณ€๊ฒฝ ๊ฐ์ง€

Angular์˜ zoneless ๋ณ€๊ฒฝ ๊ฐ์ง€๋Š” Zone.js๋ฅผ ์™„์ „ํžˆ ์ œ๊ฑฐํ•˜์—ฌ ๋” ์ž‘์€ ๋ฒˆ๋“ค ํฌ๊ธฐ, ๋น ๋ฅธ ๋ Œ๋”๋ง, ๊ทธ๋ฆฌ๊ณ  ์‹œ๊ทธ๋„์„ ํ†ตํ•œ ๋ช…์‹œ์  ๋ฐ˜์‘์„ฑ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด ์‹ฌ์ธต ๊ฐ€์ด๋“œ๋Š” Angular 19์˜ provideExperimentalZonelessChangeDetection๋ถ€ํ„ฐ Angular 20+ ์•ˆ์ •ํ™” API๊นŒ์ง€ Zone.js์—์„œ zoneless Angular๋กœ์˜ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๊ฒฝ๋กœ๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

NgModule์—์„œ ์Šคํƒ ๋“œ์–ผ๋ก  ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ๋กœ์˜ ์ „ํ™˜์„ ๋ณด์—ฌ์ฃผ๋Š” Angular ์Šคํƒ ๋“œ์–ผ๋ก  ์ปดํฌ๋„ŒํŠธ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์•„ํ‚คํ…์ฒ˜

Angular ์Šคํƒ ๋“œ์–ผ๋ก  ์ปดํฌ๋„ŒํŠธ: ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๊ฐ€์ด๋“œ์™€ ๋ชจ๋ฒ” ์‚ฌ๋ก€ 2026

NgModule ๊ธฐ๋ฐ˜ Angular ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์Šคํƒ ๋“œ์–ผ๋ก  ์ปดํฌ๋„ŒํŠธ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋Š” ์™„์ „ ๊ฐ€์ด๋“œ์ž…๋‹ˆ๋‹ค. ๊ณต์‹ CLI 3๋‹จ๊ณ„ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜, ์ง€์—ฐ ๋กœ๋”ฉ, ๋ผ์šฐํŒ…, Angular 21์˜ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

Angular 19 ๋ฉด์ ‘ ์งˆ๋ฌธ: Signals, SSR, ์ ์ง„์  ํ•˜์ด๋“œ๋ ˆ์ด์…˜

Angular 19 ๋ฉด์ ‘ ์งˆ๋ฌธ: Signals, SSR๊ณผ ๋ฐ˜๋“œ์‹œ ์•Œ์•„์•ผ ํ•  ๊ฐœ๋…

๊ฐ€์žฅ ์ž์ฃผ ๋‚˜์˜ค๋Š” Angular 19 ๋ฉด์ ‘ ์งˆ๋ฌธ: Signals, ์ ์ง„์  ํ•˜์ด๋“œ๋ ˆ์ด์…˜, zoneless ๋ณ€๊ฒฝ ๊ฐ์ง€, ์ƒˆ๋กœ์šด ๋ฆฌ์•กํ‹ฐ๋ธŒ API. ์ฝ”๋“œ ์˜ˆ์ œ์™€ ๊ธฐ๋Œ€๋˜๋Š” ๋‹ต๋ณ€๊นŒ์ง€ ํ•จ๊ป˜ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  Angular ๊ธฐ์‚ฌ ๋ณด๊ธฐ