sharingStorage

ngx-translate 라이브러리를 이요하여 Angular 애플리케이션에 다국어 변환 기능을 적용하는 방법을 정리해 보려고 한다. 다국어 변환에 있어서 Angular는 자체 i18n(Internationalization) 기능을 제공하므로 두가지 중 선택하면 된다. ngx-translate 설치 및 사용법 https://github.com/ngx-translate/core 공식문서에도 설명이 굉장히 잘 돼있다. 1. npm 모듈을 설치한다. npm install @ngx-translate/core 2. 설치가 완료되면 상위모듈 (ex AppModule)에 TranslateModule 을 import한다. (본인은 defaultModule) 이때 forRoot로 적용한다. loader를 설정하기 위해 h..

메뉴에 route를 구성해주어도 라우팅된 메뉴를 한번 더 크릭하면 아무일도 일어나지 않습니다. load(href: string) { this.router.navigateByUrl('/blank-for-reload', { skipLocationChange: true, }).then( () => { this.router.navigateByUrl(href); } ); } 많은 분들이 사용하는 방법이 blank한 페이지를 한번 띄워주고 다시 의도한 페이지를 띄우는 것인데 이는 새로고침과 같은 효과를 볼 수 있습니다. 메뉴를 클릭하면 직접 router에 navigateByUrl을 부르지 않고 위처럼 한번 감싼 load메소드를 호출함으로서 메뉴에서 버튼을 누르면 빈화면으로 갔다가 의도한 패스로 가는 것입니다. 주의..

Angular Directive Angular에는 DOM모양이나 동작을 지시하기 위한 명령인 Directive가 있다. HTML에 Angular가 간섭할 부분을 표시한다고 이해하면 쉽습니다. 앵귤러의 Directive에는 -Component Directive : 템플릿과 함께 사용하는 디렉티브 같이 selector가 app-root인 app.component를 표출해달라는 뜻 -Attribute Directive : element나 component, 또다른 directive의 모양을 변경시키는 디렉티브 -Structure Directive : DOM element를 더하거나 빼서 DOM을 변화시키는 디렉티브. ngIf, ngFor, ngSwitch등이 있다. -Costomer Directive : 사용..

부모 자식 디렉티브/컴포넌트끼리 데이터 공유하기 + @Input(), @Output 구조 알아보기. 이런 구조가 있다고하면 parent-component는 child-component의 컨텍스트를 제공하는 역할을 한다. @Input(), @Output() 데코레이터를 활용하면 자식컴포넌트가 부모 컴포넌트와 통신할 수 있다. input은 부모컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 output은 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용 @Input() import {Input} from '@angular/core'; Input 심볼을 로드해야한다. typescript 파일에서 html파일로 바인딩하려면 {{}} 이 문법 사용하면 되는데 ts파일끼리 데이터를 주고받으려면 데이터를 받..

What? Angular란 google에서 만든 SPA방식의 프론트엔드 개발을 위한 자바스크립트 프레임워크이다. Angular는 Angular JS와 완전히 다른데 쉽게 생각하면 Angular 1버전을 Angular JS, Angular 2버전 이상을 Angular라고 부른다. (Angular JS는 11년만인 21년 12월31일 EOL에 도달하였으며 서드 파티지원만 가능하다고 한다.) Why Angular의 장점 - 컴포넌트기반 Angular를 이용한 프론트엔드 웹 개발은 DI의 강력한 지원을 통해 기능에 따라 코드를 분리하고 재사용이 용이하다. 기능을 담은 Service 클래스와 HTML 컴포넌트를 담당하는 Component클래스가 명확히 구분되고 이로인해 Service클래스는 여러 Component..

- RxJS : RxJS는 Reactive Extension for JavaScript의 약어로 Javascript 라이브러리이다. Reactive X는 Observer패턴, Iterator패턴, 함수형 프로그래밍을 조합하여 제공하는 것이며 RxJS는 이벤트 스트림을 Observerable이라는 객체로 표현한 후 비동기, 이벤트 기반의 프로그래밍 작성을 돕는다. 이벤트 처리를 위한 API로 다양한 연산자를 제공하는 함수형 프로그래밍 기법도 도입되어 있다. ※Reactive Extensions : Reactive X프로젝트에서 출발한 Reactive Programming을 지원하기위해 확장한 것 . - Reactive Programming : : Reactive 하다는 것은 데이터를 다룰 때에 스트리밍형식..