2donny

이번 글에서 Webpack, Parcel를 공부하면서 이러한 기술을 어떻게(How) 사용하는지 보다 대체 이걸 왜(Why) 사용하는지를 내가 이해한 방식을 토대로 글을 쓰려고 한다. 물론 뒤에 실습 코드도 나와있으니 인내심을 갖고 글을 쭉 읽은 후에 코드를 보면 어느정도 납득이 될 것이다. 먼저, What is parcel? Parel은 Webpack과 함께 bundler 시장의 점유율을 나눠갖고 있는 모듈 번들러이다. 번들러(bundler)란 dependency가 있는 자바스크립트 파일들을 최적화, 압축하여 하나 혹은 여러개의 static 파일로 빌드해주는 컴파일러이다. Why parcel? 질문에 대한 답을 하기 전에 먼저 브라우저 내부 엔진에 대한 이해가 필요하다(이전 포스팅을 참조). 브라우저의 ..

이 글은 이스라엘 개발자 탈리 가르시엘이 게시한 "How Browsers Work: Behind the scenes of modern web browsers"라는 글을 바탕으로 정리한 글입니다. 가르시엘은 millions 단위나 되는 C++ 랜더링 엔진 소스코드를 직접 분석하면서 어떻게 웹 브라우저가 동작하는지 파악하였다고 합니다. 웹 브라우저가 무엇인가? 웹 브라우저는 서버에서 받은 HTML, CSS, Javascript 파일을 받아서 브라우저 내부 "랜더링 엔진"의 Parser(파서)를 통해 문서들을 Parser tree로 만들고 순서대로 화면에 배치합니다. 웹 브라우저의 구조 1. User Interface : URL을 입력할 수 있는 주소 표시줄, 이전/다음 버튼, 새로고침 버튼, 중지 버튼, 북..

Speech recognition이란 사람의 음성을 텍스트로 변환해주는 Speech-to-text(SST) 기술이다. 현재 진행하고 있는 프로젝트에 이 기술이 필요하게 되어서 다양한 API를 찾아보다가 대부분 유료인 것이 걸려 (네이버 Clova는 api가 직관적이고 옵션이 좋았는데 1초에 15원이었다..) 포기할 때 쯤 Web speech API를 찾게 되었다. 무료로 기술을 제공을 해준다는 점 뿐만 아니라 레퍼런스가 매우 잘 정리되어있다는 점에서 이것을 정리해보기로 했다. 내가 참고한 자료는 MDN 웹 문서이고 지금부터 내가 사용하기에 유용했던 인터페이스와 그것의 Property 밑 Method를 내용을 정리해보겠다. 먼저 이 Web speech API는 어떤 식으로 동작하는가? Speech reco..

Typescript 사용하는 이유 Javascript는 dynamically typed language입니다. 즉, 런 타임에 타입이 정해지기 때문에 개발자들이 개발할 때(compile time) 없었던 에러가 클라이언트의 웹 브라우저(Run time)에서 일어날 수 있습니다. 이러한 치명적인 일을 방지하기 위해 규모가 있는 애플리케이션에서는 Type checker 역할을 하는 Typescript를 사용하여 개발합니다. Typescript는 다른게 아니라 typescript file을 javascript file로 컴파일하는 "컴파일러"입니다. 코드가 한번 컴파일되면, 결과로 나온 js 파일은 타입 정보가 없습니다. 이는 ES6+ 문법을 ES5로 컴파일해주는 Babel과 매우 유사합니다. 1. 일단 해보..