로컬에 WebAssembly 설치하기

내 컴퓨터에서 Exercism 연습 문제를 풀 수 있도록 WebAssembly를 로컬에 설치하는 방법을 알아봐요


이 트랙은 WebAssembly의 런타임을 제공하기 위해 Node.js를 사용해요. 즉, 컴퓨터에서 JavaScript를 실행할 때는 항상 Node.js를 사용한다고 가정해요.

트랙 요구 사항

많은 컴퓨터에 Node.js가 미리 설치되어 있거나, 이전에 또는 다른 의존성으로 설치되어 있을 수 있어요. 그러니 무엇을 하기 전에 이미 설치되어 있는지 확인해 봐요.

  1. 터미널(Terminal, cmd, Powershell, bash, ...)을 열어요
  2. node -v를 실행해요

Node.js가 설치되어 있으면 버전이 표시돼요. 이 버전을 적어 두세요. Node.js가 설치되어 있지 않다면 오류가 출력돼요. 보통 'node' is not recognised 같은 메시지가 나와요.

Node.js

Node.js가 미리 설치되어 있는 경우

Node.js 웹사이트로 가 봐요. 그러면 _두 개_의 버전이 표시돼요 (운영체제를 감지하면요. 그렇지 않으면 먼저 운영체제를 선택해요). node -v로 확인한 버전이 이 중 하나와 일치하면 잘 된 거예요. 일치하지 않으면 Node.js LTS를 사용하는 걸 권장해요. 업그레이드 때문에 시스템의 무언가가 깨질까 걱정된다면 모든 게 괜찮은 것처럼 계속해도 돼요. 다만 예상치 못한 일이 생기면 지원을 못 해 드릴 수도 있어요.

Node.js가 설치되어 있지 않은 경우

Node.js를 설치하는 방법은 몇 가지가 있어요:

두 방법 모두 Windows, macOS, Linux를 지원해요. 어떻게 해야 할지 모르겠다면 설치 프로그램을 사용하는 게 가장 쉬워요.

  • LTS 버전을 사용하는 걸 권장해요. Node.js 웹사이트에서도 "대부분의 사용자"에게 권장 된다고 표시되어 있어요.
  • 웹페이지와 설치 프로그램에 나오는 안내를 따라 Node.js를 설치해요.

설치 테스트

설치 프로그램이 끝나거나, 패키지 관리자가 완료되거나, 바이너리를 복사하고 안내를 모두 따랐다면, 모든 게 잘 되었는지 테스트해 보면 좋아요.

  1. 터미널(Terminal, cmd, Powershell, bash, ...)을 열어요
  2. node -v를 실행해요

버전이 웹사이트에 있는 것과 일치해야 해요.

참고: 새 터미널 창을 여는 게 중요해요. 이미 열려 있는 터미널 창은 설치가 끝난 뒤 새로고침되지 않았을 수 있어요. 즉, 열려 있는 터미널은 새 프로그램이 설치된 걸 모른다는 뜻이에요.

도움말: 'node' is not recognised

공식 설치 프로그램을 사용했다면 PATH가 자동으로 설정되었을 거예요. 하지만 셸이 전역으로 설치된 모듈을 찾지 못하거나, Node.js를 소스에서 직접 빌드한 경우에는 PATH에 npm 바이너리를 포함하도록 업데이트해요.

macOS와 Linux에서는 ~/.bash_profile이나 ~/.zshrc에 다음을 추가하면 돼요:

export PATH=/usr/local/share/npm/bin:$PATH

Windows에서는 시작 메뉴를 열고 "environment variables"를 검색해요. PATH 항목을 편집해서 npm 바이너리 경로를 여기에 추가 해야 해요. 보통 이 경로는 C:\Program Files\nodejs에 있어요. File Explorer로 여기를 열어 보면 node.exe, npm.bat, npx.bat을 찾을 수 있어요.

열려 있는 터미널을 모두 닫고 새 터미널을 열어요.

과제 요구 사항

운영체제에 맞는 Exercism CLI를 다운로드하려면 이 안내를 따라요.

CLI를 설치하고 설정했다면 첫 번째 연습 문제인 hello-world를 다운로드해요:

exercism download --exercise=hello-world --track=wasm

그다음 각 과제에서 테스트를 실행하려면 몇 가지 도구가 필요해요. 각 과제 디렉터리에서 다음 명령을 실행하면 설치할 수 있어요:

npm install

도움말: '<package>' is missing / cannot be found

연습 문제를 업그레이드 한 뒤에 이 메시지가 보인다면, npm 7에 오신 걸 환영해요. node_modules와 package-lock.json을 삭제하고 명령을 다시 실행하면 해결돼요.

디스크 공간이 걱정되고 다른 도구를 설치해도 괜찮다면 pnpm을 살펴봐요. pnpm은 각 패키지 버전의 복사본이 디스크에 하나만 설치되도록 보장해요. 이 경우 npm install 대신 pnpm install을 실행하면 모든 게 예상대로 동작할 거예요.

그런데 npm은 무엇이고 왜 이게 동작할까요?

JavaScript 트랙을 완료하는 데 이 정보가 꼭 필요한 건 아니에요. 하지만 방금 무슨 일이 일어났는지 알고 싶다면 다음 문단이 도움이 될 거예요:

이게 동작하는 이유는 npm이 Node.js에 함께 딸려 오는 패키지 관리자이기 때문이에요. Node.js는 위 단계에 따라 설치했죠. npm 명령은 package.json 파일을 찾는데, 이 파일은 각 과제 폴더에 있어요. 이 파일에는 위에서 본 "dependencies"가 나열되어 있고, npm이 이것들을 다운로드해서 node_modules 폴더에 넣어요.

package.json의 스크립트는 로컬 node_modules 폴더의 바이너리를 사용하고, exercise 설명에 나열된 대로 테스트를 실행하는 데 쓰이는 것이 바로 이 스크립트예요.