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 : 사용..

@NgModule NgModule이란 @NgModule 데코레이터가 지정된 클래스이며 이것은 모듈에 있는 컴포넌트 템플릿이 어떻게 컴파일 되는지 인젝터를 어떻게 생성할지 등을 설정한다. angular 애플리케이션이 모두 하나 이상 가지고 있으며 Angular 프레임워크가 제공하는 기능을 불러와서 사용할 수 있게 하는 것들을 말한다. Angular 프로젝트에서 app.module.ts는 Component를 관리해주는 역할을 한다고 볼 수 있다. declarations - 이 모듈에서 사용 가능한 뷰 클래스를 정의한다. angular에서는 component, directive, pipe 세 종류가 존재한다. 모듈에 선언된 구성요소는 모듈 내에서만 사용가능 exports - 다른 모듈이나 컴포넌트에서 접근할 ..

이번에는 Angular의 생명주기 훅을 다뤄보려고한다. 생명주기 훅은 constructor와 비슷한 역할을 한다. consturctor는 angular의 기능이 아니라 클래스 자체의 기능(자바스크립트 엔진)이여서 constructor가 호출되는 시점에는 Angular의 제어의 바깥에 있다. 따라서 앵귤러가 컴포넌트를 초기화 했는지 알기에는 적합하지 않다. 생명주기 훅을 만든 후 Angular는 컴포넌트가 생성된 후에 설정을 마무리하기 위한 메소드를 한차례 실행할 수 있게 되었다. ngOnInit 앵굴러가 컴포넌트 초기화를 완료했다는 점을 전달하기 위해 존재하며 바인딩한 값을 읽을 수 있다고 보장할 수 있는 상황에서 호출된다. constructor는 최소한으로 초기화해야한다. 일반적으로 컴포넌트는 가볍고 ..

부모 자식 디렉티브/컴포넌트끼리 데이터 공유하기 + @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..