GoGo GoGo

interface 인터페이스는 자바 공부할 때 배웠던 개념인데, ES6에서는 지원하지 않지만 Typescript에서는 인터페이스를 지원하고 있다. 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용 가능하다. 인터페이스에 선언된 프로퍼티, 메소드 구현을 강제하여 일관성을 유지할 수 있다. ✅ interface vs class 인터페이스는 직접 인스턴스를 생성할 수 없고, 모든 메소드는 추상 메소드로 이루어져있다. (abstract 키워드 사용 X) 클래스는 직접 인스턴스 생성이 가능하다. ✅ Duck typing (덕타이핑) 인터페이스로 구현하지 않았지만, 해당 인터페이스에서 정의한 프로퍼티나 메소드를 갖고 있다면, 그 인터페이스를 구현한 것으로 인정한다. 구조적 타이핑(Structural..

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에서 확인할 수 있다.) 방금 전..

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