윤자이 기술블로그

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에서 정보은닉을 구현하기 위해 사용하지 않을까?라는 ..

이번 포스팅에서는 조금은 자바스크립트에서 벗어난 이야기를 해볼 예정입니다. 바로 이벤트 루프라는 녀석 때문입니다. 자바스크립트 튜토리얼이나 책에서 이벤트 루프에 관해서는 잘 언급하지 않습니다. 왜냐하면 정확히 이야기하자면 ECMAScrpt 스펙에는 이벤트 루프가 포함되어있지 않습니다. 이벤트 루프는 브라우저나 Node.js가 담당하는 부분이기 때문입니다. 하지만 이 튜토리얼에서 이벤트 루프를 언급하는 이유는 자바스크립트가 브라우저나 Node.js와의 연관성은 필연적이기 때문에 이 시점에서 비동기와 함께 짚고 넘어가는 것이 좋다고 생각했기 때문입니다. 이번 포스팅에서는 총체적인 접근이 조금 필요할 것 같습니다. 그래서 먼저 동기/비동기의 개념을 다루고, 자바스크립트에서 비동기가 적용되는 이벤트 루프에 대해..

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

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

※ 이 포스팅은 스터디 강의 자료로 사용되었습니다. 자바스크립트는 다른 언어와 다른 객체의 특징이 있습니다. 흔히 이러한 특성 때문에 자바스크립트를 장난감 같다고 이야기 하기도 합니다. 처음 프로그래밍 언어를 배우시는 분에게는 이러한 자바스크립트의 특성이 오히려 언어를 쉽게 이해하는데 도움이 될수도 있지만, C++, Java와 같은 컴파일 언어로 프로그래밍 언어를 접한 분들은 자바스크립트를 공부하며 "이게 된다고...?"라고 생각되는 부분들이 종종 있을 수 있습니다. 그만큼 자바스크립트는 자유로운 언어이고, 코딩하기 쉽지만 코드 스타일에 정형화 되어있지 않고, 디버깅하는데 어려움이 있는 단점도 있습니다. 하지만 분명한건 그만큼 매력적인 언어라는 점입니다. 이 포스팅에서는 사용하는 예제는 자바스크립트 런타..

※ 이 포스팅은 스터디 강의 자료로 사용되었습니다. 자바스크립트는 흔히 개발자들에게 자리잡은 인식은 '언제든 배울 수 있는 언어'라는 인식이 강합니다. 저 역시 그렇게 생각했고 자바스크립트를 제대로 공부하지 않았음에도 어느정도 결과물을 만들어 낼 수 있었습니다. 하지만 프로젝트가 커지고 ES6와 Node.js와 같은 자바스크립트 생태계가 변하게 되면서 자바스크립트 특성을 제대로 이해하지 않았던 부분들이 문제를 일으키기 시작했습니다. 자바스크립트는 스크립트 언어입니다. 그 중에서도 웹을 기반을 발전한 언어이기 때문에 다른 언어들과 특성이 다른 면이 있습니다. 물론 그 개념이 그리 어려운 것만은 아니지만, C나 Java와 같은 컴파일언어로 개발을 시작한 개발자들에게는 다소 낯설은 공부가 될 수도 있습니다. ..

Ajax란? 웹 브라우저를 근대적인 웹과 그 이전으로 나누는 중요한 기술이 바로 Ajax이다. 웹 브라우저에 내용이 바뀔때 마다 새로고침을 해서 변경하지 않아도 Ajax는 브라우저와 서버가 내부적으로 데이터 통신을 하게해 주어서 변경된 결과를 웹 페이지에 프로그래밍적으로 반영하게 해준다. 이러한 기술은 매번 보지 않아도 되는 기술을 매번 웹 페이지에 나타내지 않아도 되므로 서버에게는 부담이 줄고 클라이언트에겐 데이터를 적게 사용하게 되므로 양쪽다 이득을 보게된다. Ajax는 Asynchronous JavaScript and XML의 약자다. 직역하자면 비동기적 자바스크립트와 xml이 된다. 즉 비동기적으로 자바스크립트를 통해서 서버와 통신하는 방법을 의미한다. 이대 사용하는 API가 XMLHttpRequ..

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

Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 제어 대상 찾기 getElement document.getElementsByTagName : 문서 전체에 해당 tag를 찾는다. document.getElementsByClassName : 문서 전체에서 해당 class를 찾는다. document.getElementById : 문서 전체에서 해당 id를 찾는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 HTML CSS JavaScript var li..