JavaScript

npm 배포 가이드 및 후일담 (feat. colorpia)

1. 배경 1.1. 오픈소스에 대한 느낌 옛날부터 JavaScript를 이용한 개발을 해오면서, 오픈소스 개발 경험 한 개쯤은 가져보고 싶다는 생각이 들었다. 학교에서 배운 '오픈소스 정신'의 철학을 실천해보고 싶다는 이유도 있었고, JavaScript 개발 특성상 오픈소스와 많이 접할 수밖에 없는 환경에 놓였기 때문에 아무래도 오픈소스가 낯설지 않았다. 아래 사진을 보자. 각 언어별로 얼마나 많은 라이브러리 패키지를 소유하고 있는지를 나타낸 그래프이다. JavaScript(Node.js)가 압도적인 수치를 보이고 있음을 확인할 수 있다. 즉 엄청난 지조와 절개를 지키며 生 vanilla JavaScript 코드로 하나부터 열까지 모든 코드를 직접 짜지 않는 이상, 우리는 필연적으로 오픈소스 코드와 접하..

클로저 (Closure)

1. 정의 mdn에서는 클로저를 다음과 같이 소개한다. (바로 이해하기 힘든 정의이긴 하다) A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). -클로저는 주위 상태의 참조와 함께 묶인 함수의 조합이다- 이해를 돕기 위해, 쉽게 설명한 클로저의 정의는 다음과 같다. 외부 함수보다 중첩 함수가 더 오래 살아남았을 때, 이미 생명 주기가 다한 외부함수의 요소를 중첩함수가 참조하고 있다면, 이 중첩 함수를 '클로저'라 한다. 2. 예시 2.1. 클로저 요건을 만족하는 경우 foo는 외부함수, bar는 중첩함수 관계로..

실행 컨텍스트 (Execution Context)

1. 개념 실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하고, 코드의 실행결과를 관리하는 영역이다. 즉 식별자를 등록하고 관리하는 스코프와, 코드 실행 순서를 구현한 내부 메커니즘이다. 상당히 추상적으로 와닿기 때문에, 정확히 무엇을 의미하고 어떻게 구성되는지 파악해보자. 2. JavaScript 코드의 실행 과정 JavaScript는 소스 코드를 두 개의 과정으로 나누어 처리한다. 소스 코드 평가 소스 코드 실행 소스 코드 평가 execution context(실행 컨텍스트)를 생성한다. 소스 코드의 변수 및 함수 선언문을 먼저 실행하여 execution context 내의 environment record(환경 레코드)에 등록한다. 결과적으로 소스 코드가 실행되기 전에 변수 및 함수 선언문의 ..

var, let, const, 호이스팅, TDZ

1. 개요 var, let, const는 JavaScript에서 변수를 선언할 때 사용하는 키워드이다. ES5 이전까지는 var만 쓰였으나, ES6 버전에 let과 const가 새롭게 추가되었다. 2. 미리 알아두어야 하는 개념 2.1. 선언과 초기화 우선 선언과 초기화에 대한 개념을 살펴볼 필요성이 있다. 선언은 변수나 함수를 프로그램에서 사용할 수 있도록 이름을 등록하는 과정을 의미하며, 초기화는 변수가 생성된 이후에 처음으로 값을 대입하는 과정을 의미한다. 2.2. 호이스팅(Hoisting) JavaScript의 엔진은 코드를 실행시키기 전, 코드의 정보를 미리 저장해 놓는다. 따라서 코드가 실행되기 전에 변수, 함수, 클래스, import 등의 정보가 수집된다. 이런 특성 덕택에 JavaScrip..

프로토타입(Prototype)

1. 프로토타입을 사용하는 이유 프로그래밍 언어에서 사용하는 프로토타입이라는 용어는 ‘프로토타입 패턴’에서 비롯되었다. 프로토타입 패턴은 새로운 객체를 생성하는데 비용(리소스)이 너무 클 때 사용하는 패턴인데, 객체를 쉽게 만들기 위해 원본 객체(프로토타입)을 복제하여 새로운 객체를 만든다. JavaScript에서도 객체를 생성할 때 위와 같은 방식을 이용한다. 즉 원본 객체를 복제하여 새로운 객체를 만든다. 2. JavaScript에서 프로토타입 객체의 역할 JavaScript에서 프로토타입은 객체의 유전자 역할을 한다. (프로토타입을 복제하여 새로운 객체를 만들었으니, 유전자를 물려받은 것과 일맥상통하다) 특정 객체가 생성되었을 때, 그 객체는 부모나 조상이 가지고 있는 속성을 참조하거나 사용할 수 ..

옵셔널 체이닝(Optional Chaining)

1. 개념 ES2020에 등장한 JavaScript의 문법으로, 객체의 속성에 접근할 때 객체가 유효하지 않으면(null 혹은 undefined) undefined를 반환하고, 그렇지 않을 경우 속성 값을 반환한다. 2. 예시 접근하고자 하는 대상이 유효하지 않은 상황에서 속성에 접근할 경우 에러가 발생하는데, 이때 옵셔널 체이닝을 사용할 경우 에러를 피할 수 있다. 이를 통해 에러 없는 프로그램을 만들 수 있게 된다. 변수가 특정 속성을 가지고 있는지의 여부가 확정적이지 않을 때(주로 비동기 작업에서 일어난다) 사용하면 좋은 문법이다. 아래 코드를 보면 obj 변수에 null이 담겼다. null에는 value라는 속성이 없으므로 접근할 때 에러가 발생한다. const obj = null; const v..

단축평가(Shortcut Evaluation)

1. 기본 개념 기본적인 논리연산의 규칙을 적어두었다. true && true // true true && false // false true || true // true true || false // false false && false // false false || false // false 2. 논리 연산자를 이용한 단축평가 2.1. && (논리곱) 'Jack' && 'Jill' // 'Jill' JavaScript에서 비어있지 않은 문자열은 truthy한 값으로 평가된다. 위 코드에서 'Jack'은 truthy한 값이기 때문에, 연산결과는 두 번째 값에 달려있게 된다. (즉 두 번째 항의 값이 논리곱의 평가결과를 결정한다) 따라서, 논리연산의 결과를 결정하는 두 번째 값을 그대로 반환한다. co..

module _ 모듈

JS의 탄생배경을 살펴보면, html 문서에 움직임 및 상호작용을 표현하기 위한 수단으로 등장한 언어이기 때문에, 다른 언어에 비해서 부족한 점이 많은 채 태어난 언어라고 볼 수 있다. (애초에 브랜든 아이크가 10일만에 설계한 언어였기도 하고) JS를 배울 때 모듈의 개념을 반드시 익혀야 하는 원인 중 하나는, 태초에 JS는 모듈을 지원하지 않는 언어이기 때문에 그렇다. 일단 모듈이 무엇인지 파악한다음, JS가 모듈을 지원하기 위해 어떤 역사를 거쳤는지 살펴보자. 모듈이란 재사용이 가능한 코드 묶음을 의미한다. 코딩과 관련하여 유명한 명언 중 하나가 "바퀴를 다시 발명하지 마라" 가 있다. 이미 잘 되는게 기존에 있다면, 굳이 새로 만들지 말고, 기존의 좋은 것을 가져다 활용하면 좋다고 이해하면 될 것..

clientXY, offsetXY, pageXY, screenXY _ 이벤트 리스너 1

html 개체에 이벤트 리스너를 장착할 때, 경우에 따라 이밴트가 발생한 위치를 파악해야 할 때가 있다. (클릭한 위치의 좌표, 혹은 마우스 커서가 위치한 곳의 좌표 등등) 이벤트 객체가 포함하는 좌표 값은 여러 종류가 있는데 각각 어떤 특징이 있는지 알아보도록 하자. clientXY '현재 보이는 브라우저 화면'을 기준으로 x, y 좌표를 나타낸다. '브라우저 화면 기준' 좌표 값이기 때문에 마우스 커서의 위치를 바꾸지 않고 스크롤을 해도 값은 변하지 않는다. pageXY '문서(document)를 기준'으로 x, y 좌표를 나타낸다. 따라서 마우스 커서의 위치를 바꾸지 않더라도, 스크롤을 한다면 마우스 커서가 가리키는 문서의 위치가 달라지기 때문에 값이 변한다. offsetXY '이벤트가 발생한 해당..

유사 배열 객체 _ array-like object

배열과 똑같아보이지만 사실 객체인 것을 의미한다 1. 특징 그렇다면 유사 배열 객체가 가진 특징은 무엇일까? 일단 배열이 아니기 때문에 배열이 가지고 있는 매서드 (map, forEach, filter, reduce...) 를 사용할 수 없다. 또한 형태를 살펴보면 인덱스 값과 length 속성을 가진다. 그렇다면 유사 배열 객체는 어떻게 접할 수 있을까? 가장 쉽게 찾을 수 있는 방법은 바로 함수의 arguments를 확인하는 것이다. 다음과 같이 코드를 작성해보았다. function f() { console.log(arguments); // Arguments [123, callee: ƒ, Symbol(Symbol.iterator): ƒ] console.log(Array.isArray(arguments..