Rxjs 반응형 프로그래밍 시작 - Typescript 개발환경 구축

 

 

반응형 프로그래밍이라는 말을 심심치 않게 찾아 볼 수 있다. 반응형 프로그래밍은 쉽게 말하면 한번 코딩을 해 놓으면 이후에 데이터가 변화하는 행동을 알아서 처리하는 것을 의미 한다.

예를들어, 게시판 같은 곳에서 하단의 페이징 버튼을 눌러 다음페이지로 이동하는 부분에서, 기존에 코딩방식은 데이터를 가져와서 기존 데이터를 삭제하고 다시 그려주는 역할을 사용자가 전부 다 코딩하였다면,

반응형 프로그래밍 기법을 활용하면 최초 1번만 사용자가 코딩을 해 주고 이후에 변동되는 데이터에 대해서는 알아서 처리를 해 준다.

 

Rxjs는 Javascript로 이루어진 반응형 프로그래밍으로도 잘 알려진 오픈소스이다.

Rxjava, RxPy, RxPhp등등..Reactivex 홈페이지로 이동하면 다른 언어로 만든 오픈소스 라이브러리를 만날 수 있다.

 

Rxjs를 효과적으로 작업하려면 타입스크립트가 효율적이므로 타입스크립트를 설치한다.

1. Node.js를 다운 받는다.

2. Node.js를 설치한다.

3. CMD로 이동한다.

4. npm install -g typescript 명령어를 실행한다.

위 4단계 까지 완료하였다면 타입스크립트가 정상적으로 실행이 된다.

테스트를 위해 tsc 라고만 명령을 실행하면 타입스크립트에 대한 설명과 옵션이 출력이 된다.

타입스크립트 명령어 실행, tsc

Rxjs를 위해 프로젝트를 생성하여 보자. 원하는 디렉토리를 만든다음에, 여러 라이브러리를 받기 위해서 프로젝트 폴더임을 선언하여 주자.

1. 프로젝트가 위치 할 디렉토리를 만든다.

2. cmd를 활용해서 해당 디렉토리로 이동한다.

3. cmd에서 npm init을 실행한다. npm init은 프로젝트 디렉토리를 세팅하는 정도로 이해하면 된다. 여러 질문이 나오게되는데 그냥 엔터를 치게되면 기본값을 알아서 설정하고 마지막에 만들지 말지에 대한 질문에서 Y를 선택하면 된다.

4. cmd에서 tsc --init 명령어를 실행한다. 마찬가지로 해당 명령어는 타입스크립트 프로젝트 세팅정도의 의미이다.

 

다음으로 Rxjs를 설치한다.

1. 프로젝트가 구성된 디렉토리를 cmd로 이동한다.

2. npm install rxjs 명령을 실행한다.

위 단계를 실행하면 node_modules라는 디렉토리가 생기게 되며 안에 rxjs, rxjs-compat 등등 여러 디렉토리가 생긴다.

 

마지막으로, parcel을 설치한다. parcel은 타입스크립트로 만든 Javascript가 1개의 js로 만들어주는 도구이다.

npm install parcel

parcel을 설치하는 이유는..rxjs의 라이브러리들이 상당히 많으며 해당 라이브러리를 매번 가져다 쓰기 힘들기 때문이다.

parcel의 원리는 아래처럼 표시가 가능하다.

파셀, Javascript를 전부 압축해준다.

 

위 단계까지 하면 타입스크립트를 활용한 Rxjs 기초세팅은 끝났다 볼 수 있다.

 

정리하여보면,

1. Node.js를 설치한다.

2. npm 명령어를 통해 typescript를 설치한다.

3. 원하는 프로젝트 디렉토리를 만든다.

4. 프로젝트 디렉토리에서 npm init을 실행한다.  (cmd에서 실행)

5. 프로젝트 디렉토리에서 tsc --init (cmd에서 실행)

6. 프로젝트 디렉토리에서 npm install rxjs 명령어를 실행한다. (cmd에서 실행)

7. 프로젝트 디렉토리에서 npm install parcel을  (cmd에서 실행)

 

7단계까지 하고나면 기본세팅완료이다.

 

테스트를 하여보자. a.ts라는 파일을 만들어 본다.

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);

subject.subscribe(console.log);  //123출력
subject.subscribe(console.log);  //123출력
subject.next(456);  //456 출력, 456 출력
subject.subscribe(console.log);  // 456 출력
subject.next(789);  //789 3번 출력

위 코드를 입력한다. 타입스크립트 파일은 컴파일 되기 전 파일이므로 실행이 되지 않는다.

이를 위해 javascript로 컴파일 하여 준다.

통상 컴파일은 tsc 대상.ts 로 실행하는데..Rxjs 라이브러리들이 ES관련된 이슈가 존재하여 아래 명령어로 실행하여야 한다.

tsc --project tsconfig.json

만약 오류가 난다면 tsconfig.json 파일을 수정하여 주자. 해당 문제는 ES5관련된 오류이다.

기존 es5를 es6으로 바꾸어 주자.

명령이 끝나면 node a.js를 실행하여 보자.

명령 실행 모습

해당 Javascript를 일반 html에 넣으려면 앞서 설명한 데로 parcel을 통해 1개의 javascript 파일로 만드는 것이 편하다.

그렇지 않으면 node_modules 에 있는 라이브러리들을 추려서 html에 포함시켜야 하므로 여간 복잡해지지 않을 수 없 다. 명령어는 직관적이고 쉽다.

parcel build a.js

해당 명령어를 실행하면 프로젝트 디렉토리에 dist라는 디렉토리가 생기며 해당 디렉토리에 압축한 javascript 파일이 생긴다.

해당파일을 script 테그에 포함해도된다.

해당 파일을 html에 script 테그에 포함시켜도 상관 없다.

다음장에서는 본격적으로 rxjs 활용방법에 대해서 알아보자.