윤자이 기술블로그

React.js를 공부하다 보면 필연적으로 한 번씩 듣게 되는 키워드가 바로 바벨과 웹팩입니다. 이 둘에 대해 자세히 알지 못하더라도 당장 리액트 개발을 하지 못하는 것은 아닙니다. 왜냐하면 리액트 팀에서 번거로운 바벨과 웹팩 설정을 create-react-app이라는 프로젝트를 통해서 아주 간편하게 설정하고 끝낼 수 있도록 도움을 주고 있기 때문입니다. 하지만 앞선 포스팅에서 이야기했듯이, 단순히 프레임워크 자체를 이해하기보다는 그 원리를 이해하고 더 나은 개발자가 되기 위해선 babel과 webpack이 왜 필요하고, 어떤 일을 하는지에 대해서 알고 넘어가 필요가 있습니다. 해당 포스팅에서는 바벨과 웹팩을 아주 간단하게 소개하고, 어떤 역할을 하는지에 대해서 살펴보도록 하겠습니다. (이후 좀 더 심화..

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

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