Emscripten 가지고 놀기 1. (feat. CodeLite)
탐구생활/WEB 관련Emscripten 개발은... 가급적 모든 코딩과 테스트를 네이티브에서 진행한 뒤 빌드만 emcc를 사용하는 것이 편하다.
때문에 네이티브 환경을 오갈 수 있는 쓸만한 IDE가 간절해진다. (Make 방식은 아무리 들여다봐도 정이 안 감...)
윈도에서 VS와 emscripten 을 버무려둔 환경은 github 에 몇 개 보긴 했는데...
내가 코드를 이상하게 짜는건지 VS가 이런 저런 허용을 많이 해주는건지... 다른 플랫폼으로 옮길 때 항상 삽질을 많이 하게 된다.
차선책으로 XCode 에 Emscripten 툴체인을 비벼주려 한동안 고민했는데... 지식이 얕다보니 성공하지 못했다.
OSX 10.12 에서 돌렸더니 크래시가 나서 사용하기가 쉽지 않다. 무엇보다 모양도 별로고...
툴체인 변경이 쉬운 대안이 어디 없을까 뒤적이다가 CodeLite 가 눈에 띄었다.
그런데 어? 이거 물건이다! 딱 이럴 때 쓰라고 만들어진 듯 하다!!
그래서 오늘 요리는 Emscripten 과 CodeLite 버무리기.
Emscripten 을 가지고 놀려면 먼저 CMake 를 깔아줘야 한다. 설치방법을 간단히 정리 해 둔다.
아래 사이트에서 OSX 배포판을 받아 Application 에 설치하고
http://www.cmake.org/download/
다음과 같이 루트권한으로 실행시킨다.
$ sudo /Applications/CMake.app/Contents/MacOS/CMake
GUI에서 Tools -> Install For Command Line Use 선택.
버전 확인
$ cmake --version
cmake version 3.11.0-rc4
CodeLite 와의 연동 설명은 현 시점에서 최신버전인 Emscripten 1.37.36 을 기준으로 한다.
Emscripten 의 설치방법은 http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html 참고 할 것.
내 경우 설치 위치는 "/Volumes/Data/emsdk".
CodeLite 12.0.0 설치하고 (https://codelite.org/) "안녕 세상" 예제 준비.
Setting -> Build Setting 에서 새 툴체인 선택.
적당한 이름을 주고 GCC에서 설정을 복사.
C++은 "em++", Archive는 "emar", 나머지는 "emcc", 쓰이지 않는 것은 모두 비운다.
Build -> Configuration Manager 에서 Web 설정을 추가하고 ...
이 설정에 맞추어 예제 프로젝트에도 Web 구성을 추가한다.
이렇게 나오게 만들면 완료.
이제 워크스페이스의 구성에서 Web을 선택할 수 있다.
프로젝트 우클릭 후 Settings 선택, Web 구성의 컴파일러 설정을 변경해준다.
출력파일 확장자에 ".html" 을 덧붙여 주는 것을 빼먹지 말 것.
WorkSpace 의 구성을 Web으로 변경하고 F7을 눌러 빌드.
프로젝트 폴더 아래 "Web" 폴더 안에 *.html 파일이 생성된다.
생성된 html 파일을 열어보면 "Hello World"가 예쁘게 출력되는 것을 볼 수 있다.
사실 얘는 껍데기고, 빌드된 결과물은 *.js 에 들어있다. node 로 돌려보면 다음과 같다.
IDE가 좋은 것은 여러개의 소스를 한번에 비벼주기 편하다는 것이다.
소스파일을 하나 더 추가해서 잘 되나 확인해보자.
main.cpp
#include <stdio.h>
int main(int argc, char **argv) { printf("hello world\n"); TestFunc(); return 0; } |
F7로 빌드하고 콘솔에서 찍어보면 잘 동작한다.
일단 오늘은 여기까지.
OpenGL 테스트를 위한 GLFW 버무리기는 다음 포스팅에서...