사이드 프로젝트 1

지지난 주 수요일에 (원격) 출근을 하고 나니 테크니컬 디렉터가 다음 주에 Growth Week가 있으니 자기가 하고 싶던 공부 하면서 사이드 프로젝트로 그걸 만들고 싶다면 이러이러한 거를 해 보는 게 좋을 것 같다고 생각해 뒀다는 몇몇 아이디어를 슬랙에 공유했는데, 그걸 보고 생각을 해 보니 웹어셈블리를 물고 올라가는 웹앱을 만들어 보는 걸 하면 될 것 같아서 하나를 해 보기로 했다.

tl; dr: https://bfi-wasm.herokuapp.com

Rust로 Brainfuck 인터프리터를 작성해서 웹어셈블리(이하 WASM)으로 컴파일 후 프론트엔드에 붙이는 걸 해 보았다. 아이디어 중에는 Rust로 짠 GBA 에뮬레이터가 있었는데 TD에게 그것보다는 8비트짜리인 NES로 해 보는 거랑 이 쪽을 생각 중이다라고 하니까 에뮬레이터는 예전에 짜 본 경험이 없으면 NES나 GB 에뮬을 구현해 웹에 올리는 건 빨라도 2주쯤이고 데모를 내고 싶다면 인터프리터가 좋을 것 같다길래 해 봤다.

그래서 4/12 월 - 16 금 동안 만든 것은

• Rust로 짜서 wasm-pack 으로 컴파일
• Svelte 프론트엔드 쓰고 Rollup.js로 번들링
• 백엔드에서는 정말 아무 것도 안 하고 번들로 나온 프론트엔드를 띄워주기만 하도록 NodeJS+express로 20줄 짰던가...
• Heroku로 띄움

계획했던 것 중 못 한 건

• Run 말고 Step 버튼 추가 (한 사이클씩 실행할 수 있도록)
• 인터프리터 테이프의 상태를 사용한 테이프의 수가 많아지면 가로 스크롤이 되도록 구현 (이건 Bootstrap도 안 붙이고 바닐라 CSS로 굳이 해 보겠다고 하다가 생각보다 시간이 걸려서 못 함)
• Docker로 싸서 Heroku에 던지기 (wasm용으로 붙은 Rollup 플러그인이 Rust 툴체인과 node/npm을 동시에 요구해서 이미지 만들다가 포기하고, 컴파일된 wasm을 그냥 public 폴더에 넣고 Heroku node 웹앱 띄우는 놈이 알아서 띄우게 했다)
• 메모리 최적화 (지금은 새 프로그램을 넣을 때마다 머신 상태와 프로그램 상태를 새로 만든다 - 이 조금 직관적이지 않은 구조도 한 4년 전인가에 봤던 인터프리터 구조를 복기해서 만들어서 그런 건데 새로 짤 수 있을 것 같긴 하다)
• 이 프로젝트를 짠 보일러플레이트 템플릿 (그냥 해 본 적이 없었음)

그래서 배운 건

• Rust 복습
• 네이티브 Rust의 모든 게 WASM으로 도는 게 아니라서 어디까지가 현재의 한계인지(타입의 경우 Wasm 관련 Trait이 구현 안 되어있으면 컴파일이 안 된다 - 예를 들어 struct의 함수의 입력 인자로 Vec<T> 는 못 들어가고 &[T]만 된다)
• Svelte로 프론트 만드려면 뭐 어떻게 해 봐야 하는지
• Heroku를 처음 써 봤다; 콜드 스타트가 너무 느리긴 하다

아마 다음에 사이드 프로젝트 거리가 생각나면 적어도 어딘가에 떠 있는 만들다 만 앱 정도까지는 하다가 끝나지 않을까 싶다. 그 전까지는 에너지도 없고 강박도 있고 해서 못 했지만.