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 명령어를 사용하면 된다.

Compile ReScript code to Javascript

위와 같이 컴파일이 되는 것을 확인할 수 있다. 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 명령어를 사용하면 된다.

Run bs.js code using node

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


Written by@[Minsu Kim]
🌈22살 대학생 학생 주니어 개발자🙂