Two-way binding (양방향 바인딩) Angular의 양방향 바인딩 구문은 대괄호와 괄호의 조합입니다 [()]. 이 [()]구문은 다음과 같이 속성 바인딩 []괄호와 이벤트 바인딩 괄호를 결합 ()합니다. 양방향 데이터의 내용은 속성, 이벤트(input, output)의 패턴을 사용하며 아래와 같이 사용해야합니다. @Input() 속성의 이름 @Output() 속성의 이름 + Change @Input()input; @Output()inputChange; @Input()size; @Output()sizeChange; 이를 사용하게 된다면 예를들어 // 자식 컴포넌트 - + FontSize: {{size}}px // 부모 컴포넌트 Resizable Text // 기본값 설정 fontSizePx = 16; [( )] 이 조합은 축약형입니다. (속.. [RxJs] Observable & Observer Observable 자바스크립트에서 하나의 item과 여러개의 item을 처리하는 2가지 방법(Async, sync)이 있습니다. Async는 비동기 방식으로 흔이 알고 있는 setTimeout, xhr, event등이 있습니다. async한 상황에서 우리가 처리하던 방식은 callback 또는 주로 사용하던 promise가 있었습니다. 그치만 promise나 callback은 단 하나의 data을 받고 종료되어 버리는 패턴을 가지고 있습니다. then(), catch()를 통해 데이터를 받고 끝나는 것 입니다. 그렇기 때문에 이 데이터들이 시간과 연계되어 sequential하게 받아야 하는 상황이 생긴다면 promise를 사용하여 해결 할 수 없습니다. 이때 사용할 수 잇는 것이 Observable객체.. Angular의 의존성 주입 이해하기 – @Inject, @Injectable, 토큰과 프로바이더 Angular의 프로바이더는 애플리케이션을 개발하는데 있어 핵심적이며 의존성을 주입할 수 있는 다양한 방식을 제공한다. 이 포스트는 @Inject()와 @Injectable() 데코레이터 뒤에서 일어나는 일을 살펴보고 사용하는 방법을 확인하려고 한다. 그런 후에 토큰과 프로바이더를 이해하고 Angular가 실제로 어떻게 의존성을 찾고 생성하는지 살펴본다. 또한 Ahead-of-Time 소스 코드도 설명할 것이다. 프로바이더 주입하기 Angular는 의존성 주입(DI)를 사용할 때 수많은 마법 같은 일이 일어난다. Angular 1.x에서는 문자열 토큰을 사용해서 세세한 의존성을 처리하는 간단한 접근 방식을 사용했다. 이 방법은 이미 알고 있을 것이다. function SomeController($scop.. 서버 사이드 렌더링 (Server-side Rendering, SSR): Angular Universal Angular Universal은 Angular 애플리케이션을 서버에서 실행하는 테크닉입니다. 일반적으로 Angular 애플리케이션은 브라우저 에서 실행됩니다. DOM에 페이지가 렌더링되고 사용자의 동작에 반응하는 것도 모두 브라우저에서 이루어집니다. 하지만 이와 다르게 Angular Universal은 서버 에 미리 정적 으로 생성해둔 애플리케이션을 클라이언트가 실행하고, 그 이후에 클라이언트에서 앱을 다시 부트스트랩하는 테크닉입니다. 이 방식을 사용하면 애플리케이션을 좀 더 빠르게 실행할 수 있기 때문에 사용자가 보는 애플리케이션 화면도 빠르게 띄울 수 있습니다. 서버사이드 랜더링이 필요한 이유? 검색 엔진 최적화(SEO)를 통해 웹 크롤러에 대응하기 위해 모바일 장비와 저사양 장비에서 동작하는 성능.. 로컬 개발환경, 워크스페이스 구성하기 로컬 개발환경, 워크스페이스 구성하기 이 튜토리얼을 시작하려면 Angular 앱 개발 환경인 Node.js®와 npm 패키지 매니저가 설치되어 있어야 합니다. Node.js Angular 앱을 개발하려면 Node.js 10.9.0 이상의 버전이 필요합니다.\ - 버전을 확인하려면 터미널이나 콘솔창에서 node -v 명령을 실행해 보세요 - Node.js가 설치되어 있지 않다면 nodejs.org에서 다운받아 설치하면 됩니다. npm 패키지 매니저link Angular와 Angular CLI, Angular로 동작하는 예제는 모두 npm 패키지 형태로 제공되는 라이브러리를 사용해서 동작합니다. 그리고 npm 패키지는 npm 패키지 매니저를 사용해서 설치합니다. 이 문서는 Node.js를 설치할 때 기본으로.. 이전 1 다음
