[태그:] flow

React에 Flow 적용기

불꽃남자 Leave a comment

타입은 왜 필요한가?

개인적인 경험에서 타입에 대한 필요성을 느끼기 시작한 것은 이뮤터블JS를 쓰기 시작하면서부터다. 이 녀석은 실제로 까보지 않으면 안에 뭐가 들어가 있는지 참 알기 어렵다. 최근 코드 리뷰에서도 “이게 뭐하는 녀석이죠?” 라는 질문을 자주 하는 나를 발견한다. 가령 어떤 함수에 이뮤터블 객체 A 를 인자로 넘겨버리면 저 A 안에 어떤 값이 있는지 알기 어렵다. 그래서 코드를 따라가기를 반복하다 지치면 결국 작성자에게 물어보게 된다. 이럴때마다 타입이 있었으면 하는 생각도 들고 차라리 주석을 꼼꼼히 달아보자고 제안을 해볼까? 하는 생각을 해보기도 하지만 역시.. 후자는 나도 잘 안하기 때문에 결국엔 약간의 강제가 필요하면 좋겠다는 생각을 했다.

Flow와 TypeScript

최근엔 타입스크립트에 대한 주목도와 관심도가 높아지는(?).. 관심도가 높은지는 사실 모르겠고, 그냥 그런 분위기가 있어서 나도 해야하는게 아닐까싶어서 TS 주변을 기웃거렸다. 컨퍼런스도 가고 주변에 TS 좀 한다는 녀석들에게 레퍼랜스를 물어물어서 시작하긴 했는데….

아!!!!!!!!!!!! 빡쳐!!!!
이게 결론이다. TS를 하려면 처음부터 해야지 중간에 잘돌아가는 환경을 뒤엎을려니 쉽지 않다. 결국 기존 react 기반 프로젝트에 ts를 적용하는 건 실패~~

이렇게 또 몇주가 지나고 TS와 씨름에 지쳐갈때쯤 내가 왜 이러고 있나 싶기도하고 그러다가 미워도 다시한번 Flow를 어제부터 다시보기 시작했다. 그런데 너무 간단하다. 헐퀴!! 나 그동안 뭐한거니…-_-;;;

Flow 설치

create-react-app 으로 시작한다면 Flow 환경의 절반은 이미 설정되어 있다. 밥상에 숟가락 얻는 정도다.

1. 먼저 flow-bin 모듈을 설치한다.

$> npm install --save-dev flow-bin  // or yarn add --dev flow-bin`

2. package.json 파일을 열어서 “scripts” 섹션에 "flow": "flow"를 추가한다

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "flow": "flow"       <======= 요기!
  }

3. Flow 환경 설정 파일을 만든다.

아래 명령을 실행하면 루트 폴더에 .flowconfig 파일이 생성된다.

$> npm run flow init
$> npm run flow

.flowconfig 기본 설정

[ignore]  
.*/node_modules

[include]  
./src

[libs]

[options]

4. 외부 라이브러리에 대한 타입 정의를 추가한다.

아래 명령을 실행하면 루트폴더 하위에 /flow-typed 폴더가 생성되면서 외부 라이브러리에 대한 flowType을 찾아준다. 물론 모든 라이브러리를 찾아주는건 아니다.

$> npm install -g flow-typed 
$> cd /path/to/my/project 
$> flow-typed install

5. 타입 체크를 원하는 파일에 // @flow 라는 주석 달기.

Flow 컴파일러는 3번에서 설정한 환경에 따라 파일을 읽게 되는데, 파일 상단 주석에 // @flow 라는 어노테이션을 지정한 파일만 컴파일한다.

6. 인텔리J(WebStorm)에서 Flow Type Checker 적용하기

  1. 일단 인텔리J에 NodeJS 플러그인을 설치하고 Enable 시켜놓자.

  2. Flow Type Checker 모듈을 설치한다. 전역으로 하든 로컬로 하든 알아서 판단하자.

    $> npm install -g flow-bin // global
    $> npm install flow-bin // local

  3. 인텔리J에 Flow를 사용하겠다고 설정한다.

    Cmd+(,) > Languages & Frameworks > JavaScript > choose Flow

  4. 3번에서 Flow executable 필드에 2번에서 설치한 flow-bin 을 지정한다

Flow 적용

Flow를 이용해 타입 체크를 하는 이유를 잘 생각해봐야한다. 진행중인 프로젝트에 어떤 부분을 타입으로 만들어서 점검할지 생각하면서 적용하자. React-Redux 프로젝트에 Flow를 적용한다면 이 문서를 참고하자.

create-react-app with Flow

내가 React로 프로젝트를 시작하는 가장 큰 이유는 아키텍처를 내가 선택할수있기 때문인데, 아키텍처에 집중하기 위해서는 사실 기본기가 튼튼해야한다. 큰 그림을 그리는데 JSX 문법을 몰라 삽질한다거나 한땀한땀 웹팩 구성하느라 시간을 허비하기엔 그 시간이 좀 아깝다. 그런면에서 create-react-app 으로 리액트를 시작할 것을 강력히 추천한다. 이와 같은 이유로 최근엔 TS를 적용한 create-react-app-typescript도 생겼다.

트러블슈팅

Q1. 특정 라인에 대한 에러 체크를 하고 싶지 않아요!

$FlowFixMe 를 이용하세요.

// $FlowFixMe 
import './UserProfile.less';

Q2. flow-typed 를 이용해 외부 라이브러리에 대한 타입을 설치하긴 했는데, immutablejs는 없네요 ㅜㅜ

immutable.js 는 라이브러리 안에 타입을 내장해서 배포하고 있습니다. 일단 .flowconfig 파일을 열어서 [include] 항목에 아래와 같이 추가합니다.

[include]
./src
.*/node_modules/immutable/.*

그런데 이것만 가지고는 충분하지 않습니다. 그래서 누군가 이걸 해결한 타입정의 파일이 있어요. 일단 요 파일을 /flow-typed/ 폴더하위에 immutable_vx.x.x.js 라고 저장해주세요.

참고문서

  1. create-react-app#adding-flow
  2. https://flow.org/en/docs/
  3. https://raw.githubusercontent.com/facebook/immutable-js/master/type-definitions/immutable.js.flow
  4. https://www.jetbrains.com/help/webstorm/2017.1/flow-type-checker.html