카테고리 보관물: Front-End Development

ES6 import module 브라우저 지원

지금까지 JavaScript에서 모듈화는 조금 번거로웠다.
개발자들은 각자의 방식대로 스스로 모듈 방법을 찾거나, 번들링 도구를 사용하여 모듈화를 했다.

ES6 import module 구문이 있지만 브라우저에서 지원하지 않기 때문에
사용 하려면 번들링 도구나 babel, webpack의 도움을 받아야 가능 했다.

하지만, 이젠 ES6 import 구문을 외부 번들링 도구 없이 가능하다.
드디어 ES6 import module 브라우저 지원 한다.  문법은 간단합니다. [데모]


모듈을 호출하는 스크립트에 type=”module”을 작성 해줘야 한다.
물론 HTML에 inline으로 script 내용을 작성하지 않고 별도 스크립트 파일을 작성하고 호출 해도 된다.

// utils.js
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

 

[옵션]
위에 설명한 기본 방법에 스크립트 호출의 defer와 async 속성을 사용 할 수 있다.

  • defer: 스크립트 호출 시점은 지연 시킨다. [데모]
  • async: 스크립트 호출시 DOM 랜더링을 Stop 시키지 않고 한다. [데모]

[지원브라우저]

  • Chrome 61 이상
  • Firefox 54 이상 (behind the dom.moduleScripts.enabled setting in about:config.)
  • Edge 16 이상
  • Safari 10.1 이상

[제세한 설명]

음성 인식 API (Speech Recognition API)

Chrome의 음성 인식 API (Speech Recognition API) 는  크롬이 25버전 부터 지원된 스팩입니다.
현재는 Chrome과 Opera만 지원하고 있으며 사용 방법은 간단합니다.

음성인식 API 인스턴스 생성 후 간단한 호출로 브라우저에 내장되어 있는 음성인식 API를
사용 할 수 있습니다. (예제 보기 | 예제 코드)

마이크로 입력된 음성을 Text로 변환하여 리턴해주며, 서버를 거치지 않기 때문에 1인 환경에서는
생각보다 빠르고 정확한 인식률을 보여줍니다.

제가 이 분야에 관심은 갖게 된 계기는 이전에 포스팅했던 “스카이프 음성 통역 영상“을 본 후 인데요.
음성 인식 기술을 활용하여 서로 다른 국가의 어린이가 다른 언어로 대화하여도 그 음성을 Text로 변환하고, 또 번역API를 통해 실시간으로 상대방에게 메시지를 전달하여 자국어로 다른 나라의 사람과
대화가 통하도록 한것을 보고 실생활에 많은 도움을 줄 수 있는 기술이라고 생각 했습니다.

이 후 활용 가치를 판단하기 위해 여러차례 테스트를 해보았습니다.
1인 환경에서 맥북을 켜고 한국어로 같은 글귀를 읽어서 인식률을 테스트한 결과는 아래와 같습니다.

  • 1m 이내, 인식률 최대 80%이상
  • 1.2m 이내, 인식률 약 60~70%
  • 1.5m 초과, 인식률 약 10% 문자 인식 거의 못함

이어폰 마이크를 사용하면 10%가량 더 좋은 인식률을 보였습니다.

다양한 활용사례가 있지만, 한가지 예를들면 구글 Docs에서는 음성으로 워드 파일을 작성할 수 있게 보조 기구로 제공하고 있습니다.

이 처럼 사람의 손과 발을 완전히 대체 할 수는 없겠지만, 보조 수단으로서의 가치는 충분 하다고 생각이 들기 때문에 앞으로 더 많은 분야에서 적극적으로 활용 될 것이라 생각됩니다.

 

WebRTC 연구실

WebRTC를 이용한 프로젝트를 2년 넘게 진행하면서, 참고 자료들이 모두 외국자료들이라
저 또한 언어의 장벽에서 항상 느림보가 돼야만 했습니다.

WebRTC 연구실 이란 말은 다소 거창하지만, WebRTC를 배워보고 싶어하는 분들이 조금더 진입하기 쉽게 하는것을 목적으로 제가 알게된 정보들을 다듬어서 바로 사용할 수 있는 예제 공간으로 만들었습니다.

[사이트 정보]
https://webrtclab.herokuapp.com/ (무료 도메인이라 약간 느립니다)
WebRTC-연구실
요즘 여유가 없어서 처음 계획했던 주제를 모두 포함하진 못했지만, 시간을 내서 예제도 조금 더 추가할 예정입니다.

스카이프 영상통화, EDGE 브라우저 지원 릴리즈

2016년 4월 15일 스카이프가 MS Edge브라우저에서 플러그인 없이 영상통화 가능하도록 스카이프 웹버전 업데이트를 했습니다.

스카이프측에서는 WebRTC(ORTC) 영상회의를 위한 Plugin free 첫발을 내딛었다라고 발표했으며,
아직은 MS Edge (H.264UC코덱)에서만 동작하지만, H.264 코덱을 지원하는 Chrome과 Firefox와도 영상회의를 실현시킬것이라고 덧붙였습니다.  (발표내용)

히스토리

  • 2012년 6월, MS Edge와 Skype는 WebRTC(ORTC) 웹버전 서비스를 준비한다고 발표.
  • 2015년 9월, Edge간 1:1 영상회의와 1:n 오디오 통화 기능 데모 제공 (Only Edge)
  • 2016년 4월, 2012년 6월 시작을 알린 이후 약 4년이 흘러 스카이프 웹버전 (Beta)이 Edge에서 동작하도록 업데이트하였고, 동시에 Edge로는 플러그인 없이 스카이프 영상회의를 가능하게 되었습니다.

Edge RTC 로드맵

MS Edge 구현 목표는 오늘날의 웹 뿐만 아니라 장기적으로는 실시간 통신 산업과도 상호 운용될 수 있는 것입니다.

  • Edge ORTC에 H.264/AVC(Advanced Video Coding) 를 현실화 시킬 것
  • WebRTC 1.0 API를 Edge브라우저에 지속적으로 프로토타이핑 하고있으며, 상호 연동가능하게 지원 할 것
  • VP8을 지원하는 하드웨어들을 위해 RTC의 VP8 코덱 지원 준비도 착수 했다
 참고