본문 바로가기

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.

이전 1 다음

728x90

티스토리툴바