클로저(Closure)는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 대표적인 특성 중 하나다. MDN에 의하면 클로저의 정의는 다음과 같다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment) 보통 어떤 개념의 정의는 개념에 대한 핵심을 압축해놓은 작은 책이다. 따라서 우리는 정의에 사용된 단어들을 일종의 목차내지 이정표 삼아서 탐색을 진행함으로써 그 책을 음미할 수 있다. 그러면 한 번 시작해보자. 1. Lexical environment 렉시컬 환경이란 코드를 실행하기 앞서 생성되는 특별..

자바스크립트는 함수형을 기반으로 하는 class-free 프로토타입 기반 객체지향 프로그래밍 언어다. ES6에서 class가 정식 문법이 되었지만 이 또한 결국 javascript 객체지향의 근간인 prototype 방식을 문법적으로 class처럼 보이게 만들어준 도구에 불과할 뿐이다. 그렇다면 프로토타입이란 무엇일까? 1. 자바스크립트의 탄생 Brendan Eich가 자바스크립트를 처음 설계할 당시, 웹브라우저에서 간단하게 돌아가는 작은 스크립트를 만들고자 했다. 때문에 복잡한 class 문법을 도입하지 않고 LISP 등의 함수형 언어에서 아이디어를 차용해 언어를 설계하고자 했다. 그러나 Netscape의 상사는 시대적으로 당시 인기가 많았던 Java와 유사한 언어를 만들길 원했고 결국 class 문법..

자바스크립트에서 this의 쓰임새는 대표적인 객체지향 언어인 Java 등과 약간 다르다. 자바스크립트에서는 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라진다. 1. 자바스크립트 함수 호출 방식 자바스크립트에서 함수 호출 방식은 크게 다음 4가지가 있다. 일반적인 함수 호출 메소드 호출 생성자 함수 호출 (객체 생성 함수) apply/call/bind 호출 각각의 경우에 대한 this 바인딩을 알아보자. 이후 화살표 함수에서의 this 바인딩에 대해 알아보자. 2. 일반적인 함수 호출 this는 전역 객체를 가리킨다. const foo = function(){ console.log(this); } foo(); // window 3. 메소드 호출 this는 해당 메소드를 소유한 객체에 바인딩된다..

자바스크립트에서 변수 선언을 위한 키워드로 var, let, const가 있다. 이들의 특징을 살펴보고 이와 연관지어 호이스팅이라는 재미있는 개념 또한 알아보자. 1. var ES6 이전 자바스크립트에서 변수 선언 시, var를 앞에 붙였다. var 키워드를 사용하면, 변수를 재선언하거나 재할당하는 것이 가능하다. var는 또한 함수 레벨 스코프를 지녔다. 즉, 지역 스코프가 함수 내부에서만 만들어지기 때문에, for문, if문 등의 문 내부에서만 사용하고 싶은 값들이 의도치 않게 전역 변수를 바꿀 수도 있다. 모던 웹 개발 세계에서 var는 사용하지 않는다고 봐도 무방하다. 2. let과 const let과 const는 var와 다르게 블록 레벨 스코프다. 때문에 함수가 아닌 블록을 기준으로 지역 스코..

React Router는 React.js에서 routing을 위해 사용하는 standard library다. React Router를 활용하면 부드러운 브라우저의 URL 전환이 가능하다. 본 포스팅은 2022년 4월 기준 react-router-dom v6 최신 버전에 대한 글이다. 1. 개요 React.js 하면 가장 먼저 떠오르는 점은 SPA(Single Page Application)일 것이다. 즉, React를 사용한 앱은 주로 Client에서 Rendering되며, 하나의 페이지 내에서 추가 리로딩없이 데이터를 업데이트하는 방식으로 사용자에게 View를 제공한다. 비록 SEO(검색 엔진 최적화)에 불리하고, 첫 로딩 시간이 상대적으로 길다는 단점이 있지만, React로 구축한 서비스는 화면의 깜..