윤자이 기술블로그

Arrow Function에서의 this 바인딩 일반적으로 Javascript에서의 this는 가장 가까이 있는 객체를 바인딩하게 됩니다. 하지만 화살표 함수에서는 조금 다르게 작동하는데 화살표 함수에서는 일반 함수와 다르게 this와 arguments가 바인딩되지 않습니다. 이와 같이 화살표 함수에서는 this 바인딩이 되지 않는 이유는 일반 함수에서는 this 바인딩으로 인한 버그가 발생할 수 있기 때문입니다. 일반적으로 일반 함수에서는 this를 사용하면 호출 시점에 사용된 객체로 바인딩되게 됩니다. 따라서 객체에 바인딩된 일반 함수를 다른 변수에 할당해서 호출하게 되면 버그가 발생하게 됩니다. 아래의 예시를 살펴보겠습니다. const obj = { count: 1, increase: functio..

저는 요즘 Typescript의 매력에 빠져있습니다. 3월 11일에 페이스북에 타입스크립트 왜 쓰는지 모르겠다고 독설을 늘여놓았다가 1달 만에 우디르급 태세 전환을 했거든요ㅋㅋㅋ 밑에 이미지에서도 TMI로 구구절절 언급하고 있지만, JS의 가벼움을 그대로 가지면서도 트랜스파일링 시점에 에러를 잡아내 주는 이 녀석은 정말 물건입니다. bbb 그런데 문득 친구가 오늘 JS로 클로저 공부를 했다는 이야기를 듣고 뜻밖의 궁금증이 떠올랐습니다. TS는 private을 어떻게 구현할까? 처음 JS 책에서 클로저에 대해 공부할 때가 생각납니다. 대체 이놈은 왜 있는거지? 라는 생각이 들었고, 시간이 지남에 따라 private을 따로 지원하지 않는 javascript에서 정보은닉을 구현하기 위해 사용하지 않을까?라는 ..

※ 이 포스팅은 스터디 강의 자료로 사용되었습니다. 2015년에는 자바스크립트 문법에 매우 큰 변화가 있었습니다. 바로 ES2015(ES6라고도 부릅니다.)가 등장한 것인데요. 이 기점을 기준으로 매년 문법 변경 사항을 발표하고 새로운 문법 상세에 대해서도 활발한 논의가 이루어지고 있습니다. 이전까지 포스팅에서는 ES5 문법을 이용해 예제들을 작성했습니다. 하지만 이제는 ES6를 배워둘 필요가 있다고 알려드리고 싶습니다. ES6에는 다른 언어들의 장점을 본뜬 편리한 기능들이 많이 추가되었기 때문입니다. 하지만 처음부터 ES6 문법으로 포스팅을 작성하지 않은 이유는 이전 포스팅에서는 문법보다는 보다 개념적인 것들을 이해하길 바랐고, 다양한 ES5를 알고 있어야 ES6 문법을 이해하기 쉽고 상황에 맞게 선택..

※ 이 포스팅은 스터디 강의 자료로 사용되었습니다. 이번 포스팅에서는 자바스크립트 함수에 대해서 알아보도록 하겠습니다. 누군가 저에게 자바스크립트에서 가장 중요한 개념이 무엇이냐고 묻는다면 저는 단연 함수라고 이야기할 것 같습니다. 어떤 언어에서나 함수는 중요한 역할을 하지만 특히 자바스크립트에서는 함수의 역할이 남다르게 중요합니다. 그러한 이유에는 모듈화, 클로저, 객체와 같은 자바스크립트의 근간이 되는 기능들을 함수가 제공하기 때문입니다. 이전 포스팅에서도 가끔 언급했듯이 자바스크립트의 함수는 1급 객체라고 불립니다. 1급 객체는 아래와 같은 특성을 지닙니다. 변수나 데이터 구조안에 담을 수 있습니다. 파라미터로 전달할 수 있습니다. 리턴 값으로 사용할 수 있습니다. 리터럴로 생성할 수 있습니다. 동..

Node Pacackage Manager. 이하 npm은 이름 그대로 노드 패키지 매니저이다. 세상에는 많은 자바스크립트 프로그래머들이 있고, 그들이 유용한 자바스크립트 패키지들을 이미 만들어 두었고, 그런 코드들이 공개되어 있는 것이 바로 npm이다. npm은 세계 최대 규모의 패키지들을 보유하고 있다. 이러한 패키지들은 노드의 생태계를 더욱 견고하게 만들었다. npm에 업로드된 노드 모듈을 패키지라고 부른다. 모듈이 다른 모듈을 사용할 수 있는 것처럼, 패키지도 다른 패키지를 사용할 수 있다. 이러한 관계를 의존 관계라고 한다. https://www.npmjs.com/ npm | build amazing things Bring the best of open source to your company n..

이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. 먼저 이러한 이벤트들에 관한 용어들을 정리하고 가도록 하겠다. event target target은 이벤트가 일어날 객체를 의미한다. 예를 들어 버튼을 누르면 새로운 창이 열리는 객체가 있다고 하자. 그렇다면 여기서 버튼은 event target이 된다. event type 이벤트의 종류를 의미한다. 위의 예에서는 click이 이벤트의 타입이 된다. 그 외에도 스크롤이나 마우스가 움직였을 때 발생하는 것들도 이벤트 타입이다. event handler 이벤트가 발생했을 때 동작하는 코드를 의미한다. 이벤트 등록방법 inli..

html은 정적인 문서이다. 이러한 html을 동적으로 제어하기 위해서는 자바스크립트를 사용해야 한다. 웹 브라우저는 브라우저의 여러 구성요소들을 객체로 만들어서 제공해주는데 이것을 Object Model이라고 한다. 자바스크립트는 이러한 객체들을 제어해서 웹 브라우저를 제어할 수 있게된다. 객체들은 서로 계층적인 관계로 구성되어 있는데 그중 가장 큰 틀이 BOM과 DOM이 있다. DOM (document object modjel)의 document객체는 태그나 태그 같은 웹 페이지에 있는 다양한 태그들을 객체로 제어한다. BOM(browser object model)은 현재 이 웹 브라우저가 가르치고있는 url을 알아낸다거나, 현재 웹 브라우저가 표시하고 있는 페이지를 reload 한다거나 또는 경고창..