소켓에서 받은 데이터에서 특정 조건이 만족되면 아래 이미지와 같이 회색에서 파란색이 되도록 만들고 싶었다. 1. App.vue 2. socket 모듈 ... 생략 ... const setImage = (img) => { this.imgMark = img; } ... 생략 ... const changeData = (data) => { this.imgMark.src = data ? require("@/assets/images/on.png") : require("@/assets/images/off.png"); } ... 생략 ... 처음엔 "../이미지 경로" 이렇게 썼더니 아래 그림처럼 떠서 경로 잘못쓴줄 알고 당황했다.
아래 내용은 p. 93 ~ 107에 해당됨. 1) 엠스크립튼의 조건부 컴파일 심볼과 헤더 파일 웹어셈블리 모듈 개발을 하려면 엠스크립튼 헤더 파일을 코드에 추가해야 함. 조건부 컴파일 심볼(conditional compilation symbol)인 __EMSCRIPTEN__ 을 통해 컴파일하는지 여부를 알 수 있음. 엠스크립튼으로 컴파일하지 않을 때 필요한 헤더 파일은 조건부 파일 심볼의 else에 넣으면 됨. 더보기 #include #include #ifdef __EMSCRIPTEN__ // 심볼 // 엠스크립튼 라이브러리 헤더 파일 #include #endif 2) Extern "C" 블록 코드를 컴파일 할 때 함수명이 죽복되지 않게 바꿈. 이를 네임 맹글링(name mangling)이라 함. 이로 ..
WebAssembly in Action (p.98) 책 내용대로 컴파일 했더니 나중에 HTML 까지 만들고 실행했을 때 Uncaught TypeError: Module._malloc is not a function 에러가 나왔다. 책에 있는 내용 emcc validate.cpp -o validate.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','UTF8ToString'] 수정한 내용 emcc validate.cpp -o validate.js -s EXTRA_EXPORTED_RUNTIME_METHODS="['ccall','UTF8ToString']" -s EXPORTED_FUNCTIONS="['_malloc', '_free']" 끝!