๐Ÿ…ฐ๏ธAngular

์ฐธ ์ข‹์€๋ฐ ์“ฐ์ง€๋ฅผ ์•Š๋„ค

1 minute read

Angular

ํ—ค๋”์— <p routerLinkActive="๋งž์„๋•Œ ํด๋ž˜์Šค๋ช…">
์ด๋Ÿฐ์‹์œผ๋กœ ํ•˜๋ฉด ๊ฒฝ๋กœ ๋งž์„๋•Œ ์ € ํด๋ž˜์Šค๋ช… ํ™œ์…ฉํ™”

ํŠœํ”Œ ์—ฌ๋Ÿฌํƒ€์ž…์ด ์ €์žฅ๊ฐ€๋Šฅํ•œ ๋ฐฐ์—ด์ด๊ณ  ํ™•์žฅ ๋ถˆ๊ฐ€๋Šฅ ์ˆœ์„œ ๊ณ ์ •
Let a : [number, string, string] = [1,โ€aโ€,โ€bโ€];
๋ฐฐ์—ด์€ ํƒ€์ž…์ด string[] ๊ฐ™์€ ๋А๋‚Œ์ž„ ์ฃผ์˜

ํ•จ์ˆ˜๋„ ํƒ€์ž…์žˆ์Œ
Let b: function;
์ œ์•ฝ์„ ์ฃผ๊ณ  ์‹ถ๋‹ค๋ฉด
Let b: (number, number)=>number

unknown๊ณผ any๋Š” ๋‹ค๋ฅด๋‹ค
unknown์€ ๋” ์ œ์•ฝ์ . ๋‹ค๋ฅธ๋ฐ์— unknown ํƒ€์ž…์€ ์บ์ŠคํŒ…์—†์ด ๋Œ€์ž…๋ถˆ๊ฐ€. ์‚ฌ์šฉ์žฉ์ฒด๊ฐ€ ๋น์ถ”์ฒœ

ngFor=โ€let a of arr | filter=โ€bโ€โ€
์ด๋Ÿฐ์‹์œผ๋กœ ํŒŒ์ดํ”„๋Š” ๋ฌธ์ž์—ด ํŽธ์ง‘๋ฟ๋งŒ์•„๋‹ˆ๋ผ ์—ฌ๋Ÿฌ๊ฐ€์ง€๋ฅผ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค. Transform ํ•จ์ˆ˜๋Š” ๋ฆฌํ„ด์€ any์ž„
๊ทผ๋ฐ ํ•„ํ„ฐํŒŒ์ดํ”„์“ธ๋•Œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ๋ณ€๊ฒฝ๋œ ๋ฐ์ดํ„ฐ์— ํŒŒ์ดํ”„๋Š” ๋‹ค์‹œ ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค. ์„ฑ๋Šฅ์ด์Šˆ๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ
์›ํ•œ๋‹ค๋ฉด ์ปค์Šคํ…€ํŒŒ์ดํ”„์— pure = false๋ฅผ ์ฃผ๋ฉด ์ ์šฉ๋œ๋‹ค.

#f="ngForm"  
#input1="ngModel"  

ํ•ด์‹œํƒœ๊ทธ๋Š” ๋กœ์ปฌ์ฐธ์กฐ๋กœ ๊ทธ ํ…œํ”Œ๋ฆฟ๋‚ด์—์„œ ์–ด๋–ค ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค. ์ด๋ฒคํŠธ๋“ฑ์—์„œ ์ธ์ž๋กœ ๋„ฃ์–ด์„œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ ์ œ์–ดํ• ์ˆ˜์žˆ๋‹ค. HTMLInputElement ๋ญ ์š”๋Ÿฐ์‹์˜ ํƒ€์ž…์ด๋‹ค.
ํผ๋‚ด์—์„œ๋Š” ํŠน์ˆ˜ํ•œ ํ˜•ํƒœ๋กœ ์œ„์ฒ˜๋Ÿผ =ngForm, =ngModel ๊ฐ™์€๊ฑธ ๋ถ™์ด๋Š”๋ฐ ํƒ€์ž…์„ as NgModel ์ด๋Ÿฐ์‹์œผ๋กœ ๋ถ™์ธ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋˜๊ฒ ๋‹ค.

httpService.getUserService().getUsers() {
https://pipe .samsungds.net/api/users
}

typeorm => findone์—์„œ relations ๋ฐฐ์—ด์— ์ถ”๊ฐ€ํ•˜๋ฉด ํŽ˜์น˜์กฐ์ธ์ฒ˜๋Ÿผ ๊ฐ€์ ธ์˜จ๋‹ค

custom directive๋กœ text-xs text-gray-500๊ฐ™์€๊ฑฐ ๋ฌถ์–ด์„œ ํ‘œํ˜„๊ฐ€๋Šฅํ•˜์ง€ ์•Š์„๊นŒ ๊ทผ๋ฐ ์ด๊ฑด ํ…Œ์ผ์œˆ๋“œ ์ž์ฒด์—์„œ๋„ ๋ ๊ฑฐ๊ฐ™๊ธฐ๋„ํ•˜๊ณ . renderer๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋””๋ ‰ํ‹ฐ๋ธŒ๊ฐ™์€ ๊ฒฝ์šฐ addClass๊ฐ™์€ ํ•จ์ˆ˜๋„ ์žˆ๊ณ ํ•˜๋„ค. @HostBinding์ด ๋ Œ๋”๋Ÿฌ๋ณด๋‹ค ๋” ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋ผ๋Š”๋ฐ ํด๋ž˜์Šค๋„ ์ถ”๊ฐ€ํ• ์ˆ˜์žˆ๋‚˜?

set unless(condition: boolean) {} => _unless๊ฐ™์€๊ฑฐ ์„ ์–ธ์•ˆํ•ด๋„ unless์— ๋Œ€์ž…ํ–ˆ์„๋•Œ ์ผ์–ด๋‚˜๋Š”์ผ์„ ์ €๊ฒƒ๋งŒ ์ ์–ด๋„ ์„ ์–ธ๊ฐ€๋Šฅ. ๋“œ๋ž๋‹ค์šด๊ฐ™์€๊ฑฐ ๋ง‰์‹œ๋ฐ€๋ฆฌ์•™ ๊ฐ•์˜ ์˜ˆ์ œ์ค‘์— ์žˆ์Œ ngswitch ๋ฐ‘์—

currentMenu = โ€œHOMEโ€ => ์š”๊ฑฐ set์—์„œ ์ฐพ์•„์„œ ์ธ๋ฑ์Šค๋กœ ๋„ฃ์–ด์ฃผ๋Š”๊ฑฐ ํ• ๊นŒ

ํ”„๋กœํผํ‹ฐ ๋ฐ”์ธ๋”ฉ์— ํด๋ž˜์Šค๋ช… ์–ป์–ด์˜ค๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๋งŒ๋“ค๊ณ  ์‚ผํ•ญ์—ฐ์‚ฐ์ž๋ฅผ ์—†์• ๋Š”๊ฒŒ ์ข‹์„๊นŒ? ===> ngClass๋ผ๊ณ  ์ œ๋Œ€๋กœ๋œ ๊ธฐ๋Šฅ์ด ์žˆ๋„ค

app- ์ปจ๋ฒค์…˜์„ ์ง€ํ‚ฌ๊นŒ

ํ—ค๋” ๋ฉ”๋‰ด ์ด๋ฒคํŠธ๋ฅผ onclick ์ด๋Ÿฐ๊ฒŒ ์•„๋‹ˆ๋ผ ์ด๋ฒคํŠธ ๋ฐ”์ธ๋”ฉํ•ด์•ผ์ง€ (click)=โ€f()โ€ ์ด๊ณ  f ์•ˆ์—์„œ ๋ผ์šฐํŒ…๋„ ํ•˜๋Š”๊ฒŒ ์ข‹๊ฒ ๋‹ค.

ngFor์—์„œ ์ธ๋ฑ์Šคํ‹‘ let i = index; ํ˜•์‹์ด ์ข‹๊ฒ ๋‹ค

๋Œ€๋ฌธ์ž๋Š” ์˜ค๋ฅธ์ชฝ ์‹œํ”„ํŠธ๋ฅผ ์“ฐ์ž

html์—์„œ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์•„๋‹ˆ๋ผ ํด๋ž˜์Šค์˜ ์ž์‹์œผ๋กœ๋Š” ์•ˆ๋ผ?
์™œ ๊ฐ‘์ž๊ธฐ ๋ฆฌ์•กํŠธ์—์„œ ์„ ํšŒํ–ˆ๋Š”์ง€๋„ ๊ธ€์“ฐ๋ฉด ์ข‹์ง€์•Š๋‚˜ setState?

๋ฆฌํŒฉํ† ๋ง์€ ์•„์ดํŒจ๋“œ๋กœ ํ•ด์•ผ์ง€

๋ฐ์ดํ„ฐ ์ฃผ๊ณ  ๋ฐ›๋Š”๊ฒƒ๋„ ์„œ๋น„์Šค๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒ ๋‹ค

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ˜•๋ณ€ํ™˜

var1 ๋˜๋Š” var1 as string - - - - phones: { home: { num: 12, }, office: { num:34, } } ์ด๋Ÿฐ ๊ฒฝ์šฐ์— phones์˜ ํƒ€์ž…์€? phones: PhoneNumberDictionary interface PhoneNumberDictionary { [phone: string]: { // dictionary์˜ ํ‚ค์˜ ํƒ€์ž…๊ฐ™์€๊ฑฐ๋‹ค num: number; } } - - - - class xxxService extends communicateService { @Override callRestApi() } ์„œ๋น„์Šค๋ฅผ ์ธ์ ์…˜๋ฐ›๊ณ  ์„œ๋น„์Šค์˜ ๊ฐ’์œผ๋กœ ๋ฐ”์ธ๋”ฉํ• ์ˆ˜๋„ ์žˆ๋‹ค. ์ฆ‰ ๋Ÿฐํƒ€์ž„ ๋ฐ์ดํ„ฐ๋กœ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋‹ค. ์นดํŠธ ๋ฐ์ดํ„ฐ๋ผ๋˜์ง€ space-y-5 => flex ์ž๋ฆฌ์— ๋งˆ์ง„์„ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋‹ค +this.activateRoute.snapshot.params[id] => ์•ž์— +๋ฅผ ๋ถ™์ด๋ฉด ๋ฌธ์ž๊ฐ€ ์ˆซ์ž๊ฐ€ ๋˜๋‚˜๋ณด๋‹ค ์˜ˆ์ปจ๋Œ€ http ์„œ๋น„์Šค์—์„œ ํ…Œ์ŠคํŠธ ๊ตฌํ˜„์ฒด๋ฅผ ์ฃผ์ž…ํ•˜๋ฉด ํ…ฅ์ŠคํŠธ๋กœ ๋ถ™๊ณ  ์ด๋Ÿฐ๊ฑฐ ๋˜๊ฒ ๋‹ค