이번 포스팅에서는 저번 포스팅에 이어 HTML5 Audio API를 사용하여 실제로 오디오 이펙터를 만드는 과정에 대해서 포스팅 하려고 한다. 저번 포스팅에서 이미 이야기 했듯이 Audio API는 여러 개의 노드를 연결하여 오디오의 흐름을 만들어 내는 것을 기본 개념으로 가지고 있고, 이펙터를 만들기 위해 필요한 몇 개의 추상화된 노드들을 기본적으로 제공해주기 때문에 그렇게 어려울 건 없다.
![[JavaScript로 오디오 이펙터를 만들어보자] 나만의 소리 만들기](/2019/08/21/javascript-audio-effectors-practice/thumbnail.jpg)
[JavaScript로 오디오 이펙터를 만들어보자] 나만의 소리 만들기
![[JavaScript로 오디오 이펙터를 만들어보자] 소리의 흐름을 파악하자](/2019/08/19/javascript-audio-effectors-gain/thumbnail.jpg)
[JavaScript로 오디오 이펙터를 만들어보자] 소리의 흐름을 파악하자
이번 포스팅에서는 컴퓨터는 어떻게 소리를 들을까? 포스팅에서 진행했던 오디오 파형 그리기에 이어서 오디오에 여러가지 효과를 줄 수 있는 이펙터를 만드는 과정을 설명하려고 한다. HTML5의 Audio API는 오디오에 효과를 줄 수 있는 여러가지 노드를 제공하는데, 대부분의 이펙터는 이 노드들만 사용해도 구현할 수 있을 정도로 완성도있는 API를 제공한다.
Webpack Watch의 메모리 누수 고치기
이번 포스팅에서는 최근에 고쳤던 Webpack Watch 기능의 메모리 누수에 대해서 간략하게 남겨보려고 한다. 필자가 회사에서 개발한 프로젝트가 점점 커짐에 따라서 Watch 중에 빌드를 여러 번 돌리게되면 어느 순간 갑자기 out of memory가 뜨면서 프로세스가 죽어버리는 이슈가 발생하였다. 이 문제는 사실 꽤 예전부터 발생했던 이슈지만 계속 비즈니스 이슈를 개발하느라고 외면받고 있던 이슈였는데 우연히 기회가 되어 해당 이슈를 자세히 들여다 볼 수 있었다.
로우 레벨로 살펴보는 Node.js 이벤트 루프
1년 전, 필자는 setImmediate & process.nextTick의 차이점에 대해 설명하면서 Node.js의 이벤트 루프 구조에 대해 살짝 언급한 적이 있었다. 놀랍게도 독자 분들은 원래 설명하려고 했던 부분보다 이벤트 루프 부분에 대해서 더 많이 관심을 주었고, 필자는 그 부분에 대해서 많은 질문을 받았었다. 그래서 이번에는 Node.js의 이벤트 루프를 구성하는 로우 레벨의 동작을 자세하게 설명해보려고 한다.
PWA 하루 만에 도입하기(삽질기)
이번 포스팅에서는 필자가 회사에서 2019년 7월 5일 금요일 하루 동안 기존 어플리케이션에 PWA(Progressive Web Application) 기능을 붙힌 삽질기를 기록하려고 한다. PWA는 지원하지 않는 브라우저에 대한 예외처리만 꼼꼼하게 해주면 UX, 성능, SEO 등에서 무조건 플러스 요인이기 때문에 예전부터 계속 해보고 싶었다.
V8 엔진은 어떻게 내 코드를 실행하는 걸까?
이번 포스팅에서는 구글의 V8 엔진이 어떤 방식으로 자바스크립트를 해석하고 실행하는지 살펴 보는지에 대해 포스팅하려고 한다. V8은 C++로 작성되었지만 필자의 메인 언어가 C++이 아니기도 하고, 워낙 소스가 방대하기 때문에 자세한 분석까지는 아니라도 최대한 웹 상에 있는 정보들과 필자가 분석한 V8의 소스코드를 비교해가면서 살펴보려고 한다.
JavaScript와 함께 해시테이블을 파헤쳐보자
이번 포스팅에서는 많이 사용되는 자료구조 중 하나인 해시 테이블(Hash Table)에 대해서 정리하려고 한다. 먼저 해시 테이블이 무엇인지, 왜 사용하는지 알아보자!
JavaScript의 let과 const, 그리고 TDZ
이번 포스팅에서는 JavaScript ES6에서 추가되었던 let과 const 키워드에 대해서 자세히 포스팅하려고 한다. 부끄럽지만 지금까지 필자는 let과 const는 호이스팅이 되지 않는다고 생각하고 있었다. 하지만 얼마 전 친구와 대화하던 중에 let과 const도 호이스팅 대상체이지만 TDZ라는 특수한 영역을 사용하여 참조를 방어하는 것임을 알게 되었다.
JavaScript 배열(Array)의 발전과 성능에 대해서 자세히 알아보기
이 포스팅은 2017년 9월 2일에 Paul Shan이 작성한 Diving deep into JavaScript array - evolution & performance를 번역한 글입니다.
포스팅을 시작하기 전에 이 포스팅은 JavaScript 배열의 구문에 관한 것을 알려주거나 예제를 보여주는 등의 기본적인 내용은 아니라고 먼저 얘기해두고 싶다. 이 포스팅에서는 메모리 표현, 최적화, 구문에 따라 달라지는 동작의 차이, 성능 및 최근의 JavaScript 배열이 어떻게 발전했는지에 관해서만 설명할 것이다.
클라이언트 사이드 렌더링 최적화
이번 포스팅에서는 필자의 현직장에서 진행했던 클라이언트 사이드 렌더링 최적화에 대해서 적어보려고 한다. 크롬 브라우저의 Audits 탭에서 현재 페이지의 퍼포먼스나 SEO 점수와 같은 지표를 확인해볼 수 있다.
