ReScript 공식문서로 ReScript 훑어보기 (1)

본 포스트는 ReScript 공식문서를 스터디하며 정리한 포스트 입니다.
포스트를 작성하며 작성한 코드는 여기에서 확인할 수 있습니다.

ReScript란?

ReScript의 공식문서에 따르면 ReScript는 JavaScript를 사랑하지는 않지만 자바스크립트의 중요성을 인정하는 사람들을 위한 언어라고 한다.

ReScript는 JavaScript처럼 보이며 JavaScript와 함께 동작하며, 브라우저와 Node.js상에서 직접 실행할 수 있는 언어이며 ReScript를 컴파일하게 되면 읽기 쉬우며 성능이 뛰어난 JavaScript 코드로 컴파일이 된다.

TypeScript와의 차이점

TypeScript는 JavaScript의 슈퍼셋이지만 ReScript는 JavaScript에서 분류된 특정 집합만 포함하며 아래와 같은 예시가 존재한다.

• 클래스를 사용하기 보다는 일반적인 데이터와 함수를 강조한다.
• 취약한 if문보다 깔끔한 패턴 매칭을 지원한다.
• 가상 디스패치를 지원한다.
• 문자열의 남용보다 적절한 데이터 모델링을 지향한다.

또한 타입 시스템에도 TypeScript와 다른 몇가지 차이점이 존재한다고 설명한다.

• 대부분 사람들이 사용하기 쉬운 간단한 서브셋을 사용한다.
• null 또는 undefined 오류가 없다.
• 단순함과 큐레이션 덕분에 정확하게 작동하며 빠르게 컴파일과 빌드가 된다.
• 타입 주석이 필요하지 않다.

TypeScript와의 차이점에 대한 자세한 설명은 Difference vs TypeScript에서 확인할 수 있다.

ReScript의 장점

ReScript의 공식문서에서는 타입 시스템 외에도 아래와 같은 ReScript의 장점을 나열해 설명하고 있다.

• JavaScript보다 빠르다. (Faster than JavaScript)
• 죽은 코드를 잘 제거해 준다. (High Quality Dead Code Elimination)
• 작은 JavaScript코드로 컴파일된 결과물이 출력된다. (Tiny JS Output)
• 반복문이 빠르다. (Fast Iteration Loop)
• 출력이 읽기 쉬우며 뛰어난 상호운용성을 갖는다. (Readable Output & Great Interop)
• 코드 구조를 보존한다. (Preservation of Code Structure)

각 장점에 대한 자세한 설명은 Other Highlights에서 확인할 수 있다.

개발환경 설정하기

ReScript는 Node.js 환경에서 동작하기 때문에 기존 Node.js 환경과 동일하게 NPM, Yarn등을 사용해 개발 환경을 설정할 수 있다.

아래의 명령어를 이용해 새로운 프로젝트 폴더를 생성한 후 Node.js 프로젝트를 초기화 한다.

mkdir rescript-tutorial
cd rescript-tutorial
npm init --y

기존 Node.js 환경과 동일하게 package.json 파일이 생성되어 있을 것이다. ReScript 코드를 JavaScript로 컴파일하기 위해서는 bs-platform 패키지를 사용한다.

npm install --save-dev bs-platform

ReScript 코드를 JavaScript로 컴파일하기 위해서 아래와 같은 스크립트를 package.json에 추가해준다.

{
  "name": "rescript-tutorial",
  "scripts": {
    "build": "bsb -make-world",
    "clean": "bsb -clean-world",
    "start": "bsb -make-world -w"
  },
  "devDependencies": {
    "bs-platform": "*"
  }
}

추가적으로 TypeScript의 설정 파일인 tsconfig.json과 비슷한 bsconfig.json 파일을 package.json이 있는 경로에 생성해 아래와 같이 작성한다.

{
  "$schema": "https://raw.githubusercontent.com/rescript-lang/rescript-compiler/master/docs/docson/build-schema.json",
  "name": "rescript-tutorial",
  "version": "0.0.1",
  "sources": {
    "dir": "src",
    "subdirs": true
  },
  "package-specs": {
    "module": "commonjs",
    "in-source": true
  },
  "suffix": ".bs.js",
  "bs-dependencies": [],
  "warnings": {
    "error": "+101"
  }
}

bsconfig.json 파일은 bsb가 필요로 하는 빌드 메타 파일이며 자세한 설명은 BuildConfiguration에서 확인 할 수 있다.

위와 같은 과정으로 bsconfig.json, package.json 설정이 완료되면 ReScript 코드를 작성해 실행할 수 있다.

피보나치 수열 재귀함수 작성해 실행해보기

package.json 파일이 존재하는 경로에 src 폴더를 생성한 후 아래와 같은 코드를 작성한다.

let rec fib = n => {
  switch n {
  | 0 | 1 => 1
  | n => fib(n -1) + fib(n-2)
  }
}
Js.log(fib(0))

정수 n이 주어지면 n번째 피보나치 수열의 n번째 수를 반환하는 간단한 재귀함수다. 작성한 코드를 컴파일하기 위해서는 package.json에 작성했던 start 명령어를 사용하면 된다.

위와 같이 컴파일이 되는 것을 확인할 수 있다. src 폴더를 확인해보면 기존에는 <파일명>.res 파일 하나만 존재했지만 컴파일이 완료된 후 <파일명>.bs.js 파일이 하나 더 생성된 것을 볼 수 있다.

bs.js 확장자 파일은 ReScript 코드가 JavaScript로 컴파일된 결과물이다. 해당 파일을 열어보면 아래와 같이 JavaScript 코드로 컴파일된 것을 볼 수 있다.

// Generated by ReScript, PLEASE EDIT WITH CARE
'use strict'

function fib(n) {
  if (n === 0 || n === 1) {
    return 1
  } else {
    return (fib((n - 1) | 0) + fib((n - 2) | 0)) | 0
  }
}

console.log(fib(0))

exports.fib = fib
/*  Not a pure module */

컴파일된 JavaScript 파일을 실행시키기 위해서는 기존에 JavaScript 코드를 실행시키는 방법과 동일하게 node 명령어를 사용하면 된다.

위와 같이 정상적으로 JavaScript 코드가 Node.js 환경에서 실행되는 것을 확인할 수 있다.