codeJS의 모든 글

안녕하세요. codeJS를 운영하고 있고, Front-End기술에 관심이 많아요~ ^-^

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-연구실
요즘 여유가 없어서 처음 계획했던 주제를 모두 포함하진 못했지만, 시간을 내서 예제도 조금 더 추가할 예정입니다.