GHCJS는 GHC API를 기반으로 한 Haskell에서 JavaScript로 컴파일하는 도구입니다. 이 가이드를 통해 GHCJS의 핵심 기능을 빠르게 익히고, 첫 번째 Haskell 웹 애플리케이션을 만드는 방법을 배울 수 있습니다.
개발 환경 준비
GHCJS를 사용하기 전에 다음 도구들을 설치해야 합니다:
- GHC 컴파일러: GHCJS 브랜치와 호환되는 버전이어야 합니다
- cabal-install 3.0+: Haskell 패키지 관리를 위한 도구입니다
- emscripten 도구铘: C에서 WebAssembly로 컴파일하는 데 사용됩니다
빠른 설치 방법
GHCJS 저장소를 먼저 클론합니다:
git clone https://gitcode.com/gh_mirrors/gh/ghcjs cd ghcjs git submodule update --init --recursive
emscripten 환경을 설정합니다:
source ~/emsdk/emsdk_env.sh
GHCJS 컴파일러 설치
GHCJS는 다양한 설치 방법을 제공합니다. 콘솔에서 다음 명령을 실행하여 설치할 수 있습니다:
Linux/macOS 사용자:
cabal v2-install --overwrite-policy=always --install-method=copy --installdir=inplace/bin
Windows 사용자:
cabal v1-install --prefix=inplace
Stack을 사용하는 경우:
stack --system-ghc --skip-ghc-check install --local-bin-dir=inplace/bin
GHCJS 환경 시작
컴파일러 설치 후 다음 명령을 실행하여 GHCJS 환경을 구축합니다:
./inplace/bin/ghcjs-boot -s ./lib/boot
성공적으로 구축되면 GHCJS 실행 파일 경로를 시스템 PATH에 추가해야 합니다.
첫 번째 Haskell 웹 애플리케이션 만들기
간단한 Haskell 파일을 만들어봅니다. 예를 들어, "Main.hs" 파일을 다음과 같이 작성합니다:
모듈 Main (_EXPORTS, main) 수입 GHCJS.DOM (runWebGUI) 수입 GHCJS.DOM.Document (createElement, setInnerHTML) 수입 GHCJS.DOM.Element (setAttribute) 수입 GHCJS.DOM.Window (getDocument) main :: IO () main = runWebGUI $ \창 -> do 문서 <- getDocument 창 몸 <- documentGetBody 문서 내부 <- createElement 문서 "div" setAttribute 내부 "스타일" "텍스트-얼라인: 센터; 마진-탑: 50픽셀;" setInnerHTML 내부 "<h1>GHCJS에서 안녕하세요!</h1>" elementAppendChild 몸 (자료 내부) 반환 ()
애플리케이션 컴파일 및 실행
다음 명령을 통해 Haskell 코드를 JavaScript로 컴파일합니다:
ghcjs Main.hs -o app.js
컴파일 후에 HTML 파일을 만들고 생성된 JS 파일을 포함시킵니다:
<html> <head> <title>GHCJS 데모</title> </head> <바디> <스크립트 src="app.jsexe/all.js"></스크립트> </바디> </html>
이 HTML 파일을 웹 브라우저에서 열면 GHCJS를 통해 만든 첫 번째 애플리케이션이 실행됩니다!
추가 학습 자료 및 고급 주제
- 공식 문서: 저장소에 자세한 사용 설명서와 API 문서가 포함되어 있습니다
- 테스트 케이스: test/ 디렉터리에 다양한 예제 코드가 있습니다
- 핵심 라이브러리: lib/ghcjs-prim/에 GHCJS의 기본 유형과 함수 정의가 있습니다
GHCJS는 Haskell 개발자들이 웹 개발로无缝 전환할 수 있도록 도와줍니다. Haskell의 유형 안전性和 JavaScript의 광범위한 활용을 결합하여 신뢰성 있는 웹 애플리케이션을 구축할 수 있습니다. 지금 바로 GHCJS를 시작하고 함수형 웹 개발의 무궁한 가능성을 탐험하세요!