Angular js5 옵저버블을 promise로 변환하고 boolean 형태의 값 출력 우리 회사와 다른 회사 간의 B2B 계약을 맺었고, 계약을 맺은 직원들에게 우리 어플리케이션의 구독 서비스를 기간 동안 무료로 배포했습니다. 이에 대해 제작하고 적용한 기술에 대해 작성하겠습니다. 새로운 고객 중 계약 목록에 있는 고객들은 자동으로 구독을 시키고, 구독 만료 기간을 설정하는 기술을 제작했습니다. 이를 위해 우리 회사 제품의 프론트는 AngularJS로 제작되었으며, 많은 Observable 타입의 객체들이 있어 동기적으로 처리하기 위해 Promise로 변환하여 이용해야 했습니다. 아래는 Observable 타입을 Promise로 변환하는 예시입니다. import { Observable } from 'rxjs'; function convertObservableToPromise(observa.. 2023. 6. 13. Angular Guard에 대하여 Angular에서 Guard란.. 라우팅 시점에서 실행되는 중간 역할을 하는 기능 특정 조건을 검사하여 사용자가 특정 라우트로 진입할 수 있는지 없는지를 결정함 ex) 사용자의 권한, 인증상태, 데이터 로딩 등 Guard 사용법 1. Guard 클래스 생성 ng generate guard {guard-name} ng generate guard {guard-name} 2. CanActivate 인터페이스 구현 CanActivate 메서드는 라우팅을 허용할 지 여부를 결정하는 논리를 작성하는 곳 3. Guard 등록 Guard 클래스를 모듈에 등록하고, Guard 클래스를 사용하려는 라우터 또는 라우터 그룹에 등록해야 함. 일반적으로 RouterModule.forRoot() 또는 RouterModule.fo.. 2023. 5. 30. Angular js: Directive Directive Angular가 제공하는 디렉티브는 어트리뷰트 디렉티브(Attribute Directive)와 구조 디렉티브(Structural Directive)로 나뉜다. 디렉티브는 DOM의 모든 것을 직접 관리할 수 있다. HTML 요소 또는 어트리뷰트의 형태로 사용하여 디렉티브가 사용된 요소에게 무언가를 하라는 지시(directive)를 전달한다. 디렉티브는 프로젝트 전역에서 사용할 수 있는 공통 관심사를 컴포넌트에서 분리한 것으로 구현하여 컴포넌트의 복잡도를 낮추고 가독성을 향상시킨다. 어트리뷰트 디렉티브 NgClass: CSS 클래스 추가/제거 NgStyle: HTML 스타일 추가/제거 NgModel: HTML 폼 요소에 양방향 데이터 바인딩 추가 구조 디렉티브 NgIf: 조건에 따라 DOM.. 2023. 3. 31. Angular js 컴포넌트 구조 파악 app.component.ts를 예시로 Component 구조를 파악하고 나만의 논리로 정리 해놓겠음 //app.component. import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'my-app'; } @(데코레이터)안 오브젝트 구조를 잘 보아야 함. selector: HTML 템플릿의 이름이며, 다른 템플릿에서 와 같이 html 이름으로 import 가능 templateUrl: 해당 컴포넌트의 HTML 템플릿과 매핑.. 2023. 3. 28. Angular js 구조, 구성 요소 생성 방법 Angular를 초기 제작하면 기본적으로 만들어지는 모듈과 컴포넌트가 있다. 모듈 app-routing.module.ts (이것은 프레임워크로 app 생성 시, y/n 문구가 나오는데 routing은 요즘 웹페이지에 기본 요소이므로 y를 누름) app.module.ts (전역으로 사용할 모듈을 모두 정의하는곳) 컴포넌트 app.component.html (SPA를 제공하는 키 페이지중 하나. Index.html에 로 선언 가능하며,(물론 이름 바꿀 수 있음) 이후 만들어지는 모든 컴포넌트들을 app.component.html에서 관리하여 보여줌) app.component.css or scss (큰 의미있는 파일은 아님. 매 컴포넌트를 생성할 때마다 css or scss 파일이 컴포넌트 폴더에 존재하는데,.. 2023. 3. 28. 이전 1 다음