MediaStream을 video 태그로 설정하기

video.src = window.URL.createObjectURL(mediaStream); // 과거 버전
video.srcObject = mediaStream; // 현재 버전

MDN의 URL.createObjectURL 설명에 따르면…
No longer accepts MediaStream object
따라서 이제는 HTMLMediaElement.srcObject에 직접 설정하는 걸로…

참고
MDN HTMLMediaElement.srcObject 설명: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
MDN URL.createObjectURL 설명 https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

jQuery 특정 패턴의 CSS class 제거하기

<div id="hello" class="test-1 test-2 test-a test-qwer my-class">
...
</div>

위와 같은 HTML 내용에서 test-xxx 이름의 CSS Class를 모두 지우려면

$("#hello").removeClass((_i, className) => {
    return (className.match (/(^|\s)test-\S+/g) || []).join(' ');
});

이렇게 하면 됩니다.

<div id="hello" class="my-class">
...
</div>

Cordova browser 로 테스트 할 때

https://www.npmjs.com/package/cordova-plugin-browsersync

BS가 이걸 사용해서 테스트를 했었는데, Cordova 를 최신 버전으로 변경하면서 동작을 하지 않습니다.

그래서 다른 방법을 찾다가…
그냥 browser-sync를 플러그인이 아닌 형태로 사용하기로…

npm i -g browser-sync

그리고 cordova 프로젝트 폴더에 browser-sync 로 실행하는 배치 파일을 하나 만듭니다.

@CALL cordova build browser
@CALL browser-sync start -s www -w --port 8000 --ss platforms/browser/platform_www

이제 배치 파일을 실행하면 수정 내용이 바로 싱크되는 테스트 환경을 사용할 수 있습니다.

Express에서 CORS 허용하기

BS가 SPA(Single Page Application)을 하나 만들고 있습니다.
SPA는 BS의 핸드폰에서 실행할 것이고, 서버는 node.js + express 를 사용합니다.
보안상의 이유로 일반적인 환경에서는 도메인을 넘어서는 요청이 처리 되지 않습니다.
node.js + express 로 어떤 기능을 제공하는 RESTful API를 구현한다면 CORS를 허용해야 합니다.

일단 용어 정리부터…

  • SPA(Single Page Application)
    쉽게 설명하자면…
    index.html 파일 하나로 동작하는 웹어플리케이션을 말합니다.
    BS는 Cordova를 사용해서 SPA 모바일 앱을 하나 만들고 있습니다.
  • CORS(Cross Origin Resource Sharing)
    보안상의 이유로 웹페이지가 수행되고 있는 도메인이 아닌 리소스를 요청하는 것을 제한합니다.
    a.com에서 실행되는 어플리케이션이 b.com의 리소스를 사용할 때, 이러한 보안이 없다면 b.com에 의해 a.com이 망가질 수 있기 때문입니다.
    하지만 RESTful API를 구현한다면 API를 제공하는 서버와 어플리케이션이 수행되는 서버가 동일한 도메인을 사용하라는 보장이 없으므로 서버는 CORS를 허용하도록 작성되어야 합니다.
    물론 CORS를 허용하기에 다른 보안 방법을 추가해야 합니다. 예를 들면 API를 접근하는데 필요한 인증 시스템이나, 네트워크 수준의 접근 제한 등…

본론으로 들어가서…

BS처럼 node.js + express 를 사용해서 API 서버를 구현한다면 CORS 관련 미들웨어를 하나 추가하는 것으로 쉽게 처리할 수 있습니다.
물론 미들웨어 없이 “Access-Control-Allow-Origin”, “Access-Control-Allow-Headers”와 같은 헤더를 직접 명시하는 방법도 있겠지만…
BS는 훌륭한 미들웨어가 있다면 사용하는 것이 옳다고 생각합니다. (자동차를 만들기 위해 바퀴부터 개발하는 것은 아니라고 생각하기에…)

Express CORS 미들웨어: https://github.com/expressjs/cors

설치

npm install cors

초간단 사용

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'});
});

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80');
});