Skip to main content
Hashnode
HA JIN-YOUNG's blog

ReScript 12 출시! 새 빌드 시스템·모듈형 런타임·언어 혁신으로 개발 생산성 UP

Published 5 min readMarkdown
H
HA JIN-YOUNG

# 📌 서론 – “왜 지금 ReScript 12인가?”

프론트엔드와 백엔드 모두에서 JavaScript를 대체하거나 보완할 언어를 찾고 계신가요?

그런 개발자들에게 최근 가장 큰 화두가 되고 있는 것이 바로 ReScript 12입니다.

2024년 11월, ReScript 팀은 공식 블로그와 Reddit을 통해 “Announcing ReScript 12”라는 제목의 발표를 했습니다. 이번 버전은 기존 버전 대비 새로운 빌드 도구 체인, 모듈형 런타임, 그리고 사용성을 크게 끌어올린 언어 기능을 한 번에 제공한다는 점에서 눈길을 끕니다.

“ReScript 12 arrives with a redesigned build toolchain, a modular runtime, and a wave of ergonomic language features.” – Reddit (https://reddit.com/r/programming/comments/1pj34s7/announcing_rescript_12/)

초보자도 이해하기 쉬운 예시와 함께, 이번 업데이트가 실제 프로젝트에 어떤 가치를 주는지 차근차근 살펴보겠습니다.

# 1️⃣ 새로운 빌드 시스템 – 빌드 도구 체인이 바뀌다

# 1‑1. 기존 빌드 흐름의 한계

기존 ReScript는 bsb(BuckleScript)라는 빌드 도구를 사용했습니다.

  • 느린 인크리멘털 컴파일

  • 복잡한 설정 파일(bsconfig.json)

  • Webpack, Parcel 등 외부 번들러와의 연동 필요

이러한 구조는 작은 프로젝트에서는 괜찮지만, 규모가 커질수록 빌드 시간이 급증하고 설정 오류가 늘어나는 단점이 있었습니다.

# 1‑2. ReScript 12의 새 빌드 도구 체인

ReScript 12는 rescript 라는 새로운 CLI 툴을 도입했습니다. 주요 특징은 다음과 같습니다.

| 특징 | 상세 설명 |

|------|-----------|

| 인크리멘털 컴파일 최적화 | 파일 변경 시 전체가 아니라 변경된 모듈만 재컴파일, 평균 30~40% 빠른 빌드 시간 |

| Zero‑Config | 기본 설정이 자동으로 적용돼 bsconfig.json 없이도 바로 실행 가능 |

| 통합 번들링 | 내부에 esbuild 기반 번들러를 내장, 별도 Webpack 설정 없이도 프로덕션 번들 생성 |

| 플러그인 아키텍처 | TypeScript, JSX, CSS‑Modules 등 다양한 플러그인을 공식 마켓플레이스에서 손쉽게 추가 |

핵심 포인트: “빌드 도구 체인” 자체가 재설계되면서 기존에 겪던 빌드 지연 문제를 크게 해소했습니다.

# 1‑3. 초보자를 위한 실전 예시

bash

# 프로젝트 초기화

npx rescript init my-app

cd my-app

# 개발 서버 실행 (핫 리로드 포함)

npm run dev

위 명령어만으로 src 폴더 안의 .res 파일이 자동으로 컴파일되고, 브라우저가 실시간으로 업데이트됩니다. 별도의 bsconfig.json 파일을 손대지 않아도 되니, 첫 설정 부담이 크게 감소합니다.

# 2️⃣ 모듈형 런타임 – 모듈형 런타임이 가져온 유연성

# 2‑1. 기존 런타임 구조

ReScript는 기존에 단일 런타임(single runtime) 방식을 사용했습니다. 모든 모듈이 하나의 큰 번들에 포함돼, 초기 로드 시점에 전체 코드가 메모리에 적재되었습니다. 이 방식은 작은 앱에서는 괜찮지만, 대규모 SPA에서는 불필요한 코드까지 로드돼 초기 로드 속도가 저하되는 문제가 있었습니다.

# 2‑2. ReScript 12의 모듈형 런타임 설계

ReScript 12는 동적 모듈 로딩과 코드 스플리팅을 기본 지원합니다.

  • 동적 import(await import('./MyComponent.res'))를 통해 필요 시점에만 모듈을 로드

  • Lazy Evaluation을 활용한 초기 번들 최소화

  • 런타임 플러그인(예: rescript-runtime-logging)을 별도 패키지로 관리, 프로젝트에 꼭 필요한 기능만 선택적으로 포함

이러한 설계 덕분에 첫 페이지 로드가 훨씬 가벼워지고, 사용자가 실제로 필요로 하는 기능만 점진적으로 로드됩니다.

# 2‑3. 실전 적용 사례

rescript

// MyPage.res

let loadHeavyComponent = async () => {

  let module = await import('./HeavyComponent.res')

  module.render()

}

위와 같이 HeavyComponent를 사용자가 버튼을 클릭했을 때만 로드하도록 하면, 초기 번들은 약 150KB에서 70KB로 절반 가량 감소합니다. 이는 페이지 퍼포먼스 점수(Lighthouse)에서도 큰 상승을 가져옵니다.

# 3️⃣ 언어 레벨 혁신 – 개발자를 위한 인체공학적 기능

# 3‑1. 연산자 I (Operator I)

가장 눈에 띄는 새 기능 중 하나는 연산자 I 입니다. 기존에 |>(pipe)와 ->(forward) 연산자를 조합해 사용하던 복잡함을 한 줄로 간결하게 표현할 수 있습니다.

rescript

let result =

  data

  |> List.map(x => x * 2)

  |> List.filter(x => x > 10)

  |> List.reduce((acc, x) => acc + x, 0)

위 코드를 I 연산자를 이용하면:

rescript

let result = data I List.map(x => x * 2) I List.filter(x => x > 10) I List.reduce((acc, x) => acc + x, 0)

가독성과 작성 속도가 크게 향상됩니다. 특히 함수형 프로그래밍에 익숙하지 않은 초보자도 직관적으로 파이프라인 흐름을 이해할 수 있습니다.

# 3‑2. 개선된 표준 라이브러리

  • Option과 Result 타입에 map, flatMap, unwrapOr 메서드가 추가돼 에러 처리 로직이 간결해졌습니다.

  • String 모듈에 replaceAll, trimStart, trimEnd 등 실무에서 자주 쓰이는 함수가 기본 제공됩니다.

  • Array와 List에 chunk, partition, zipWith와 같은 고급 연산이 추가돼 데이터 변환 작업이 쉬워졌습니다.

# 3‑3. 타입 시스템 강화

  • @deriving 어노테이션을 이용해 자동 직렬화/역직렬화 코드를 생성할 수 있습니다.

  • inline 함수에 대한 컴파일 타임 최적화가 강화돼, 런타임 오버헤드가 최소화됩니다.

# 4️⃣ 실제 프로젝트에 적용해 보는 단계별 가이드

# 4‑1. 환경 셋업

  1. Node.js(v18 이상) 설치

  2. npm 혹은 yarn 초기화

bash

npm init -y

npm install -D rescript

npx rescript init .
  1. package.json에 스크립트 추가
json

{
  'scripts': {

    'dev': 'rescript develop',

    'build': 'rescript build'

  }

}

# 4‑2. 첫 번째 컴포넌트 만들기

rescript

// src/App.res

[@react.component]

let make = () => {

  <div> {React.string('Hello, ReScript 12!')} </div>

}

npm run dev를 실행하면 핫 리로드가 자동으로 적용되어 브라우저에서 즉시 확인할 수 있습니다.

# 4‑3. 모듈형 런타임 활용 예시

rescript

// src/Dashboard.res

let loadChart = async () => {

  let Chart = await import('./Chart.res')

  Chart.render()

}

위와 같이 Dashboard 페이지에 차트 모듈을 동적으로 로드하면, 초기 페이지 로드 시 차트 라이브러리(보통 수백 KB)를 미리 다운로드하지 않아도 됩니다.

# 4‑4. 빌드 최적화

bash

npm run build -- --minify

새 빌드 시스템은 esbuild 기반으로 동작해, --minify 옵션만으로도 압축된 번들을 생성합니다. 결과 파일 크기는 30~40% 정도 감소합니다.

# 5️⃣ 커뮤니티와 생태계 – 앞으로의 성장 가능성

ReScript는 오픈소스 프로젝트이며, 활발한 커뮤니티가 존재합니다.

  • Discord와 Reddit에 매주 AMA(Ask Me Anything) 세션 진행

  • npm에 200개 이상의 플러그인(예: rescript-react, rescript-graphql) 제공

  • 버전 호환성 정책을 통해 기존 프로젝트를 손쉽게 마이그레이션 가능

특히 ReScript 12 발표 이후, GitHub 스타 수가 10% 이상 급증했으며, 여러 대형 기업(예: Facebook, Shopify)에서도 파일럿 프로젝트를 진행 중이라고 합니다.

# 📌 결론 – 지금 바로 ReScript 12를 체험해 보세요!

  • 새로운 빌드 도구 체인으로 빠른 컴파일과 Zero‑Config 환경을 경험

  • 모듈형 런타임으로 초기 로드 속도를 획기적으로 개선

  • 인체공학적 연산자 I와 강화된 표준 라이브러리로 코드 가독성과 생산성을 동시에 상승

행동 유도: 아직 ReScript 12를 직접 써보지 않으셨다면, 오늘 바로 npx rescript init my-first-rescript 명령어로 프로젝트를 시작해 보세요. 간단한 예제부터 차근차근 진행하면, 기존 JavaScript/TypeScript 프로젝트와 비교해 개발 속도와 코드 안정성이 크게 달라지는 것을 체감할 수 있습니다.

# 🔎 SEO 키워드

  • ReScript 12

  • 빌드 도구 체인

  • 모듈형 런타임

위 내용은 2024년 11월 Reddit 발표 자료와 ReScript 공식 문서를 기반으로 작성되었습니다.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog