Side Effect

1. 정의 1.1. 일반적 정의 함수 내의 어떤 부분이 외부에 영향을 미치거나 영향을 받을 때, side effect(부수 효과)가 있다고 일컫는다. side effect가 없는 함수를 pure function(순수 함수)라 부르며, 그렇지 않은 함수를 비순수 함수라 부른다. 즉 순수 함수가 되기 위해서는 함수 실행에 의해 함수 외부의 요소를 변화시켜서는 안 되며, 인자로 들어온 값을 제외한 외부 요인에 의해 함수의 실행결과가 달라져서도 안 된다. 다시 말해 동일한 input이 주어졌을 때, 동일한 output의 결과를 내야 하며, 외부 요인에 영향을 받거나 미치지 않아야 순수 함수의 조건을 만족시킨다. 다음은 side effect가 있는 함수의 예시이다. let name = 'YU'; const nPu..

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(환경 레코드)에 등록한다. 결과적으로 소스 코드가 실행되기 전에 변수 및 함수 선언문의 ..

DNS, DNS 레코드

1. 개념 1.1. DNS란? DNS는 Domain Name System의 줄임말이다. 1.2. Domain Name Domain Name(도메인 네임)은 서버의 주소를 나타내는 고유한 문자열을 의미한다. google.com, naver.com, daum.net 같은 문자열이 대표적이다. 브라우저를 통해 google.com에 접속하는 것은 사실 구글 서버에 접속하는 것과 같다. 특정 서버에 접속하기 위해서는 서버의 ip주소를 이용해야 되는데, 단순한 숫자의 나열보다는 문자열을 이용하는 것이 사람 입장에서 기억하기도 쉽고 사용하기도 편리하기 때문에 ip주소를 문자열로 치환하는 과정이 등장하게 되었다. 즉 웹 브라우저에서 142.250.76.142를 굳이 입력하지 않아도, google.com 입력을 통해 g..

enum과 tree shaking

1. 개요 TypeScript에서 enum은 tree shaking이 되지 않는다는 이슈가 있었다. 이것이 정확히 어떤 것인지 살펴보도록 하자. 2. 미리 알아두어야 하는 개념 2.1. Bundling (번들링) 여러 개의 코드를 하나로 묶고 압축까지 하는 과정을 의미한다. 한 개의 웹 프로젝트를 제작하기 위해서는 여러 개의 JavaScript 파일을 작성하기 마련인데, 프로젝트를 배포할 때 클라이언트에게 여러 개의 JavaScript 파일을 제공하는 것은 매우 비효율적이다. 따라서 작성한 코드를 한데 묶어 전송하는 것이 바람직하다. 또한 옛날과는 다르게 모던 웹 개발에서는 JavaScript 파일 내에 html 요소도 넣고 있으며(Ex. JSX), CSS도 포함시키고 있다(CSS in JS). 따라서 ..

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

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

웹 폰트 표시에 대해 (font-display)

1. 웹 폰트에서 발생할 수 있는 문제 특정 웹 페이지에 들어갔을 때, 페이지의 글자가 늦게 뜨거나 글꼴이 갑자기 변하는 경우를 경험할 수 있었다. 대표적인 경우가 내 개인 프로젝트였다. 이처럼 개발자의 의도대로 글자가 제대로 표현되지 않는 이유는, 웹 페이지에 적용할 폰트가 완전히 로드되지 않았기 때문이다. 참고로 위의 페이지에서는 'Neo 둥근모꼴' 웹 폰트를 적용하였다. 웹 폰트 표시에 관한 이슈는 아래의 경우에서도 볼 수 있다. 2016년 미국의 상원 의원인 Mitt Romney에 관한 기사에서, 웹 폰트가 로드되기 전과 로드된 이후의 화면을 비교한 사진이다. 단순한 강조를 위해 Not에 웹 폰트를 적용하였지만, 제대로 로드되지 않아 Not이 보이지 않게 되었고, 그 결과 기사의 제목은 완전히 다..

Globs

1. 소개 매턴 매칭 문법이다. 정규표현식을 떠올리면 쉽다. 다만 정규표현식은 다양한 용도에서 범용적으로 사용할 수 있지만, Globs는 주로 파일 시스템 검색 용도로 사용한다. 또한 둘 사이에 적용되는 문법도 약간 차이가 있다. 2. 기호 2.1. ? 정확히 한 글자와 매칭된다. (정규표현식에서 가장 비슷한 역할은 . 기호이다) 예를 들어 a? 라면 aa, ab, ac, ad 등등의 문자열과 매칭된다. 이때 ?는 한 글자와 매칭되기 때문에 a?는 abb acc add와는 매칭되지 않는다. 연속으로도 사용할 수 있다. 예를 들어 e?? 라면 egg, ear, era, ego, end 등등이 매칭된다. 결과적으로 다음과 같다. # 패턴 src/e??.txt # 매칭되는 경우 src/egg.txt, src/..

TypeScript 도입을 위한 tsconfig.json

1. 배경 약 1년 전에 작성했던 JavaScript 코드를 리뉴얼 하는 과정에서 새롭게 TypeScript를 도입하기로 하였다. TypeScript를 도입할 경우, 변수 및 함수에 타입추론을 할 수 있기 때문에 타입에 맞는 메서드를 에디터에 의해 제안받을 수 있어 편리하며, 잘못된 타입을 사용했을 경우 경고가 뜨기 때문에 실수에서 비롯한 버그를 미연에 방지할 수 있기 때문이다. 지금 생각해 보면 타입을 헷갈려 올바르지 않은 내장 메서드를 사용했거나, 혹은 변수명을 잘못 지어 발생한 버그를 해결하는데 많은 시간을 보낸 것을 생각하면 충분히 도입할만한 가치가 있다고 생각하였다. 2. 방법 아래의 명령을 입력하여 기본적인 환경을 도입한다. npm i -D typescript npx tsc --init tsc..