FE 개발자를 위한 안드로이드 후려치기 #3 자바스크립트 인터페이스로 새로운 웹뷰 액티비티 띄우기
웹어셈블리 #1 Emscripten 시작하기
2018-11-19
Explanation
올해 제가 가장 관심 있게?? 생각하고 지켜보고 있는 게 몇 가지가 있는데요, 웹어셈블리와 블록체인, 그리고 타입스크립트와 캔버스 정도가 있답니다. 물론 좀 더 세세하게 들어가면 더 있긴 한데요. 암튼, 오늘 글의 주제는 웹어셈블리 입니다.
웹어셈블리에 대해선 쉽게 설명되어 있는 글들이 많은데요. 간단하게 우선 아래의 링크를 통해서 좀 더 자세히 알아보고 싶으신 분들은 참고하시면 좋을 거 같아요.
참고 링크.
MDN :https://developer.mozilla.org/ko/docs/WebAssembly
개발 바보들의 놀이터 :https://www.devpools.kr/2017/01/21/webassembly-binaryen-emscripten/
dongwoo.blog :https://dongwoo.blog/2017/06/06/번역-카툰으로-소개하는-웹어셈블리/
huiseoul(medium) :https://engineering.huiseoul.com/자바스크립트는-어떻게-작동하는가-웹어셈블리와의-비교-언제-웹어셈블리를-사용하는-게-좋은가-cf48a576ca3
이 글은 Emscripten 공홈에서 설치에서 시작까지 간단하게 정리한 글입니다. Emscripten는 간단하게 이야기하면 C나 C++ 코드를 웹어셈블리와 자바스크립트로 컴파일 해줍니다.
그리고 맥 OS를 기준으로 Python 2.7.12 이상, Xcode, git, cmake, node 가 설치되어 있어야 한다고 합니다. 저는 python 2.7.10, Xcode, git node는 이미 설치되어 있고 cmake는 뭔지 모르겠네요? 일단 퀵 스타트까지는 잘 되서 패스.
설치를 시작합니다. 터미널을 열고
1 2 3 4 5 6 7 8 9 10 11 |
# Emscripten SDK를 깃을 통해 다운로드 받고 git clone https://github.com/juj/emsdk.git # 다운로드 받은 디렉토리로 이동합니다. cd emsdk # 최신 버전으로 풀 받고 git pull # 최신 버전으로 설치합니다. ./emsdk install latest |
설치는 좀 오래걸려요.
1 2 3 4 5 |
# emsdk를 최신버전으로 활성화 하는 거 일려나요? ./emsdk activate latest # 최신 SDK를 활성화 합니다. source ./emsdk_env.sh |
설치가 잘 되었는지 확인합니다.
1 |
emcc -v |
두둥.. 저는 자바가 설치되어 있지 않다고 경고가 뜨네요. 자바가 설치 되어있지 않다면, 저 같은 경우에는 https://java.com/ko/download/mac_download.jsp로 가서 Java를 다운로드 받아서 설치하고 https://www.oracle.com/technetwork/java/javase/downloads/index.html로 가서 JDK를 설치하였습니다.
1 2 3 4 |
... emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.38.19 clang version 6.0.1 (emscripten 1.38.19 : 1.38.19) ... |
설치가 끝나면 이제 본격적으로 C/C++ 코드를 자바스크립트로 변환해 보겠습니다.
1 2 3 4 5 6 7 |
// emsdk/tests/hello_world.c #include <stdio.h> int main() { printf("hello, world!\n"); return 0; } |
간단하게 ‘hello, world’를 출력하는 코드입니다. 저는 C/C++을 하나도 몰라서… 모르지만 확장자를 hello_world.c로 저장하는 것으로 보아 위 코드는 C인 듯 합니다ㅎ
위 코드를 ‘tests’ 라는 폴더를 만들어서 ‘hello_world.c’라는 이름으로 저장하였습니다.
1 |
emcc tests/hello_world.c -o tests/hello_world.js |
위 명렁어를 실행하면 tests 폴더 안에 ‘hello_world.js’, ‘hello_world.wasm’ 파일이 새로 생긴 것을 확인 할 수 있습니다.
1 |
node tests/hello_world.js |
끝으로 위 명령어로 노드(NodeJS)에서 아웃풋으로 나온 js 파일을 실행하면 ‘hello, world!’가 출력되는 것을 확인 할 수 있습니다.
위 내용은 앞 서 말씀드렸듯이 Emscripten 공홈의 있는 내용의 인스톨과 튜토리얼 부분입니다. 조금 더 자세한 내용은 아래 링크를 참고하시면 좋을 것 같습니다.
http://kripken.github.io/emscripten-site/docs/getting_started/index.html
이 글에서 적지는 않았지만, C나 C++이 아닌 Rust를 웹어셈블리 코드로 반환해주는 프로젝트도 있는데요. 그 부분은 다음에 따로 포스팅을 해보려 합니다.
그리고 개인적으로는 웹어셈블리에도 관심이 많지만, 저는 컴파일 언어들을 잘 모르고, C/C++은 GC가 없다는 것도 흥미롭고 해서, 틈틈이 C/C++을 공부하면서 포스팅하는 것도 좋겠다 생각을 하였어요. (일단은 생.각.만.)