글로벌 서비스를 개발하면서 다루기 어려웠던 부분 중 하나가 오디오 관련 이슈다. 다양한 브라우저, 네트워크, 운영체제 환경을 가진 유저들이 있어서 런타임에서 다양한 이슈가 발생했다. 특히 에러 없이 오디오 재생이 안되거나, 혹은 재생 중간에 멈추는 버그가 가끔 발생했는데 원인을 찾기가 까다로웠다. 정확한 문제의 원인을 알기위해서 코드 레벨부터 브라우저, 네트워크단까지 확인하며 원인을 찾아 해결했다. 주요 이슈 "오디오가 나오지 않아요", "오디오가 조금 재생되다가 멈춰요" 몇몇 유저들에게 위와 같은 오디오 재생 버그가 리포트 되었다. 웬만하면 재시도를 하거나 브라우저 캐시를 제거하면 정상으로 돌아 왔지만, 그렇지 않은 유저도 아~주 소수 존재했다. 자주는 아니지만 주기적으로 동일한 현상이 생겨 정확한 원..

cryptoJS 사용하는 법 지금부터 plan text를 암호화 하는 방법을 알아보겠습니다. 우선 Work Flow를 읽어보며 흐름을 잡으시고, 예시를 보면서 사용법을 익혀보겠습니다! Work Flow 1. npm i crypto-js 설치 npm i crypto-js 2. import crypto from 'crypto-js' import crypto from 'crypto-js'; 3. Encrypt const ciphertext = CryptoJS.AES.encrypt('암호화할 값', 'secret key').toString(); *secret key는 서버개발자와 공유하는 키값이다. 4. Decrypt const bytes = CryptoJS.AES.encrypt(ciphertext, 'secr..

자바스크립트를 통해 브라우저를 다룬 다는 것은 어떤 의미인가? -> 그것은 브라우저의 구성요소들을 객체로 다루는 것이다. 웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다. 이 관계를 그림으로 나타내면 아래와 같다. (출처 : http://learn.javascript.ru/browser-environment)