TypeScript 사용자의 Flow 탐험기 (1) — 설치 및 설정하기

우선 나는 TypeScript 를 2년 넘게 실무에서 사용하고 있다.
엄밀히 말하면, 순수 JavaScript 코드 만으로 프로그래밍을 하지 않은 시간이 그 정도 된다.
(나만의 생각일 수도 있지만) Type System 을 이용하면, JavaScript 코드 작성에 도움이 된다고 믿고 있다. 😆

TypeScript 뿐만 아니라, Facebook 의 오픈소스인 flow 도 Type System 을 이용하여, JavaScript 엔지니어들에게 도움을 주는 프로젝트이다.

https://flow.org — Flow 는 JavaScript 를 위한 정적 타입 체커 이다.

앞으로 몇 번의 포스팅이 있을지 모르겠지만, TypeScript 를 메인 언어로 사용하는 엔지니어의 입장에서, flow 에 대해 최대한 많은 것을 알아 보도록 하겠다. 가급적 양쪽을 디스(?)하지 않을 예정이다. (과연 ㅋㅋ)

설치 및 설정하기

https://flow.org/en/docs/install/ — Installation

Facebook 의 오픈소스 답게, 설치 안내에 Yarn 을 default 로 안내하고 있다. 어차피 패키지 매니저라, 별로 중요치 않다. 그래서 npm 으로 😆

우선 알아야 할것은 flow 는 정적 타입 체커 업무만을 수행할 뿐이라는 것이다. 정적 타입 체크 후, 타입 체크에 필요한 여러가지 문법들 (JavaScript 런타임에서는 사용하지 않는) 을 제거하기 위해서는 설치 페이지에서 컴파일러라 불리는 별도의 패키지를 이용해야 한다.

2가지를 안내하고 있는데, 하나씩 살펴보자.

flow-remove-types 로 컴파일 하기

이름 그대로 flow 와 관련된 코드를 지우고, 새로운 .js 파일로 만들어주는 역할을 한다. 이 작업을 컴파일이라 부르는 것 같다. (이상하다.)

npm i flow-remove-types -D

위와 같이 설치한 후, “flow 로 작업한 소스들이 있는 폴더”와 “컴파일 된 결과물이 생성될 폴더”를 지정하면서, flow-remove-types 명령어를 실행하면 컴파일이 된다.

npx flow-remove-types src/ -d lib/

src 폴더 안에 있던 index.js 파일이 컴파일 된 후, lib 폴더 안에 index.js 로 생성된다. 생성된 파일에는 1) @flow 어노테이션이 사라지고, 2) 타입과 관련된 문법들이 사라진다.

src/index.js 파일

lib/index.js 파일

어색하게 공백들로 바뀐 것을 알 수 있다. 어째든 이런 일을 한다는 것을 알 수 있다. 단, 이러한 컴파일은 flow 가 하는 업무(정적 타입 체커)는 하지 않기 때문에, flow 를 통해 정적 타입 체크를 하고, 컴파일을 해야 한다.
TypeScript 의 tsc 가 하는 일을 분리해서 따로따로 하는 것 같다.

flow

그래서 컴파일하기 전에 정적 타입 체크를 해야 하기 때문에 이제 정말 flow 를 설치하자. flow 는 flow-bin 이라는 패키지를 설치해야 한다.
(npm i flow 아님 주의)

npm i flow-bin -D

설치했으니, 이제 flow 명령어를 사용할 수 있다!

가장 먼저 flow init 이란 명령어를 사용해서, flow 사용을 위한 설정 파일인 .flowconfig 파일을 프로젝트에 생성해야 한다. 이 파일이 없으면, flow 명령어가 제대로 동작하지 않는다.

.flowconfig 파일 없이 flow 명령 사용

npx flow init (.flowconfig 파일 생성)

flow init 을 통해 생성된 .flowconfig 파일에 대해서는 나중에 자세히 알아보고, 일단 생성된 것을 확인하면, flow 명령어를 실행해보자.

npx flow

이제 정말로 정적 타입 체커가 제대로 동작하는듯 하다!

VSCode 에서 flow 설정

난 flow 따위는 모른다구!

타입을 표기했더니, VSCode 답게 “flow 따윈 난 몰라” 라고 말한다. 이런 난처한 상황에서는 역시 extension 이 짱이다.

https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode

설치하고, VSCode Reload 를 하면, 갑자기 다음과 같은 경고가 뜬다.

난 flow extension 인데, flow 어딨니?

flow-bin 패키지를 글로벌로 설치하면 해결할 수 있지만, 나는 글로벌 설치가 넘나 싫다. 그래서 Menu — Preferences — Settings 를 실행하여, flow extension 관련 옵션을 뒤져보았다.

flow.pathToFlow 설정 (역시 있다!)

원래는 flow 라고 적혀 있었기 때문에, 글로벌 설치하여 flow 명령어를 사용하라고 안내했지만, 글로벌 말고 프로젝트에 설치된 flow 를 사용하는게 여러모로 좋다. (flow 의 버전 문제 같은것)

아직 끝나지 않았다. 마저 설정하려면, VSCode 에 내장되어 있는(builtin) extension 인 TypeScript and JavaScript Language Features 를 꺼야 한다.

TypeScript and JavaScript Language Features

이제 flow 를 통해 에러가 나는 부분을 VSCode 에서 바로 표시해준다. 이렇게는 해야 쓸만하지 싶다.

VSCode 에 나타나는 flow 에러

Babel 로 컴파일 하기

이번에는 flow-remove-types 가 아니라 Babel 로 컴파일하는 프로젝트에 flow 를 설정해보자. 이 포스팅은 Babel 에 대해서 다루는 것이 아니라, Babel 에 대해서는 자세히 언급하지 않겠다.

npm i babel-cli babel-preset-flow -D

우선 babel-cli 와 babel-preset-flow 를 설치한다. 그리고 babel 에 preset 으로 babel-preset-flow 를 설정하기 위해, .babelrc 파일을 생성하고 다음과 같이 적는다.

.babelrc 파일 (babel 로 컴파일할때 미리 지정된 flow 관련 사항을 처리해서 컴파일해줘!)

이제 flow-remove-types 와 마찬가지로 “flow 로 작업한 소스들이 있는 폴더”와 “컴파일 된 결과물이 생성될 폴더”를 지정하면, 컴파일 된다.

npx babel src/ -d lib/

차이점이 있다. 결과물이 좀 더 자연스러운 것 😆

src/index.js

dist/index.js

flow -remove-types 때와 다르게 공백으로 남지 않는다.(그래서 Babel 을 쓰자는 것은 아니다.)

나머지는 flow-remove-types 때와 다르지 않다.

혹시 작업한 소스가 필요한 분은 https://github.com/2woongjae/flow.git 를 참고해주세요. 그리고 업데이트로 인해 내용이 맞지 않으면, 알려주세요. 글을 내리던가 수정할게요 😆