1장. RxJS 소개와 개발 환경 구축 요약

1. 리액티브 프로그래밍이란 ?

리액트 프로그램밍은 비동기 프로그래밍 패러다임의 하위 개념으로 이벤트나 배열 같은 데이터 스트림을 비동기로 처리해 변화에 유연하게 반응하는 프로그래밍 패러다임.

• 데이터 스트림 (Data streams)
• 변화의 전달 (The propagation of change)

'데이터 스트림'은 데이터의 흐름이다. 보통 정적인 데이터 스트림은 배열을, 동적인 데이터 스트림은 이벤트 이미터(Event Emmiter)를 뜻한다.

'변화의 전달'은 데이터 스트림 안에서 어떤 값이 변했을 때의 전달이 바로 이루어지는 것을 뜻한다.

 

리액티브 프로그램은 정적 / 동적인 데이터 흐름의 변화에 곧바로 반응하는 프로그램을 만드는 것

---

2. RxJS 란 ?

리액티브 프로그래밍을 지원하는 자바스크립트 라이브러리이다. 이벤트 스트림을 옵저버블(Observable)이라는 객체로 표현한 후 비동기 이벤트 기반의 프로그램 작성을 돕는다. 이벤트 처리를 위한 API로 다양한 연산자를 제공하는 함수형 프로그래밍 기법도 도입되어 있다.

 

2-1. Node.js

Node.js는 자바스크립트 기반으로 네트워크 애플리케이션을 개발하는 플랫폼이다.

 

2-2. npm

npm은 Node.js의 패키지 관리자이다.Node.js 기반 코드 모음을 쉽게 설치하거나 공유해 사용할 수 있다. 이러한 코드 모음을 패키지 또는 모듈이라고 하며 package.json 안에 메타데이터를 담고 있다.

또한, package.json이 있는 디렉터리에서 npm install 명령을 실행하면 package.json에 선언된 의존 모듈 목록을 분석해 node_modules라는 디렉터리 안에 의존 모듈들을 설치 한다.

 

설치 명령

#전역 범위에 모듈 설치
npm install --global <모듈 이름>

#로컬 범위에 모듈 설치
npm install --save <모듈 이름>

#로컬 범위에 개발용 모듈 설치
npm install --save-dev <모듈 이름>

 

전역 범위에 패키지를 설치하면 package.json에 따로 모듈 설치 기록이 추가 되지 않는다. --save 옵션으로 설치하면 해당 모듈 이름이 package.json의 dependencies항목에 추가되고, --save-dev옵션으로 설치하면 해당 모듈 이름이 devDependencies항목에 추가된다.

 

2-3. Git

Git은 리눅스를 만든 리누스 토발즈가 만든 버전 관리 시스템이다.

 

2-4. RxJs

• rx.all.js : 모든 연산자를 포함하는 라이브러리 세트
• rx.lite.js : 필수 연산자만 포함해서 용량을 줄인 라이브러리 세트
• rx.core.js : RxJS의 핵심 부분만 포함한 라이브러리 세트

---

3. RxJS 개발 환경 설정하기

3-1. script태그로 RxJS 사용하기

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

 

3-2. 모듈 번들러로 RxJS 사용하기

• 모듈(예를 들면 CommonJS 프로젝트)을 사용해서 프런트엔드 코드를 작성한다.
• 시작점(Entry Point)이 되는 자바스크립트 파일을 저장한다.
• 모듈 번들러는 시작점에서 모듈과 관련된 부분을 분석해서 하나의 자바스크립트 파일로 번들링 해준다.

npm install --save rxjs

 

RxJS를 설치 했다면 Node.js 백엔드 코드처럼 모듈 작성 방식으로 RxJS코드를 작성하면 된다.

require 함수를 사용한다.

//RxJS 모듈 가져오기
const { range } = require('rxjs');

range(1, 10)
...

 

 

모듈 번들러의 등장

브라우저에서는 의존 모듈들을 로컬에서 불러올 수 있는 상황이 아니므로 CommonJS 방식을 사용하기 어렵다. 이를 극복하기 위해 시작점이 되는 파일에서 CommonJS 방식을 사용한 모듈들을 분석한 후 하나의 자바스크립트 파일로 병합해주는 [모듈 번들러]가 등장했다.

대표적인 라이브러리로 브라우저리파이와 웹팩이 있다. 

 

 

웹팩으로 모듈 번들링하는 방법

//math.js
function add(a, b) {
	return a + b:
}

exports.add = add;

//entrypoint.js
const math = require('./math');

console.log('1 + 2 =', math.add(1,2));

* 직접 작성한 모듈이 아니라 npm으로 설치해 node_modules 디렉터리 아래에 있는 모듈이라면 별다른 경로 지정없이 바로 모듈 이름을 쓰면 된다.

 

웹팩을 사용해 모듈화된 2개의 파일을 하나의 파일로 번들링

 

웹팩설치

npm install webpack webpack-cli --global

 

시작점이 되는 파일을 지정하면 웹팩이 모듈 관계를 알아서 분석한 후 파일 하나로 번들링 해준다.

webpack entrypoint.js bundle.js

 

브라우저에서는 이렇게 합한 bundle.js를 script 태그로 추가해서 사용할 수 있다.

<script src="bundle.js"></script>

 

 

웹 프로젝트 최적화를 고려하는 모듈 번들러 사용법

• 소스 코드의 불필요한 부분을 제거하고 용량을 작게 만드는 압축 작업 실행
• ES2015+ 문법으로 작성한 코드를 구형 브라우저에서도 인식할 수 있도록 ES5 코드로 변환하는 작업 실행

프로젝트 루트 디렉터리에 webpack.config.js 라는 이름의 설정 파일을 저장한 후 이를 자동으로 인식해서 빌드 작업을 실행 할 수 있다.

 

//RxJS기반의 index.js
const { range } = require('rxjs');
const { filter, map, scan } = require('rxjs/operators');

range(0, 10).pipe(
	filter(x => x % 2 === 0),
    map(x => x + x),
    scan((acc, x) => acc + x, 0)
).subscribe(x => console.log(x));

 

ES2015+를 지원하지 안흔 브라우저에서 코드를 인식할 수 있도록 ES5로 변환한 후, 자바스크립트의 용량을 줄여주는 UglifyJS까지 실행한다고 가정하여 webpack.config.js 구성

//webpack.config.js
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
	//시작점
    entry: './index.js',
    
    //번들링 결과 파일
    output: {
    	filename: 'bundle.js',
        path: path.resolve(_dirname)
    },
    
    //결과 파일의 용량을 줄여주는 Uglify 활성화
    plugins: {
    	new UglifyJSPlugin(),
    },
    module: {
    	rules: [
        	{
            	//파일 확장명이 js인 파일에 ES2015+로 코드 변환 실행
                test: /\.js$/,
                
                //node_modules에 있는 모듈들은 코드 변환 제외
                exclude: /node_modules/,
                use: {
                	//ES2015+ 문법을 ES5로 바꾸는 바벨(babel)로 코드 변환
                    loader: 'babel-loader',
                    options: {
                    	//modules 변수를 false로 설정하면 웹팩이 모듈 관련 처리를 실행
                        presets: [
                        	['env', {
                            	modules: false
                            }]
                        ]
                    }
                }
            }
        ]
    }
};

 

이 설정에서 사용하는 모듈들을 --save-dev 옵션으로 설치

#package.json 파일 생성
npm init -y

#필요한 모듈들 설치
npm install --save rxjs
npm install --save-dev webpack webpack-cli babel-loader babel-core babel-preset-env uglifyjs-webpack-plugin

 

만약 웹팩을 전역 범위에 설치하지 않은 경우에는 package.json의 scripts항목에 아래 코드를 추가하고 npm run build 라는 명령만 이용해 웹팩으로 번들링 할 수 있다.

...
"scripts": {
	"build": "webpack",
    "test": "echo \"ERROR: no test specified\" && exit 1"
},
...

 

모든 설정이 완료되면 커맨드라인에서 npm run build

 

bundle.js 파일 생성 완료