angular 6

Angular 환경에서 RxJS 100% 활용하기

들어가며 안녕하세요, CGEX Frontend Engineer 고승훈입니다. CGEX와 Coinone은 Frontend framework로 Angular를 사용하고 있습니다. Angular를 사용하는 이유는 크게 두 가지로 생각합니다. 하나는 다른 Frontend framework와 다르게 Dependency Injection이 가능하기 때문입니다. Dependency Injection을 사용할 경우 Component의 Dependency를 줄일 수 있는 것은 물론 더 Testable하고, Reusable하며, Readable한 코드를 쓸 수 있기 때문입니다. 다른 이유로는 RxJS 사용을 “Recommend”하고 RxJS가 잘 녹아들 수 있도록 Angular는 많은 노력을 하고 있습니다. RxJS가 별..

angular 2022.09.26

앵귤러 데이터 공유(share,inject)

저번시간까는 우리는 앵귤러의 기본구성형태, 컴포넌트 사용방법에 대해서 살펴보았습니다. 컴포넌트의 FormsModule 또는 ReactiveFormsModule사용법은 사실 쉽지가 않습니다. 여러번 연습하고 자주 사용해야 익숙해지는 부분들 입니다. 자 여기까지 내용을 잠깐 정리 해 보겠습니다. 앵귤러의 기본 구성형태는 모듈 + 컴포넌트의 형태로 이루어져 있습니다. 컴포넌트는 화면을 구성하는 기능을 담당하였습니다. 데이터를 "바인딩" 하는 방법을 컴포넌트에서 우리는 단순하게 데이터를 붙여주거나, FormsModule 또는 ReactiveFormsModule을 사용 해 보았습니다. 이러한 "바인딩" 방법으로 Dom 객체에 접근하지 않고 데이터를 화면에 표출하거나 가져올 수 있었습니다. 모듈에서 우리는 이러한 ..

angular 2022.08.09

Angular : 모듈단위 Lazy Loading 라우팅 설정하기

1. 기본 모듈단위 라우팅 설정은 아래 포스트를 참고한다. Angular : 모듈단위 라우팅 설정하기 0. Angular의 라우팅 설정은 모듈이름-routing.module.ts파일에서 지정할 수 있다. 1. 설정방법 1-1 모듈을 생성한다. 1-2 routing.module.ts에 매핑할 경로와 컴포넌트를 설정한다. 1-3 app.module.ts에 생성한.. kogle.tistory.com 2. Lazy Loading으로 모듈의 라우팅을 설정하는 이유는 2-1 첫화면에서 모든 클라이언트 자료를 받으면 로딩이 지연되기 때문이다. 2-2 그래서 화면에 보이는 부분만 받고 사용자가 다른 페이지로 이동할 때 추가로 필요한 모듈을 다운로드 받는다. 3. 설정 순서 3-0 app.module.ts에 lazy l..

angular 2022.08.08

angular에서 모듈(module)사용해 보기

https://kogle.tistory.com/category/Client%20Technologies/Angular?page=1 에서 참조 하였습니다. 이 때까지 component를 사용하고 template을 사용하는 법을 알았다면 이제 모듈에 대해서 알아보자. 사실 모듈에 대해서는 깊게 생각할건 없다. 그냥 컴포넌트를 모아둔 것이라고 생각하면된다. 아래 자동으로 생성되는 app.module.ts코드를 보자. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declar..

angular 2021.11.08