자바스크립트

RxJS 목차 Ch01. 반응형으로 생각하기 Ch02. RxJS로 배우는 반응형 프로그래밍 Ch03. 핵심 연산자 Ch04. RxJS에서의 시간 - 상 이전 포스팅의 내용에 이어서 RxJS에서 다루는 시간에 대해서 다뤄 보고자 한다. 사용자 입력 처리하기 interval()과 timer() 정적 메서드는 모두 옵저버블을 만들고 설정된 오프셋 시간 후 작업을 시작하는데 사용된다. 이들은 delay()와 함께 설정된 간격 또는 설정된 시간 후에 한 번 실행되는 미래의 작업을 스케줄링 할 때 가장 많이 사용하는 조합이다. 이 연산자는 수행할 작업을 알고 있으며 이를 나중에 실행되도록 스케줄링하려는 명시적 이벤트에 사용하기 적합하다. 그런데 만약 마우스 움직임이나 키 입력처럼 동적 이벤트 이미터에 일련의 이벤트..

이번 포스팅에서는 자바스크립트의 클로저에 대해서 정리를 해 보려고 한다. 그리고 이 포스팅을 마지막으로 카일 심슨 저

이번 포스팅에서는 함수 vs 블록 스코프에 대한 비교와 호이스팅의 개념까지 정리를 해 보려고 한다. 함수 기반 스코프 스코프는 컨테이너나 바구니와 같은 구실을 하는 일련의 '버블'이고 변수나 함수 같은 확인자가 그 안에서 선언된다. 자바스크립트는 함수 기반 스코프를 사용하기 때문에 함수는 이러한 버블을 만든다. 많은 개발자들은 각각의 선언된 함수는 버블을 생성하지만, 다른 자료구조는 자체적인 스코프를 생성하지 않는다고 알고 있다. 위 예제 코드에서 foo()의 스코프 버블은 a,b,c와 bar를 포함한다. 따라서 foo() 바깥에서는 이들에게 접근할 수 없다.(접근 시 ReferenceError 발생) 하지만 foo() 안에서는 이 모든 확인자(a, b, c, foo, bar 등)에 접근이 가능하고, b..

이번 포스팅에서는 RxJS에서 시간에 대한 개념을 정리해 보고자 한다. 왜 우리가 시간을 신경써야 하는지, RxJS에서는 시간을 어떻게 처리하는지 등에 대해서 알아보고자 한다. 앞서 우리가 살펴본 바에 따르면 옵저버블은 시간 경과에 따른 이벤트의 무한 시퀀스이다. 동기적인 코드라면 실행 시간을 정확하게 측정하여 예측할 수가 있지만 비동기는 명령들이 선형적으로 실행이 되지 않기 때문에 실행 시간을 정확하게 알 수 없고 예측은 더더욱 할 수가 없다. 따라서 특정 작업이 언제 완료될지를 추측하는 것이 아닌, 작업에 반응한다는 방식으로 접근해야 한다. 왜 시간을 신경써야 할까 시간을 신경써야 하는 이유는 단순하다. 시간이 오래 걸리면 사용자는 초조함을 느끼고 결국에는 떠난다. 따라서 우리는 시간을 최대한 단축할..

CSS in JS 기존에 CSS는 .css 파일에 작성해서 사용하였다. 프로젝트의 규모가 커지면서 항상 큰 스타일 시트를 유지하는 것이 번거로워졌고 그래서 새로운 아이디어가 나왔다. 스타일시트를 문서레벨이 아닌 컴포넌트 레벨로 추상화 하여 마치 모듈처럼 사용하는 것이다. CSS-in-JS는 JS를 사용하여 스타일을 선언적이고 유지보수가 가능한 방식으로 설명한다. JS를 CSS로 전환하는 고성능 컴파일러로, 런타임 및 서버 사이드에서 작동한다. 참고로 인라인 스타일과 CSS-in-JS는 다르다. 차이점이 있다면 인라인 스타일은 DOM 노드에 속성으로 추가하였고, CSS-in-JS는 DOM 상단에 Hello CSS-in-JS 기존에 CSS는 컴포넌트 기반을 고려하여 만들어진 적이 없었다. CSS-in-JS는..

이전 RxJS 포스팅에서는 다음과 같은 주제들에 대해 다루어 보았다. Ch01. 반응형으로 생각하기 Ch02. RxJS로 배우는 반응형 프로그래밍 이번 포스팅에서는 위에서 살펴본 개념들을 바탕으로 옵저버블을 만들어 보고, 모든 데이터 소스에 대한 시간에 따른 데이터 입출력을 옵저버블 컨텍스트로 관리하는 법을 배우려고 한다. 이런 상황을 가정해 보자 사용자가 서버에 장기 실행 ajax 요청을 보내고, 호출 후 다른 버튼을 눌러 다른 페이지로 이동하였다. 특정 데이터를 사용할 수 있게 데이터를 풀링했는데 예외가 발생하여 이제 데이터를 사용할 수 없게 되었다. 우리가 사용자에게 무한히 시스템 리소스를 사용할 수 있게 하지는 못하고 따라서 이러한 경우 문제가 발생할 수 있다. 이를 해결하기 위해 RxJS를 사용..

본 포스팅에서는 RxJS를 통해 반응형 프로그래밍의 원리에 대해서 조금 더 자세하게 알아보는 시간을 가지려고 한다. 나의 이전 여러 포스팅에서 객체지향 방식에 대해서 설명을 했었다. 객체지향 방식에서는 클래스가 주요 작업 단위가 된다. 이러한 클래스를 얻을 때 까지 컴포넌트는 세분화가 되며 클래스의 상태를 조작하면 어플리케이션의 로직이 개선된다. [C++] OOP 1 [C++] OOP 2 [C++] OOP 3 하지만 반응형 프로그래밍은 조금 다르다. 기본적으로 반응형 프로그래밍에서 기본 작업 단위는 스트림(stream)이다. 반응형 프로그래밍을 하기 위해서는 스트림 관점에서 생각하고 데이터를 유지하는 대신 원하는 상태에 도달할 때까지 데이터를 흐르게 하고 그 과정에서 변환을 적용하도록 설계해야 한다. 클..

개인적인 목적으로 RxJS를 공부하기 시작했다. 공부한 내용들을 여기에서 정리하고 공유하고자 한다. 동기 연산 vs 비동기 연산 동기 코드와 비동기 코드의 차이는 지연시간(latency)이 있는지 없는지의 차이가 가장 큰 차이점이 아닐까 싶다. 일반적으로 비동기적인 코드보다 동기적인 코드가 이해하기가 더 수월하다. 하지만 우리가 개발하는 어플리케이션에서는 메시지를 보내고 응답이 올 때 까지 시간이 걸리고 이 시간들이 쌓이는 동안 아무것도 하지 않으면 어플리케이션이 정상적으로 돌아가지 못하는 수준까지 가는 경우도 있다. 기존의 이러한 방식에서 벗어나 복잡성이 증가한 어플리케이션에서 유휴 상태가 없이 사용자의 시간을 아낄 수 있게 하기 위해서는 비동기적인 처리가 불가피하다. 동기 코드를 구현하는 가장 쉽고 ..