IT 엘도라도

Node.js를 설치할 때 기본적으로 npm이라는 패키지 관리자가 함께 설치되며, 아직까지는 이게 가장 많이 사용되고 있다. 그러나 npm은 의존성 관리 방식에 있어서 비효율적이거나 문제가 되는 부분이 꽤 존재한다. 이를 해결하기 위해 yarn 개발자가 버전 2의 yarn을 새로 출시하였는데(2020.01.25), 이때부터는 yarnpkg/berry 저장소에서 별도로 유지 보수하기 시작했고 이를 yarn berry라 부르게 되었다. 그렇다면 npm이나 yarn v1은 어떤 문제를 가지고 있었는지, 그리고 새로 등장한 yarn berry는 그러한 문제를 어떻게 해결한 것인지 한 번 알아보자. 1. yarn berry (feat. Plug'n'Play) 우선, yarn berry를 사용하는 방법은 다음과 같..

이번 포스팅은 npm을 이용하여 패키지를 관리할 때 사용하는 package-lock.json 파일의 내용을 파헤쳐본다. 대략적으로는 프로젝트에서 필요로 하는 각 패키지의 정확한 버전을 명시함으로써 설치 시기에 따라 설치되는 패키지의 버전이 달라지는 문제를 막는 수단 정도로 알고 있는 사람이 많을 것이다. 그렇다면 구체적으로 package-lock.json 파일의 내용은 구체적으로 어떤 모습을 하고 있는지, 그리고 이것과 관련하여 호이스팅(Hoisting)이란 무엇인지까지 함께 알아보자. 만약 npm이나 package.json, package-lock.json 파일에 대한 기본적인 이해가 없다면 아래 포스팅을 먼저 읽고 오기를 권장한다. [JavaScript] Node.js와 npm(+ npx)의 개념 1..

우리는 외부 JavaScript 파일을 로드하여 사용할 때 태그를 사용한다. 그런데 태그에는 해당 JavaScript 파일의 로드 및 실행 시점에 영향을 주는 특별한 옵션(어트리뷰트)이 두 가지 있다. 바로 async와 defer이다. 길게 설명하면 끝도 없지만, 웹 개발자로서 기본적으로 알고 있어야 하는 핵심적인 골자 정도는 이번 기회에 정리하고 넘어가자. 1. 기본적인 태그의 동작 기본적으로 브라우저는 HTML을 파싱하면서 DOM을 생성한다. 그런데 그러는 도중에 태그를 만나면, 해당 JavaScript 파일을 로드하고 실행을 완료할 때까지 원래 하고 있던 HTML 파싱 및 DOM 생성 작업은 잠시 중단한다. 그림으로 보면 다음과 같다. 그런데 이와 같은 기본 동작은 다음과 같은 문제점들을 내포하고 ..

Express는 Node.js 환경의 백 엔드 프레임워크이다. 즉, JavaScript로 구현하는 서버인 것이다. 마치 Django가 Python으로 구현하는 서버인 것과 마찬가지이다. 원래 필자는 Django 프레임워크에 가장 익숙한 개발자인데, 다른 백 엔드 프레임워크도 한 번 경험해보고 싶어서 공식 문서를 읽으며 나름대로 공부를 해보았다. 그런데 Express는 정말 최소한의 기능만을 직관적으로 제공하고 있다는 느낌을 받았고, 몇 가지 핵심적인 개념만을 알면 금방 익힐 수 있겠다는 생각이 들었다. 그래서 이번 포스팅을 통해 그 핵심적인 개념을 정리해보려 한다. 1. Express 시작하기 Express의 핵심 개념을 본격적으로 알아보기 전에, 간단한 Express의 사용 방법 및 예시부터 살펴보자...

Node.js 프로젝트(React, Next.js 등)에서 개발을 진행하다 보면 예쁜 코드에 대한 욕심이 생기기 마련이다. 여기서 말하는 '예쁜 코드'란 문법적으로 올바른 코드를 의미할 뿐 아니라 일관된 컨벤션으로 작성된 코드를 의미하기도 한다. 그리고 이렇게 코드를 예쁘게 만드는 툴들은 똑똑한 사람들이 이미 만들어 놨는데, 가장 유명한 것이 바로 ESLint와 Prettier이다. 이 둘의 차이점을 간단하게 설명하면, ESLint는 코드 문법 검사 및 코드 포맷팅을 수행하는 툴이고, Prettier는 코드 포맷팅만을 집중적으로 수행하는 툴이다. 일반적으로 ESLint와 Prettier를 함께 사용하는 경우가 많다. 그러나 이때 주의가 필요하다. 왜냐하면 ESLint도 코드 포맷팅을 수행해서 Pretti..

이번 포스팅에서는 JavaScript의 실행 맥락(Execution Context)에 대해서 알아볼 것이다. 이는 JavaScript로 작성된 코드가 어떠한 원리로 실행되는 것인지 이해함에 있어 매우 중요한 개념이다. 그리고 본 포스팅의 제목에서도 밝혔듯이, 실행 맥락의 개념을 제대로 이해한다면 클로저와 호이스팅의 원리도 덤으로 이해할 수 있게 된다. 물론 클로저와 호이스팅의 기본 개념은 알고 있다는 전제 하에 말이다. 그럼 한 번 시작해보자. 1. 실행 맥락 (Execution Context, EC) JavaScript에서 실행 맥락(Execution Context, EC)이란 특정 코드를 실행하기 위해 필요한 환경, 혹은 그 환경을 나타내는 객체를 뜻한다. 여기서 실행의 대상이 되는 코드는 크게 두 ..

지금까지 Python과 JavaScript를 이용한 풀 스택 개발 업무를 진행하면서, Python에서 날짜나 시각을 다루는 일은 꽤 자주 있었지만 의외로 JavaScript에서 날짜나 시각을 다루는 일은 많이 없었던 것 같다. 그래서인지 JavaScript에서 날짜나 시각을 다루는 일에는 상대적으로 미숙했다. 그래서 이번 포스팅을 통해 JavaScript가 제공하는 날짜 및 시각 관련 API를 깔끔하게 정리하고 익혀두기로 하였다. 1. Date : JavaScript의 날짜 및 시각 관련 API Date는 JavaScript에서 날짜 및 시각을 나타내는 객체를 생성하기 위한 생성자 함수의 이름이자, 그러한 객체의 타입을 일컫는다. JavaScript에서는 이를 통해 날짜 및 시각 관련 API를 제공하고 ..

JavaScript는 총 6개의 원시 타입(number, string, boolean, null, undefined, symbol)과 1개의 객체 타입(object)을 가지고 있다. 이번 포스팅에서 다룰 심볼(symbol) 타입도 6개의 원시 타입 중 하나로, ES6 버전의 JavaScript에서 새롭게 추가되었다. 결론부터 얘기하자면, 일반적으로 심볼 타입은 객체의 프로퍼티 키를 고유하게 설정함으로써 프로퍼티 키의 충돌을 방지하기 위해 사용된다. 다른 타입에 비해 흔하게 사용되는 타입은 아니지만, JavaScript에는 심볼 타입에 대한 이해가 전제되어야 이해하고 사용할 수 있는 몇몇 문법(EX. iterable 객체)들도 있기 때문에 공부해두는 것이 좋다. 1. 심볼의 생성 및 활용 심볼은 Symbo..

많은 프로그래밍 언어에서 그렇듯, JavaScript에도 iterable 객체와 iterator 객체의 개념이 존재한다. 여기서 iterable 객체란 반복 가능한 객체(for ... of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체)를 의미하며, iterator 객체란 해당 iterable 객체에서 각 요소를 반복하기 위해 사용하는 객체를 의미한다. 일반적으로 [1, 2, 3]과 같이 사용하는 배열 객체가 대표적인 iterable 객체이다. 그리고 여기에 추가로 JavaScript는 유사 배열 객체(Array-like object)라는 개념도 정의하고 있는데, 이는 배열은 아니지만 배열과 유사한 객체를 의미한다. 그렇다면 iterable 객체, iterator 객체, 유사 배열 객체가 정확히 ..

ES8(= ES2017) 이전 버전의 JavaScript에서는 비동기 프로그래밍을 위해 콜백 함수나 Promise 문법을 사용하곤 했다. 특히 ES6(= ES2015) 버전의 JavaScript에서 등장한 Promise 문법은 기존에 사용하던 콜백 함수의 한계점들을 많이 해결하였다. 그러나 콜백 함수 기반의 비동기 프로그래밍에 익숙하지 않은 사람들에게 Promise 문법은 여전히 낯설 수밖에 없었다. 결국 Promise 문법도 콜백 함수 기반이었기 때문이다. 그러다가 ES8(= ES2017) 버전의 JavaScript가 등장하면서부터 비동기 프로그래밍을 위한 새로운 문법이 등장했다. 바로 async, await 문법이다. 이 문법은 기존에 사용하던 콜백 함수나 Promise 문법에 비해 동기 프로그래밍과..