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 2026์˜ RxJS ์—ฐ์‚ฐ์ž, Subject, Signals ์ƒํ˜ธ ์šด์šฉ

Angular 2026์˜ RxJS: ์—ฐ์‚ฐ์ž, Subject, Signals ์ƒํ˜ธ ์šด์šฉ

Angular 2026์˜ RxJS: ์‹ค๋ฌด์—์„œ ์“ฐ์ด๋Š” ์—ฐ์‚ฐ์ž, Subject, Signals ์ƒํ˜ธ ์šด์šฉ ํŒจํ„ด์„ ๊ฐ€์žฅ ์ž์ฃผ ๋‚˜์˜ค๋Š” ๋ฉด์ ‘ ์งˆ๋ฌธ๊ณผ ํ•จ๊ป˜ ์ตํž™๋‹ˆ๋‹ค.

Angular @defer ์„ ์–ธ์  ์ง€์—ฐ ๋กœ๋”ฉ ๊ฐ€์ด๋“œ

Angular @defer ์™„์ „ ๊ฐ€์ด๋“œ 2026: ์„ ์–ธ์  ์ง€์—ฐ ๋กœ๋”ฉ๊ณผ ๋ฉด์ ‘ ์งˆ๋ฌธ

Angular @defer ๋ธ”๋ก์„ ํ™œ์šฉํ•œ ์„ ์–ธ์  ์ง€์—ฐ ๋กœ๋”ฉ์˜ ์ž‘๋™ ์›๋ฆฌ, ํŠธ๋ฆฌ๊ฑฐ ์œ ํ˜•, ํ”„๋ฆฌํŽ˜์น˜ ์ „๋žต, ์ ์ง„์  ํ•˜์ด๋“œ๋ ˆ์ด์…˜, ๋ฉด์ ‘ ์งˆ๋ฌธ์„ ์ƒ์„ธํžˆ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

Angular 20 Resource API and httpResource tutorial

Angular 20 Resource API ํ•ต์‹ฌ ์ •๋ฆฌ: httpResource, rxResource ํ™œ์šฉ๋ฒ•๊ณผ ์‹ค์ „ ๋ฉด์ ‘ ๋Œ€๋น„

Angular 20์—์„œ ๋„์ž…๋œ Resource API์˜ ํ•ต์‹ฌ ๊ฐœ๋…์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค. httpResource์™€ rxResource๋ฅผ ํ™œ์šฉํ•œ ์‹œ๊ทธ๋„ ๊ธฐ๋ฐ˜ ๋ฐ์ดํ„ฐ ํŽ˜์นญ, Zod ์Šคํ‚ค๋งˆ ๊ฒ€์ฆ, ResourceStatus ๋ฌธ์ž์—ด ๋ฆฌํ„ฐ๋Ÿด, HttpClient ๊ตฌ๋… ํŒจํ„ด ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜, ๊ทธ๋ฆฌ๊ณ  ์‹ค์ „ ๊ธฐ์ˆ  ๋ฉด์ ‘ ์งˆ๋ฌธ๊นŒ์ง€ ์ฝ”๋“œ ์˜ˆ์ œ์™€ ํ•จ๊ป˜ ์ƒ์„ธํžˆ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

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