๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
728x90
๋ฐ˜์‘ํ˜•

๐Ÿ’ป Frontend9

[Angular] Custom Directive ๋งŒ๋“ค์–ด ์ ์šฉํ•˜๊ธฐ (Create & Adjust a Custom Directive) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์ €๋ฒˆ ๊ธ€์— Angular์— ์ด๋ฏธ ๊ตฌํ˜„๋œ Built-in ๋””๋ ‰ํ‹ฐ๋ธŒ์— ๋Œ€ํ•ด์„œ ์•Œ์•„ ๋ณด์•˜๋Š”๋ฐ์š”. ์ด๋ฒˆ ๊ธ€์€ ์ง์ ‘ ์ปค์Šคํ…€ํ•œ ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ๋งŒ๋“ค๊ณ  ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Generate Directive ์•„๋ž˜์™€ ๊ฐ™์ด ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์ƒ์„ฑํ•ด ์ค๋‹ˆ๋‹ค. ์ €๋Š” mouse control์— ๋”ฐ๋ผ ์Šคํƒ€์ผ์ด ๋ฐ”๋€Œ๋Š” ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ๋งŒ๋“ค๊ฑฐ๊ธฐ ๋–„๋ฌธ์— mouseControl์œผ๋กœ ์ด๋ฆ„ ์ง€์–ด์ฃผ๊ฒ ์Šต๋‹ˆ๋‹ค. ng g d ๋””๋ ‰ํ‹ฐ๋ธŒ์ด๋ฆ„ //or ng generate directive ๋””๋ ‰ํ‹ฐ๋ธŒ์ด๋ฆ„ directive.ts ์•„๋ž˜์™€ ๊ฐ™์ด Directive๊ฐ€ ์ƒ์„ฑ ๋ ๊ฑฐ์—์š”. @Directive์— selector๋กœ app + ๋””๋ ‰ํ‹ฐ๋ธŒ์ด๋ฆ„์œผ๋กœ ๋งŒ๋“ค์–ด์ง€๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. import { Directiv.. 2022. 6. 9.
[Angular] Directive๋ž€? (feat. Built-in Directive) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ HTML ์—˜๋ฆฌ๋จผํŠธ์— ๋‹ค์–‘ํ•œ ๋™์ž‘์„ ์ถ”๊ฐ€ํ•˜๋Š” Directive์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Directive๋ž€? ๋จผ์ € ์‚ฌ์ „์  ์˜๋ฏธ๋ฅผ ๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด '์ง€์‹œ' ๋ผ๋Š” ๋œป์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Angular ๊ณต์‹ ๋ฌธ์„œ์—” Directive๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ๊ฐ„๋‹จํžˆ ๋งํ•˜๋ฉด Directive๋Š” ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ์–ด๋– ํ•œ ๋™์ž‘์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก '์ง€์‹œ' ํ•˜๋Š” ํด๋ž˜์Šค ์ž…๋‹ˆ๋‹ค. Directive ์ข…๋ฅ˜ Directive๋Š” 3๊ฐ€์ง€ ์ข…๋ฅ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. 1. Components ์ปดํฌ๋„ŒํŠธ๋Š” ํ…œํ”Œ๋ฆฟ์ด ์กด์žฌํ•˜๋Š” Directive๋กœ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” Directive ์ž…๋‹ˆ๋‹ค. (์ปดํฌ๋„ŒํŠธ๋Š” ๋‚˜์ค‘์— ๋”ฐ๋กœ ๊ธ€์„ ์ •๋ฆฌ ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.) 2. Attrubute Directives .. 2022. 6. 2.
[Angular] Custom Pipe ๋งŒ๋“ค์–ด ์ ์šฉํ•˜๊ธฐ (with. ngStyle) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์ €๋ฒˆ ์‹œ๊ฐ„์—๋Š” Angular ์ž์ฒด์— ๋‚ด์žฅ๋˜์–ด ์žˆ๋Š” Built-in Pipe์— ๋Œ€ํ•ด์„œ ์•Œ์•„ ๋ณด์•˜๋Š”๋ฐ์š”. (์•„์ง ์•ˆ๋ณด์‹  ๋ถ„๋“ค์€ ์—ฌ๊ธฐ ์—์„œ ๋ด์ฃผ์„ธ์š”!) ์ด๋ฒˆ์—๋Š” ์ง์ ‘ Custom Pipe๋ฅผ ๋งŒ๋“ค์–ด์„œ ์ ์šฉํ•ด ๋ณด๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. Pipe ์ƒ์„ฑ ์•„๋ž˜ ๋ช…๋ น์–ด๋กœ Pipe๋ฅผ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. ng g p ํŒŒ์ดํ”„์ด๋ฆ„ //๋งŒ์•ฝ ํ…Œ์ŠคํŠธ ํŒŒ์ผ ์—†์ด ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค๋ฉด ng g p --skip-tests=true ํŒŒ์ดํ”„์ด๋ฆ„ ์ €๋Š” ํ‰๊ท  ๊ฐ’์— ๋”ฐ๋ผ์„œ ๋‹ค๋ฅธ ์ƒ‰์ด ๋ณด์ด๋„๋ก ํ•˜๋Š” AverageColorPipe๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด pipe.ts ํŒŒ์ผ์ด ๋งŒ๋“ค์–ด ์งˆ๊ฑฐ์—์š”. @Pipe({})๋ฅผ ํ†ตํ•ด์„œ '|' ๊ธฐํ˜ธ ๋’ค์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” pipe ์ด๋ฆ„์„ ์ •ํ•ด ์ค๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณค transform ๋ฉ”.. 2022. 6. 2.
[Angular] Pipe๋ž€? (feat. Built-in Pipe) Pipe๋ž€? Angular ๊ณต์‹ ๋ฌธ์„œ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์†Œ๊ฐœํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ง๋…ํ•˜๋ฉด "ํด๋ž˜์Šค๋ฅผ ํŒŒ์ดํ”„๋กœ ํ‘œ์‹œํ•˜๊ณ  ๊ตฌ์„ฑ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ" ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด๋ ‡๊ฒŒ ๋งํ•˜๋ฉด ๋ฌด์Šจ ๋ง์ธ์ง€ ์ดํ•ด๊ฐ€ ์•ˆ๋˜์ฃ ? ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋ง์”€ ๋“œ๋ฆฌ๋ฉด HTML์—์„œ ๋ฌธ์ž๋‚˜ ์ˆซ์ž๋ฅผ ์›ํ•˜๋Š” ๊ฒƒ์— ๋งž๊ฒŒ ๋ณ€ํ˜•ํ•  ๋•Œ ์“ฐ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” Angular์—์„œ built-in์œผ๋กœ ์ œ๊ณต๋˜๋Š” Pipe API List ์ธ๋ฐ์š”. ํ•˜๋‚˜์”ฉ ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. 1. ๋ฌธ์ž ํŒŒ์ดํ”„ ๋จผ์ € ๊ฐ€์žฅ ์‰ฌ์šด ๊ฒƒ๋ถ€ํ„ฐ ๋ฌธ์ž๋ฅผ ๋ณ€ํ˜•์‹œํ‚ค๋Š” ํŒŒ์ดํ”„์ž…๋‹ˆ๋‹ค. UpperCasePipe,LowerCasePipe, TitleCasePipe ๋“ฑ์ด ์žˆ๋Š”๋ฐ ๋ง ๊ทธ๋Œ€๋กœ ๋ฌธ์ž๋ฅผ ๋ณ€ํ˜• ์‹œ์ผœ์ฃผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‚˜ํƒ€๋‚ด๊ณ  ์‹ถ์€ ๋ฌธ์ž๋ฅผ '|' ๊ฒƒ๊ณผ ํ•จ๊ป˜ ํŒŒ์ดํ”„ ์ด๋ฆ„์„ ์ ์–ด์ฃผ์‹œ๋ฉด .. 2022. 5. 24.
[Angular] ๋ชจ๋ฐ”์ผ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ๊ณ ์ •ํ•˜๊ธฐ (Lock Screen orientation in mobile browser) 1์ฐจ ์‹œ๋„ ํ™”๋ฉด๋งˆ๋‹ค ์„ธ๋กœ๋กœ ๊ณ ์ • ๋˜๋Š” ๊ฐ€๋กœ๋กœ ๊ณ ์ •์ด ๋˜์•ผ ํ•œ๋‹ค๋Š” ์š”๊ตฌ์‚ฌํ•ญ์„ ๋ฐ›๊ณ  iOS์—์„  ๊ฑฐ์˜ ์ฝ”๋“œ ํ•œ ์ค„๋งŒ ์ถ”๊ฐ€ํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๊ธˆ๋ฐฉ ๋๋‚ ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ๋ฐ”๋กœ ๊ตฌ๊ธ€๋ง ํ•˜๋‹ˆ๊น MDN Web APIs ๋ฌธ์„œ์— ScreenOrientation.lock()์ด๋ผ๋Š” ๋ฉ”์„œ๋“œ๊ฐ€ ๊ฒ€์ƒ‰๋˜์—ˆ๋‹ค. https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock ScreenOrientation.lock() - Web APIs | MDN The lock() property of the ScreenOrientation interface locks the orientation of the containing document to the specified orient.. 2022. 5. 5.
[Angular] ํšŒ์›๊ฐ€์ž… ์ž…๋ ฅํ™”๋ฉด ๋งŒ๋“ค์–ด๋ณด๊ธฐ (Register Validation Form) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ํšŒ์›๊ฐ€์ž…์„ ํ•  ๋•Œ ์ •ํ•ด์ง„ ๊ทœ์น™์— ๋งž๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒ€์‚ฌํ•˜๋Š” ํ™”๋ฉด ํผ์„ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Set up angular material ์•ต๊ทค๋Ÿฌ์—์„œ๋Š” ๋จธํ„ฐ๋ฆฌ์–ผ ๋””์ž์ธ๋œ UI ์ปดํฌ๋„ŒํŠธ๋“ค์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ ์‚ฌ์ดํŠธ๋ฅผ ์ด๋™ํ•˜์‹œ๋ฉด ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ API๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io ํ„ฐ๋ฏธ๋„์— angular material์„ ์„ค์น˜ํ•ด ์ค๋‹ˆ๋‹ค. ng add @angular/material ์„ค์น˜๊ฐ€ ์™„๋ฃŒ๋œ ๋’ค์— ๋ช‡๊ฐ€์ง€ ์ถ”๊ฐ€์ ์œผ๋กœ ์„ค์น˜ํ•  ๊ฑด์ง€.. 2022. 3. 24.
[Angular] Router์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ธฐ (feat. ํ™”๋ฉด์ด๋™) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ Angular์—์„œ ํ™”๋ฉด์„ ์ด๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•์ธ Router์— ๋Œ€ํ•ด ๋‹ค๋ค„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ํ”„๋กœ์ ํŠธ ์„ค์ • ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ์‹œ์— "Would you like to Angular routing?(๋„ˆ ์•ต๊ทค๋Ÿฌ ๋ผ์šฐํŒ… ์‚ฌ์šฉํ• ๊ฑฐ์•ผ?)" ๋ผ๊ณ  ๋ฌป๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ y๋ฅผ ํ•ด์ค๋‹ˆ๋‹ค. login(๋กœ๊ทธ์ธ) ํ™”๋ฉด์„ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. ng g c pages/login register(ํšŒ์›๊ฐ€์ž…) ํ™”๋ฉด์„ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. ng g c pages/register app-routing.modules.ts Routes์— ์›ํ•˜๋Š” endPoint์™€ component(ํ™”๋ฉด)๋“ค์„ ์„ธํŒ…ํ•ด์ค๋‹ˆ๋‹ค. const routes: Routes = [ { path: 'login', component: LoginCompon.. 2022. 3. 24.
[Angular] NgForm์ด๋ž€? (feat. ngModel,ngSubmit,required) ngForm์ด๋ž€? ์›ํ•˜๋Š” ์–‘์‹์„ ๋งŒ๋“ค์–ด ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ์ง€์‹œ์–ด ์ค‘ ํ•˜๋‚˜์ด๋‹ค. ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•„๋ž˜์™€ ๊ฐ™์ด html ํŒŒ์ผ์— ์ž‘์„ฑํ•œ๋‹ค. ์—ฌ๊ธฐ์„œ ngSubmit์€ ์–‘์‹์— ์ •๋ณด๋ฅผ ๊ธฐ์ž…ํ•˜๊ณ  ํ•ด๋‹น ์ •๋ณด(๋ฐ์ดํ„ฐ)๋ฅผ ์ œ์ถœํ•  ๋•Œ ์‚ฌ์šฉ๋œ๋‹ค. ํ•ด๋‹น ํผ ์•ˆ์— ์›ํ•˜๋Š” ์ •๋ณด๋ฅผ ๊ธฐ์ž…ํ•  elements๋“ค์„ ๋„ฃ๊ณ  ๋ฐ์ดํ„ฐ๊ฐ€ ํ•„์š”ํ•œ elements์—” ngModel ์ง€์‹œ์–ด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ngModel์€ FormControl์˜ ์ผ์ข…์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”์ธ๋”ฉํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์ง€์‹œ์–ด๋‹ค. app.module.ts ngForm์€ FormsModule์— ํฌํ•จ๋˜์–ด ์žˆ๋Š” ์ง€์‹œ์–ด์ด๋ฏ€๋กœ FormsModule์„ ์ถ”๊ฐ€ํ•ด์ค˜์•ผ ํ•œ๋‹ค. @NgModule({ declarations: [AppComponent], imports: [BrowserModule, F.. 2022. 3. 15.
[Angular] ๋ฒ„ํŠผ ์ด๋ฒคํŠธ ์ ์šฉํ•ด๋ณด๊ธฐ (Button Event) app.component.html 1. on-click๋’ค์— ์‹คํ–‰์‹œํ‚ค๊ณ  ์‹ถ์€ ํ•จ์ˆ˜ ์ด๋ฆ„์„ ์ ์œผ๋ฉด ๋œ๋‹ค. 2. (click) ๋’ค์— ์‹คํ–‰์‹œํ‚ค๊ณ  ์‹ถ์€ ํ•จ์ˆ˜ ์ด๋ฆ„์„ ์ ์œผ๋ฉด ๋œ๋‹ค. ShowHi() ๋ฉ”์„œ๋“œ ์ ์šฉ ์‹œ์ผœ๋ณด๊ธฐ app.component.ts ๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ๋ŸฌํŠธ ์ฐฝ์— ์ธ์‚ฌ๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด ์ค€๋‹ค. export class AppComponent { public showHi(): void { alert('์•ˆ๋…•ํ•˜์„ธ์š”'); } } app.component.html ํ•˜์ด ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์•Œ๋ŸดํŠธ ์ฐฝ์ด ๋œจ๊ฒŒ ๋œ๋‹ค. 2022. 3. 15.
728x90
๋ฐ˜์‘ํ˜•