전체 글302 [Angular] 서버에서 데이터 받아오기 (HttpClient, Observable) 비동기 작업으로 서버에서 데이터 받아오기(공식문서) ■ HttpClient ■ Observable [1] Observable 심볼 로드하기 - RxJS에서 Observable을 import 한다. import { Observable } from 'rxjs'; [2] 데이터 바인딩 - 컴포넌트의 users$ 멤버변수를 만들고 비동기호출 코드를 constructor함수에서 호출한다. export class UsersComponent { users$: Observable; constructor( private apiService: ApiService ) { this.loadUsers(); } loadUsers(): void { this.users$ = this.apiService.req('users/list'.. 2023. 1. 10. [Angular] 의존성 주입(Dependency Injection)과 서비스 객체(class) 의존성 등록하는 3가지 방법 1. @Injectable() "{ providedIn: 컴포넌트명 or 'root' }" [Singleton Services] - 의존성 주입 시 반드시 필요한 데코레이터. 인자에 provideIn필드를 가진 객체를 넣을 경우 한 개의 컴포넌트에만 의존성을 주입한다. 아무것도 넣지 않을 경우 모든 컴포넌트에서 사용할 수 있다. - provideIn의 값을 "root"로 지정할 경우 의존성 객체의 인스턴스를 한번만 생성하고, 의존성 객체를 요청하는 곳마다 모두 같은 인스턴스를 주입한다. "의존성 객체를 이렇게 등록하면 이 객체가 실제로 사용되지 않았을 때 최적화하는 작업을 수행하는데, 이 작업을 트리 셰이킹(tree-shaking)이라고 합니다." 2. @component().. 2023. 1. 6. [Angular] routerLink, Router.navigate or navigateByUrl ■ 라우팅 설정#1 - 템플릿에서 "routerLink" 속성으로 이동하기 1. 모듈(NgModule)에서 import, export 프로퍼티에 "RouterMoudule"을 추가해야 한다. import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; // 라우터 관련 심볼을 로드합니다. const routes: Routes = []; // 라우팅 규칙은 이 배열에 등록합니다. // NgModule의 imports, exports 배열에 RouterModule을 등록합니다. @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [Rou.. 2023. 1. 5. [Angular] 모듈 (NgModule) ■ 정의 NgModule은 컴포넌트와 디렉티브, 파이프 등 기능이 연관된 구성요소를 하나로 묶어 관리하는 단위이며, 기능의 측면이나 애플리케이션 비즈니스 도메인, 업무 흐름, 공통 유틸 등 해당 모듈이 담당하는 부분에만 집중하도록 구성한다. (공식문서) ■ 모듈의 활용성 리액트의 경우 Atomic 디자인 패턴이 유명하다. 최소한의 단위로 컴포넌트를 쪼개어 부품처럼 사용해 새로운 컴포넌트를 만들어낸다. 하지만 a컴포넌트와 b컴포넌트를 조합해 c컴포넌트를 만든다고 했을때 c컴포넌트가 무엇이 어떻게 구성되어있는지 파악하기 어려울 수 있을 것 같다. c컴포넌트에서 a, b컴포넌트의 import 경로(path)와 파일명으로 유추해볼 수 있을 것이다. 더 나아가 a, b컴포넌트의 위치로 이동해 자세히 볼 수도 있을.. 2023. 1. 5. [Angular] 디렉티브 - Directive(지시/명령) 1. 정의Directive는 DOM의 모양이나 동작을 지시하기 위한 명령이다. HTML Element형태로 사용되거나 Element의 attribute의 형태로 사용한다. 2. 디렉티브의 종류① Component: 템플릿이 존재하는 디렉티브입니다. 일반적으로 알고 있는 컴포넌트이다.② Attribute Directive: HTML Element의 attribute로 사용된다. - ngClass : CSS 클래스를 추가하거나 제거한다. - ngStyle : HTML 스타일을 추가하거나 제거한다. - ngModel : HTML 폼 element에 양방향 데이터 바인딩을 연결한다.③ Structural Directive: 조건에 따라 DOM 엘리먼트를 추가하거나 제거하는 디렉티브이다... 2023. 1. 5. [Angular] 디렉티브와 템플릿 문법, 그리고 바인딩 문법 템플릿 문법 ① 문자열 바인딩(interpolation) ② 프로퍼티 바인딩 ③ 어트리뷰트 바인딩 ④ 클래스/스타일 바인딩 ⑤ 이벤트 바인딩 ⑥ 템플릿 참조 변수 ⑦ 기본 디렉티브 ⑧ 입출력 프로퍼티 (@Input, @Output or @Input & @Output 함께 사용하기) 바인딩 문법 ① 문자열 바인딩(interpolation) 카테고리 : (one-way) 컴포넌트 → 뷰 구문 : {{ expression }} ② 프로퍼티 카테고리 : (one-way) 컴포넌트 → 뷰 구문 : [DOM property]="expression" ③ 어트리뷰트 카테고리 : (one-way) 컴포넌트 → 뷰 구문 : [attr.attribute-name]="expression" ④ 클래스 카테고리 : (one-wa.. 2023. 1. 5. 이전 1 ··· 11 12 13 14 15 16 17 ··· 51 다음
