언어 & 프레임워크/JavaScript

개요 Hot Module Replacement(HMR)의 기본적인 동작 메커니즘에 대해 살펴보고, 간단한 예제를 통해 살펴보려고 한다. 예제와 설명은 esbuild 번들러에서 HMR 기능을 구현하는 데모를 기반으로 한다. 해당 구현 사항은 아래 저장소에서 확인 가능하니 참고하길 바란다. https://github.com/leegeunhyeok/esbuild-hmr GitHub - leegeunhyeok/esbuild-hmr: PoC of Hot Module Replacement(HMR) for Esbuild PoC of Hot Module Replacement(HMR) for Esbuild. Contribute to leegeunhyeok/esbuild-hmr development by creating ..

개요 자바스크립트에서 중요한 개념 중 하나인 클로저(Closure)에 대해 알아본다. 들어가기에 앞서 자바스크립트를 배우며 클로저라는 것에 대해 자주 들어보았을 것이다. 다만 정확히 이해하고, 설명하기는 다소 어려운 개념 중 하나이다. 우리가 작성한 코드에도 이미 클로저가 녹아들어가 있고, 자바스크립트의 모든 곳에 존재한다. 우리가 모르는 사이에 클로저를 접하고 있고, 이는 곧 클로저는 새롭게 배워야 하는 특별한 문법이나 패턴이 아니라는 것이다. 이전 글에서 스코프란 선언된 대상(변수, 함수 등)을 찾기 위한 규칙이라고 설명했다. 클로저를 이해하기 위해서는 렉시컬 스코프에 대해 이해하고 있어야 하며 스코프의 동작 체계 즉, 규칙은 클로저를 이해하는 데 있어 필수적이다. 이번 글에서는 이 클로저에 대해 알..

개요 지난번에 알아본 스코프(Scope)에 이어 자바스크립트의 개념 중 하나인 호이스팅(Hoisting)에 대해 알아본다. 들어가기에 앞서 지난 글에서는 스코프(Scope)에 대해 알아보았고, 스코프 개념에 대해 어느 정도 익숙해졌을 것이라고 생각한다. 내용을 간략히 정리해 보자면, 자바스크립트는 렉시컬 스코프 동작 방식을 따르며 우리가 작성한 코드에서 변수를 어떻게 그리고 어디서 선언하고 사용하는가에 따라 렉싱(Lexing) 타임에 스코프가 결정된다는 것이다. 자바스크립트의 경우 변수의 선언문이 어디에 위치해 있는가에 따라 스코프에 변수가 추가되는 과정이 조금 달라지는데, 이번 글에서는 이 부분에 대해 알아보려고 한다. 호이스팅(Hoisting) 아래 예시 코드를 살펴보며 이야기해 보자. 아래 예제 코..

개요 이번 글에서는 JavaScript 언어의 핵심 개념 중 하나인 스코프(Scope)에 대해 알아본다. 스코프(Scope) 란? 오늘날 대부분의 프로그래밍 언어는 변수를 선언하여 값을 저장하고 필요한 경우 참조할 수도 있다. 이처럼 변수는 메모리 상에 할당된 공간을 나타내는 추상적인 개념이자 프로그래밍 언어가 제공하는 핵심 기능 중 하나이다. 이렇게 선언된 변수는 메모리 상에 할당되어 있지만, 일반적으로 프로그래밍 언어를 통해 코드를 작성할 때에는 변수가 어느 메모리 위치에 존재하는지 확인이 필요한 경우는 매우 드물다. 왜냐하면 메모리 공간을 추상화한 것이 변수이고, 우리는 이를 제대로 식별할 수 있기만 하면 되기 때문이다. 보다 추상화 수준이 올라간 "프로그래밍 언어" 수준에서 생각해 보자. 프로그램..

이번 글에서는 자바스크립트의 self 에 대해 알아보려고 한다. this는 많이 접해보았을텐데 self 는 다소 생소할 수 있다. 이번 글을 통해 self가 무엇인지 한 번 알아보도록 하자. 1. self란 무엇인가? w3c의 문서를 확인해보면, self는 읽기 전용 속성이며 WindowProxy로서의 window 자신을 반환한다고 한다. 꽤 난해한 설명인데 WindowProxy는 또 무엇인지 궁금해 할 수 있다. WindowProxy는 브라우징 컨텍스트와 관련되어있는 주제이므로추후 다른 글에서 자세히 알아보도록 하고, 지금은 단순히 전역 객체인 window 객체 자체를 반환한다고 이해하면 된다. self는 결국 전역 객체인 window를 반환하는 속성이다. self가 this와 같은 키워드라고 오해할 ..

이번 포스팅에서는 ES6 에 추가된 전개 구문(Spread syntax, ...) 활용 트릭을 몇 가지 소개하려고 한다. 구글링을 해보면 꽤 많은 트릭과 활용 방법들이 있는데, 그 중 간단하면서 자주 사용할 수 있는 내용으로 구성해보았으니 한 번 알아보도록 하자. Rest parameter 나머지 파라미터 Rest parameter는 전개 구문에 해당하는 내용은 아니지만 눈에 보이는 코드 상으로 유사하니 한 번 알아보려고 한다. Rest parameter는 이미 널리 사용하고 있을텐데, 함수의 매개변수 갯수가 정해져있지 않을 때 사용하게 된다. const sum = (acc, ...nums) => { for (let num of nums) { acc += num; } return acc; }; sum(0..

안녕하세요 이번 포스팅에서는 ES6 (ECMAScript 2015)에 추가된 심볼(Symbol) 자료형에 대해 간단히 알아보도록 하겠습니다. 심볼은 자바스크립트의 원시(Primitive)타입으로 새롭게 추가되었습니다. 원시타입은 객체도 아니고 메서드도 아닌 타입을 의미합니다. 기존에는 string, number, boolean, null, undefined가 있었지만 여기에 오늘 알아볼 symbol 타입이 추가되었습니다. 심볼 생성 방법은 심볼 Wrapper 함수를 호출하면 됩니다. const sym = Symbol() 심볼을 생성할 때 구분하기 위한 데이터를 추가하여 생성할 수도 있습니다. Symbol(value) 심볼타입은 신기하게도 같은 value를 인자로 주고 생성하더라도 값은 같지 않습니다. S..

JQuery의 Ajax는 기본적으로 비동기 방식으로 동작합니다. 순차적으로 요청을 하고 싶을때는 옵션에 값을 하나 추가만 해주시면 됩니다. 옵션에 async 값을 false 로 지정한 후 사용하시면 됩니다. async 에 값을 지정하지 않을 경우 기본값으로 true가 사용됩니다.

안녕하세요 이전 포스팅에서는 콜백함수와 Promise 패턴에 대해 알아보았습니다. 이번 시간에는 비동기함수(Async function)에 대해 알아보도록 합시다! Node.js에서는 7.6버전부터 지원이 된다고 하니 알아두면 좋을것같습니다! 먼저 비동기함수에 대해 알아보기 전에 프라미스 패턴으로 구현한 간단한 예제를 봅시다. 위 예제는 이름이 비어있지 않으면 **님 반갑습니다! 를 출력하고만약 이름이 비어있으면 이름이 비어있다고 알려주는 예제입니다. 프라미스 패턴으로 구현되어있습니다. 프라미스 작동방식에 대해 이해하셨다면 금방 분석이 가능합니다. 아래 사진은 위 예제를 실행한 결과입니다. 이름이 'Lee' 이므로 정상적으로 출력이 됩니다. 만약 10행에서 'Lee' 대신 ''를 전달했다면 프라미스가 re..

안녕하세요 오늘 포스팅 주제는 자바스크립트의 Promise 패턴입니다! 지난 포스팅에서는 비동기 작업을 위해 콜백 함수를 사용한다고 했었습니다.하지만 콜백 함수는 가독성 등의 단점이 있기 때문에 여러 개선 방법이 있다고 설명했죠 그 중 하나가 프라미스(Promise) 패턴입니다! [예제는 Node.js 환경에서 테스트할 예정이구요 Node.js 뿐만 아니라 웹 브라우저에서 사용하셔도 동일합니다!] 먼저 설명 전 이전 시간에 진행했던 콜백 함수의 코드를 프라미스 패턴으로 동일하게 변경해보도록 하겠습니다! (콜백 함수사용 패턴) (프라미스 패턴) (프라미스패턴 코드 실행 결과, 콜백함수와 동일) 코드를 비교해보면 많이 바뀌었습니다. 하지만 기능은 동일하죠 더 어려워지고, 복잡해지고, 불편해보이실지는 몰라도 ..