사내 유행어로 프로그래밍 언어를 만들어보자 Feat F# Bolero WASM

2025 추석 목표 1 Contribution 1 Language 1 PPT  중 1 Language 담당

현 회사 CoreBanking 팀에서 유행하는 말투가 있는데, 바로 팀장님 말투를 따라하는것

거의 사내 아이돌

그래서 만들었다

CoreBanking Programming Language - [Cobang]
Lee-WonJun/CobangLang: PFCT 코어뱅킹 프로그래밍 랭기지

GitHub - Lee-WonJun/CobangLang: PFCT 코어뱅킹 프로그래밍 랭기지

 

기존의 KFALang 와 문법은 거의 비슷하여 Parser, ADT, Interpreter 는 그대로 사용해서, Parser 부분 룰 만 바꾸면 뚝딱... 이라서, 이번에는 조금 다르게 WASM (웹 어셈블리) 를 이용해서 웹에서 바로 사용가능하게 하였다.

 

F# Bolero

웹에서 바로 돌릴수있는 F# 프레임워크를 좀 찾아보다가, WASM 으로 동작하는 Bolero 가 있어서, 이걸로 결정했다.

JS 로 컴파일되는 것도 있는데 (Fable 이었나..) 뭔가 WASM 이 끌려서 WASM 으로 작성

이런 프레임워크의 문제점은, 프레임워크의 완성도가 아니라, 이를 사용하는 개발자(== 나) 의 숙련도 문제와, 문제 발생시 트러블슈팅이 아주 어렵다는 점...

은 이제 과거의 일이다. 대 AI 바이브 시대 소넷 4.5 만 있다면 야호 나도 F# Bolero 개발자

 

비동기

처음에는 그냥 웹짜고 기존 인터프리터를 붙였는데, 오래걸리는 (Sleep 함수를 구현하고 싶었다) 같은 동작을 구현하려면, print 가 비동기적으로 웹 Terminal 에 출력이 되야하는데.. MVU 이게 Event 받아서 Status 를 리턴하는 패턴인데, 이런상황에서 어떻게 해야되나 잘 모른다 (기본적으로 Frontend Pattern 인데, 나는 Backend 개발자라..)

그냥 RAW 한 HTML, JS 면 완성도고 패턴이고 뭐고 무지성 업데이트 쳣을텐데, MVU 프레임워크를 쓰는 이상 이게 안되서 AI 한테 "해줘" 했는데, 아무리 대 AI 시대라지만.. 정보가 너무 없는지 아니면 Bolero 에서 사용하는 MVU 패턴을 제공하는 Elmish 이 변경됫는지 자꾸 없는 기능으로 짜더라..

그래도 F12 로 네임스페이스안에 어떤 함수가 있는지, 그리고 Bolero / Elmish 두개 를 인터넷에서 찾고 관련 독스를 같이 넘겨서 AI 한테 물어보니까 어느정도 코드가 나와서 이걸 약간 손봣더니 동작하더이다..

let update (http: HttpClient) message model =
    match message with
    | SetCode code ->
        { model with code = code }, Cmd.none

    | LoadExample idx ->
        if idx >= 0 && idx < Storage.examples.Length then
            { model with code = snd Storage.examples.[idx] }, Cmd.none
        else
            model, Cmd.none
            
    // RunCode Dispatch 에서
    | RunCode ->
        // ofEffect 와
        { model with output = "" }, Cmd.ofEffect (fun dispatch ->
            // 비동기 사용
            Async.StartImmediate(
                async {
                    try
                        match runParserOnString program () "cobang" model.code with
                        | Success(result, _, _) ->
                            let! state = interpretAsync result (fun x -> dispatch (WriteOutput x))
                            dispatch (WriteOutput (sprintf "\nreturn %d code" state.Return))
                        | Failure(errorMsg, _, _) ->
                            dispatch (WriteOutput (sprintf "Parsing failed: %s" errorMsg))
                    with ex ->
                        dispatch (WriteOutput ex.Message)
                }
            )
        )

참고로 인터프리터도 비동기로 변경

 

공짜 웹 호스팅

서버가 없고 (Bolero  기본은 서버까지 지원인데, 일부로 서버없는 템플릿으로 사용) 하나의 페이지 이기 때문에,

Github 서버를 훔쳐 쓸수 있다.

docs 폴더에 빌드된 결과물을 넣자

Github Page 를 설정하고 /docs 폴더에 FE 결과물을 넣으면 공짜로 Github Page 를 쓸수있다. 이런용도는 아니지만..

자주 훔쳐쓰는데..

.nojekyll

대소문자 구분이었나.. 암튼 그런 문제가 있어서 .nojekyull 파일을 생성해야 Static File Serving 이 정상적으로 동작하길래 넣어둿다

 

무려 4가지의 풍부한 예제포함.. 하나는 회사사람이 PR 하심..