TOAST UI

처음으로 웹어셈블리 (WebAssembly)에 대해 들었을 때 그것은 확실히 멋져 보였고 시도해 본다는 것에 매우 흥분했다. 그래서 곧바로 시작했지만 수많은 좌절을 겪게 되었다. 이 글의 목표는 당신에게 내가 겪었던 좌절의 일부만이라도 겪지 않게 하는 것이다.

클로저를 처음 접했을때 전혀 이해가 되지 않았던 기억이 난다. 클로저를 제대로 이해하려면 자바스크립트 코어에대한 지식이 적지 않게 필요하기 때문이다. 개인적으로는 자신이 사라지기전까지 스코프의 종결을 미루기에, 바꿔 말하면 자신의 사라지면 자신의 스코프도 종결해 버리기에 Closure(종결) 라고 한때 간단하게 정리 했었다.(뭐 틀린말은 아니다) 클로저에 관한 설명은 여기 링크에서 자세하게 알아 볼 수 있다. 참으로 훌륭한 글이다.

어떤 프로그램을 만들든지, 중복 코드는 자주 나타난다. React 또한 마찬가지로 각 React 컴포넌트에서 중복되는 로직과 라이프사이클을 만날 수 있다. 보통 JS에서 클래스 간 중복 로직은 mixin을 통해 해결하는 경우가 많은데, ES6 class문법에서 React는 mixin API를 지원하지 않는다. (물론 직접 class의 prototype을 수정하는 mixin을 구현하거나, React.createClass의 mixin을 이용할 수는 있다.) 그래서 이런 중복 코드를 다른 방식으로 풀어내고 해결하는 방법을 우선 먼저 찾아봐야 하는데, 그 전에 일단 왜, 도대체 왜 mixin을 지원하지 않는지부터 알아보자.

자바스크립트는 큰 특징 중 하나는 '단일 스레드' 기반의 언어라는 점이다. 스레드가 하나라는 말은 곧, 동시에 하나의 작업만을 처리할 수 있다라는 말이다. 하지만 실제로 자바스크립트가 사용되는 환경을 생각해 보면 많은 작업이 동시에 처리되고 있는 걸 볼 수 있다. 예를 들면, 웹브라우저는 애니메이션 효과를 보여주면서 마우스 입력을 받아서 처리하고, Node.js기반의 웹서버에서는 동시에 여러개의 HTTP 요청을 처리하기도 한다. 어떻게 스레드가 하나인데 이런 일이 가능할까? 질문을 바꿔보면 '자바스크립트는 어떻게 동시성(Concurrency)을 지원하는 걸까'?

웹사이트나 애플리케이션의 코드 줄 수가 증가하면 필연적으로 버그가 생긴다. 자바스크립트 뿐만 아니라 모든 언어가 버그 없이 무언가를 만드는것은 매우 어렵고, 불가능하다. 하지만 그것이 버그를 생기지 않도록 주의조차 할 수 없는 것을 의미하는 것은 아니다.

자바스크립트는 원형 객체로 새로운 객체를 생성하는 프로토타입(원형) 기반 언어다. 프로토타입 기반 언어란 무엇일까? 자바스크립트로 프로토타입 언어의 특징을 어떻게 구현할까? 이전에 접했던 자바스크립트에서의 프로토타입에 대한 글이 어려웠다면, 이 글을 통해서 조금이나마 쉽게 이해할 수 있기를 기대한다.

꼭 프론트엔드 개발자가 아니더라도 웹 개발을 하다 보면 한 번쯤은 크롬 개발자 도구를 사용해 봤을 거라 생각한다. 크롬이 버전업할수록 크롬 개발자 도구 역시 나날이 발전해 왔고 현존하는 도구 중에는 최고의 웹 개발자 도구라고 말할 수 있다. 예전 IE6에서 alert과 status로 디버깅을 했던 시절을 생각하면 정말 좋은 세상에 살고 있다는 생각이 든다.

리액트의 성능 향상을 위한 가이드. 보통의 웹 어플리케이션에서는 한 페이지에 다수의 엘리먼트들을 렌더링한다. 이번 포스트에서 다수 엘리먼트들을 렌더링할 때 어떤 방식으로 성능 향상을 하는지 보여주고자 한다.

매일 쏟아져 나오는 ES6에 대한 글을 보면 그저 한낱 먼 미래의 이야기라는 생각이 든다. 서비스를 ES6 로 개발하기에 버전 별 브라우저 사용률이 발목을 잡고 있기 때문이다. b2c는 그나마 좀 낫다. b2b는 여러 제약 때문에 windows xp를 사용하는 고객도 있고 (우리의 xp는 IE8 까지만 사용 가능하다) 심지어 최신 브라우저를 쓰면서도 '호환성 보기 모드' (IE8 시뮬레이션 모드)를 설정해놓고 사용하는 경우도 있다.

심볼(Symbols)은 ES6에서 소개된 새롭고 유일한 원시(primitive) 타입이다. 이들은 자바스크립트 이전 버전에서 작성된 코드와 역방향 호환성을 유지하면서, 객체의 기능을 확장하는 문제를 해결하기 위해 언어에 추가됐다. 그들은 부가적으로 개발자들이 새롭고 흥미로운 방법으로 언어 동작에 영향을 미칠 수 있는 기능을 제공한다. 이 아티클에서는 심볼의 개념 소개와 목적에 대한 설명, 그리고 현재 심볼을 사용할 수 있는 가장 일반적인 방법을 연결 지어 보여주겠다.