RxJS에서의 개념중 Cold observable / Hot observable을 알아보고자 한다. [Javscript] RxJS 일반적으로 옵저버블(Observable)은 구독(Subscribe) 하기 전 까지 동작하지 않는다. 이러한 방식을 Cold observable이라고 한다. 구독을 하지 않아도 동작하는 방식을 Hot observable이라고 한다. RxJS의 Observable은 기본적으로 Cold observable의 특성을 지니고 있다. 이 두개의 개념에 대해 살펴보자. Cold observable 구독되기 이전에는 데이터 스트림을 방출(emit) 하지 않으며, Cold observable을 옵저버가 구독하게 되면 처음부터 동작하기 시작한다. 옵저버블을 구독하는 옵저버는 하나 이상일 수 있..

RxJS Reactive Extensions For JavaScript ReactiveX 프로젝트에서 출발한 리액티브 프로그래밍을 JavaScript에서 지원하기 위해 확장 Observer Pattern, Iterator Pattern, Functional Programming을 조합하여 제공 Event Stream을 Observable 이라는 객체로 표현하여 비동기 이벤트 기반의 프로그램 작성을 도움 모든 이벤트를 Observable로 추상화하여 시간에 따른 스트림으로 간주할 수 있게함 각 Event가 Observer(Event Hanlder)에게 전달되기 전 map, filter 등의 Operator(연산자)를 이용해 Event를 필요한 형태로 재가공하여 Observer에게 전달할 수 있음. Obse..

Webpack 여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러다. 하나의 시작점(Entry Point)으로 부터 의존적인 모듈을 전부 찾아내서 하나의 파일로 만든다. 이 결과물을 Output 이라고 한다. Node.js 에서 작동한다. 왜 사용할까? - import/export 구문이 없었던 모듈의 이전 상황 Javascript는 '' 태그를 사용하여 외부의 스크립트 파일을 가져올 수는 있지만, 파일마다 독립적인 스코프를 갖지 않고 하나의 전역 객체(Global Object)를 공유한다. '' 태그는 선언된 순서대로 로딩을 시작하고, 적용을 진행하게 된다. 이는 전역 스코프에 적용되기 때문에 아래와 같은 문제점이 발생하게 된다. 2개의 파일 내에서 같은 변수명 혹은 함수명을 사용한다면 뒤늦게 로딩된 ..

Javascript ES6(ES2015) 버전으로 오게 되면서 새롭게 추가된 기능중 하나다. 이 글에서는 Generator Function에 대해 다루게 될 것이며, 다루는 내용중 yield와 next에 대한 내용도 나온다. Generator Function 제너레이터 함수는 일반 함수와 달리 한번의 실행으로 끝을 보지 않고, 사용자의 요구에 따라 다른 시간에, 다른 값으로 여러 값을 반환할 수 있다.(여기서 말하는 사용자의 요구란 next, return, throw에 대한 내용이다.) 이는 무엇을 뜻하냐면 일시적으로 정지가 될 수도 있고, 다시 시작이 될 수도 있다는 것이다. 제너레이터 함수의 반환 값은 "반복 가능한 객체(iterable object)" 라는 것이다. 제너레이터 함수의 사용법은 fun..

많음 시스템이 있지만, 간단하게만 정리해보았다. Babel ES 하위버전에서도 돌아갈 수 있도록 번역을 해준다. 예를 들어, ES6 문법으로 코딩을 했을 때 ES5 Browser에서는 ES6 문법을 모르기 때문에 오류가 발생한다. 이를 번역해주는 역할을 Babel이 하고 있다. Polyfill 없는 함수를 채워주고 있는 역할을 하고 있다. Babel이 번역을 도와주고 있다면, Polyfill은 없는 함수를 채워준다. 예를들어 ES5에서는 temp(); 라는 함수가 없지만 ES6에서는 temp();라는 함수가 있을 때 Polyfill이 ES5에서도 동작이 가능하게끔 temp();라는 함수를 만들어주는 역할을 한다. Node.js 대표적인 Javascript Runtime이다. *만약 컴퓨터 내에서 프로그램..

Javascript는 기본적으로 동기적 처리를 하는 특성을 갖고 있다. 동기(Syncronous) : 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식 비동기(Asynchronous) : 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식 (사람들이 많이 비동기 처리를 하고 있다고 의식하며 알고 있는데, 사실은 동기적 처리를 진행하고 있고 비동기로 착각하게 되는 이유는 개발자가 Javascript 코딩을 진행하면서 비동기적으로 처리를 진행하고 있기 때문이다.) 그렇다면 비동기로 처리하는 방법은 무엇일까? FE 개발자들이 많이 사용하는 방법 2개가 있다. ES8 이전 버전에서는 Promise, ES8 이후 버전에서는 Async / Await 문법을 사용하여 많이 개발을 진행한다...