728x90 ๋ฐ์ํ ๐ป Frontend/Angular9 [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. ์ด์ 1 ๋ค์ 728x90 ๋ฐ์ํ