GoGo GoGo

Material에서 Tree 기능은 아래와 같다. Material에서 제공하는 Tree 예제 코드 {{node.icon}} {{node.displayName}} {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} {{node.displayName}} tree를 사용하려고 예제 코드를 실행시켰는데, 특수 문자(코드에서는

NGXS는 Angular 상태 관리 패턴이자 라이브러리이다. React에서 상태 관리를 하기 위해 Redux를 사용했다면, Angular에서는 NGXS를 사용한다고 생각하면 좀 쉽다. NGXS는 Redux에서 사용되는 CQRS 패턴을 기반으로 모델링되었지만, 클래스 및 데코레이터와 같은 최신 TypeScript 기능을 사용하여 상용구를 줄였다. NGXS에서 주요 개념은 Store, Actions, State, Selects가 있다. 이 4가지 개념들의 흐름은 아래 그림과 같다. React에서 Redux를 공부할 때 봤던 그림과 비슷한데, 이 그림만 보면 완전히 이해가 잘 되지 않았다. documents 페이지에서는 다 영어로 되어있어서, 제대로 이해하기 힘들었다(ㅠㅠ) 그래서 ngxs에서 제공하는 샘플 ..

Angular tutorial 프로젝트를 따라하면서 Observable를 사용했는데, Observable, Observer 두 단어로 설명하다보니 잘 이해가 되지 않았다. 두 용어에 대해 찾아보다가 PoeimaWeb에 아주 좋은 예시가 나와있어 정리해본다. 1. Observable ? Observer? TV 방송국과 TV의 관계를 예로 들어보자. 방송국에서는 영상 정보를 계속해서 방출(emit)해야하고, TV는 방송국에서 방출하는 영상 정보를 가져와야한다. TV에서 방송국의 영상 정보를 가져오기 위해서는 방송국에 요청을 해야하는데, 이 과정을 구독(subscribe)라고 한다. (이 방식은 Push-scenario라고 하며, Pull-scenario 방식은 글 하단 URL에서 확인할 수 있다.) 방금 전..

Angular Tutorial을 따라하면서 기존 JQuery와는 조금 다른 데이터 바인딩 방법에 대해 알게 되었다. Data binding은 View와 Model을 하나로 연결하는 것을 의미한다. 1. JQuery에서의 Data binding 기존 JQuery에서는 DOM에 직접 접근해서 데이터를 조작하는 코드를 작성해야 했다. 아래 예제 코드를 보면, HTML 파일에서 h1 요소가 p 요소로 변경되면, Javascript에서도 $('h1')을 $('p')로 바꿔줘야 한다. 이처럼 Javascript는 DOM을 직접 조작하는 방식이기 때문에, View가 변경되면 로직도 변경될 가능성이 매우 높다. 하지만 Angular의 경우, DOM에 직접 접근하지 않고, Component 클래스 파일에서 Templat..

Angular 애플리케이션을 구성하는 기본 요소와 그 구조를 알아보자. 1. 모듈(Module) Angular 애플리케이션을 실습하다보면 가장 익숙한 것은 NgModule 이다. NgModule은 비슷한 기능을 하나로 묶어 관리하기 쉽도록 만든 모듈이다. 그렇다면 Angular에서 NgModule은 어떻게 이루어져 있을까? 아래 파일은 Angular에서 최상위 모듈을 뜻하는 AppModule이다. 여기서는 Angular 애플리케이션에서 사용하는 컴포넌트, 모듈 등을 선언한다. declarations와 imports에 포함된 컴포넌트와 모듈들은 튜토리얼을 따라하면서 추가된 것으로, 실제로 초기에는 이렇게 많지 않다 ^^; AppModule에서 다른 모듈을 사용한 것처럼, NgModule에서도 다른 NgMo..

Angular-CLI는 간단한 명령어를 사용하여 Angular 프로젝트 스캐폴딩(scaffolding)을 생성, 실행, 빌드할 수 있으며 Angular의 다양한 구성 요소를 선별적으로 추가할 수 있는 커맨드-라인 인터페이스(command line interface)이다. 개발용 서버를 내장하고 있어서 간단히 프로젝트를 실행시켜서 동작을 확인할 수 있다. Angular CLI는 Angular 프로젝트 스캐폴딩을 간단한 명령어로 생성해 주어 개발환경 구축에 소요되는 시간을 최소화할 뿐 아니라 표준 스타일 가이드를 제공한다. Angular CLI가 지원하는 기능은 아래와 같다. Angular 프로젝트 생성 Angular 프로젝트에 컴포넌트, 디렉티브, 파이프, 서비스, 클래스, 인터페이스 등의 구성 요소 추가..

프로젝트를 만들어보기 위해 npm 패키지를 설치하려고 했는데 아래와 같은 에러가 발생했다. internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module '../lib/utils/unsupported.js' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:..

TypeScript는 Javascript(ES5)의 상위 확장 개념 언어이다. 그래서 ES5의 문법을 그대로 사용할 수 있고, ES6에서 새롭게 추가된 기능들을 기존의 자바스크립트 엔진에서 실행할 수 있다. (Babel을 사용하지 않아도 된다.) 장점 1. 정적 타입 지원 기존 Javascript에서 함수를 선언할 때 아래와 같이 사용한다. 위 함수는 2개의 매개변수를 전달받아 두 수의 합을 반환하는 함수이다. 매개변수의 자료형을 다르게 호출해도 자바스크립트 엔진은 동적으로 값을 반환한다. TypeScript는 정적 타입을 지원하는데, 아래와 같이 작성한다. 이처럼 명시적으로 정적 타입을 지정하는 코딩 방식은 여러 장점이 있다. - 컴파일 단계에서 오류를 확인할 수 있다. - 개발자의 의도를 명확하게 코..