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๋…„ Angular Forms ์™„๋ฒฝ ๊ฐ€์ด๋“œ: Reactive Forms, ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ, ๊ธฐ์ˆ  ๋ฉด์ ‘ ์งˆ๋ฌธ

2026๋…„ Angular Forms ์™„๋ฒฝ ๊ฐ€์ด๋“œ: Reactive Forms, ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ, ๊ธฐ์ˆ  ๋ฉด์ ‘ ์งˆ๋ฌธ

Angular Reactive Forms์˜ ํƒ€์ž…ํ™”๋œ FormBuilder, ์ปค์Šคํ…€ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๊ธฐ, ๋น„๋™๊ธฐ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ, FormArray๋ฅผ ๋งˆ์Šคํ„ฐํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์ˆ  ๋ฉด์ ‘์—์„œ ์ž์ฃผ ๋‚˜์˜ค๋Š” ์งˆ๋ฌธ๊ณผ Signal Forms ํ”„๋ฆฌ๋ทฐ๋„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

NgRx Signal Store vs ๊ธฐ์กด NgRx: 2026๋…„ ์–ด๋–ค ๊ฒƒ์„ ์„ ํƒํ•ด์•ผ ํ• ๊นŒ์š”?

NgRx Signal Store vs ๊ธฐ์กด NgRx: 2026๋…„ ์–ด๋–ค ๊ฒƒ์„ ์„ ํƒํ•ด์•ผ ํ• ๊นŒ์š”?

NgRx Signal Store์™€ ๊ธฐ์กด NgRx๋ฅผ ๋น„๊ต ๋ถ„์„ํ•˜์—ฌ 2026๋…„ Angular ํ”„๋กœ์ ํŠธ์— ์ตœ์ ์˜ ์ƒํƒœ ๊ด€๋ฆฌ ์†”๋ฃจ์…˜์„ ์„ ํƒํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•ˆ๋‚ดํ•ฉ๋‹ˆ๋‹ค.

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

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

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

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