자바스크립트/개념

History API 란? (간단 정리)

History API 란? History 인터페이스는 브라우저의 세션 기록, 현재 페이지를 불러온 탭 혹은 프레임의 방문기록을 조작할 수 있는 방법을 제공한다. 브라우저에서 뒤로가기와 같은 액션을 수행했을 때 방문하는 페이지를 조작하는 것이다. history 는 싱글톤 인스턴스로 글로벌에 1개만 존재한다. 인스턴스 프로퍼티 History 인터페이스는 어떤 속성도 상속하지 않는다. length: 세션 기록에 몇개의 페이지가 있는지의 길이이다. scrollRestoration: 해당 세션으로 갔을 때 스크롤까지 복원할지를 설정한다. auto 혹은 manual 이 있다. state: 히스토리 스택의 맨 위에 있는 상태를 나타내는 값을 반환한다. pushState() 혹은 replaceState() 를 사용할 ..

이벤트 루프는 어떻게 non-blocking 연산을 막힘없이 처리하는가?

자바스크립트 이벤트 루프 파헤치기 이를 이해하기 위해서는 자바스크립트 런타임 환경에서의 추가적인 컴포넌트의 역할을 알아야 한다. 추가적인 컴포넌트란 Web APIs (브라우저에서) 나 C++ APIs (Node.js) 를 말하며 이를 알아야 한다. 자바스크립트 런타임 환경 컴포넌트 4가지 Heap: 메모리 할당이 이루어지는 곳 Stack: 스택 프레임 (함수 호출) 이 저장되고 관리되는 곳 Task Queue: 비동기 작업의 콜백이 여기에 대기함 Event Loop: 호출 스택과 작업의 대기열을 확인하는 오케스트레이터 Non-Blocking I/O 는 어떻게 동작하는가? 비동기 호출: HTTP 요청, 타이머, Node.js 의 파일 I/O 와 같은 비동기 함수가 호출되면 Javascript 는 이 작업을..

자바스크립트의 싱글 스레드 모델과 이벤트 루프

싱글 쓰레드 모델과 Event Loop 논블로킹과 Event Loop 에 대한 간단한 설명 Blocking 요청과 Non-Blocking 요청에 대한 처리가 다름 Non-Blocking 요청이 들어왔을 때는 이벤트 루프에 담아서 처리함 Blocking 요청일 때는 워커 스레드에게 맡김 자바스크립트의 싱글 스레드 모델 작동 방식 싱글 스레드: 한 번에 하나의 연산을 단일 시퀀스로 처리함 실행 컨텍스트: 자바스크립트 코드가 실행되면, "실행 컨텍스트 (Execution Context)" 에서 실행함. 실행 컨텍스트는 코드가 실행되는 순서를 처리함. 호출 스택 (Call Stack): 실행 컨텍스트 관리를 위해 콜스택을 사용함. 콜스택은 프로그램에서 현재 위치를 기록하는 데이터 구조로 사용됨. 가장 최근에 호..

자바스크립트에서 머신 코드 대신 바이트 코드를 사용하는 이유

V8 Engine 이 Machine Code 대신 Byte Code 를 사용한 이유 이식성 (Portability) 바이트 코드는 머신 코드보다 이식성이 뛰어남 머신 코드는 프로세스 아키텍처에 따라 다르므로 CPU 마다 다를 수 있음 바이트 코드는 호환되는 모든 머신이 있는 모든 머신에서 실행 가능 JS 를 다양한 기기와 운영체제에서 실행할 수 있게 해줌 보안 머신 코드보다 바이트 코드로 먼저 컴파일하면 추상화 계층이 늘어나 보안이 강화될 수 있음 머신별 취약점을 악용하기 어려워짐 최적화 기회 (Optimization Opportunities) 바이트 코드로 컴파일한 다음 실행하며 핫 경로(자주 실행되는 코드)를 최적화하여 머신 코드로 컴파일하는 JIT 이라는 기술을 사용함 JIT 을 통해 V8 은 정적..

innerHTML vs innerAdajcentHTML() 비교

innerHTML vs innerAdajcentHTML() 비교 둘 다 HTML 내용을 다룰 때 쓰이는 가장 일반적인 방법 중 하나이다. innerHTML 은 프로퍼티의 형태로 쓰이고 innerAdjacentHTML() 은 메서드의 형태로 쓰인다. innerHTML 프로퍼티 HTML 의 getter 혹은 setter 의 역할을 하는 인터페이스이다. 내용을 가져올 수도 있고 내용을 삽입할 수도 있다. 장점 직관적이고 사용하기 쉽다. 내부 내용 전체를 대체해야 할 때 유용하다. 단점 엘리먼트 내부 전체 내용을 지웠다가 새로 렌더링 해야 하는 만큼 비용이 크다. 사용자가 작성한 내용을 innerHTML 로 더해주는 코드가 있다면 XSS 공격에 취약해진다. innerAdjacentHTML() 메서드 전달된 텍스..

자바스크립트 이벤트(Event) 객체와 커스텀 이벤트 (Custom Event) 란?

자바스크립트 이벤트(Event) 객체와 커스텀 이벤트(Custom Event) 란? 자바스크립트는 브라우저에서 이벤트 콜백을 통해 화면(DOM)과 함께 상호작용 하는 일이 잦다. 흔히 사용되는 이벤트로 클릭, 마우스 움직임, 키 입력, 양식 제출 등이 있다. 기본 이벤트 중 필요한 이벤트가 없거나 특수한 이벤트를 만들고 싶을 때 커스텀 이벤트(Custom Event) 를 만들 수 있다. 이를테면 동영상 플랫폼에서는 동영상을 재생하는 이벤트나 일시정지하는 이벤트 등을 만들 수 있다. MDN Event 공식문서의 Interfaces based on Event 항목 을 보면, 자바스크립트 이벤트를 기반으로 한 인터페이스가 아주 많다. 원하는 이벤트가 있는지 먼저 찾아보면 된다. 커스텀 이벤트 사용 방법 이벤트..

자바스크립트가 문자열을 표현하는 방식 (feat.UTF-16)

자바스크립트의 문자열 표현 방식 UTF-16 자바스크립트 문자열은 유효하지 않은 대리쌍을 허용하는 일련의 UTF-16 코드 유닛이다. 위의 글을 읽었는데 어떤 의미인지 이해했다면, 더이상 아래의 글을 읽을 필요가 없다. UTF-16 이란? 자바스크립트 문자열의 표현 방식이다. 흔히 볼 수 있는 문자열 인코딩 방식이다. UTF-8 이 더 많이 쓰이긴 한다. 우리가 사용하는 문자를 비트 (bits) 로 나타낸 것이다. 16비트 코드 유닛 1개 혹은 2개로 문자를 표현한다. 1개로 표현되는 경우를 Basic Multilingual Plane 내부에 있다고 한다. 2개로 표현되는 경우를 Basic Multilingual Plane 외부에 있다고 한다. Basic Multilingual Plane (BMP) Ba..

script 태그의 defer 키워드와 async 키워드 쉽게 알아보기

defer, async 스크립트란? script 태그에 추가될 수 있는 속성이다. HTML 코드를 보면, 혹은 와 같은 구문을 볼 수 있다. 역사를 알면, 이러한 속성 값들이 왜 생겼는지 알 수 있다. 역사를 살펴보며 천천히 배워보자. script 태그의 특징 초기의 브라우저 자바스크립트는 아주 짧고 간단한 스크립트 코드를 넣기 위해 존재했다. 그런데 동적인 웹의 발달로 자바스크립트 코드는 아주 길게 변했다. 브라우저는 DOM 을 생성하다가도 script 태그를 만나면, script 태그의 내용부터 해석하는 방식으로 동작했다. script 태그의 특징 때문에 생긴 문제 초기에 의도한대로 head 태그에 자바스크립트 코드를 몰아넣으니 DOM 을 생성하기도 전에 자바스크립트를 해석하느라 페이지 로딩 속도가 ..

매크로 태스크 (Macro Task) 와 마이크로 태스크 (Micro Task) 란?

마이크로 태스크 (Micro Task) 와 매크로 태스크 (Macro Task) 자바스크립트에서 비동기 작업에 대해 공부하다 보면, 마이크로 태스크 (Micro Task) 와 매크로 태스크 (Macro Task) 라는 용어가 나온다. 둘 다 즉시 실행되지 않고 일단 대기 후에 실행되는 비동기 작업이라는 공통점이 있지만 둘은 다르게 처리된다. 마이크로 태스크 (Micro Task) 란? 현재 수행 중인 작업이 끝난 뒤에 이어서 실행될 작업 (콜백) 을 말한다. 프로미스 핸들러에서 볼 수 있는 then(), catch(), finally() 와 같은 예시가 있다. Node.js 에서 process.nextTick() 과 같은 메서드가 있다. nextTick() 에서 tick 은 이벤트 루프를 한 번 반복하는..

자바스크립트의 실행 컨텍스트 (Execution Context) 란?

실행 컨텍스트란? 함수 실행 내에서 환경을 가리키는 추상적인 개념이다. 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 실행 컨텍스트의 생성 시점 실행 컨텍스트는 일반적으로 매 함수 호출 시에 생성된다. 함수 호출만큼 자주 일어나진 않지만, 함수 호출 외에도 전역 공간, eval() 함수 실행에도 실행 컨텍스트가 구성된다. 화살표 함수의 실행 컨텍스트 화살표 함수도 일반 함수처럼 실행 컨텍스트가 생긴다. 단, 화살표 함수의 this 는 lexically scoped 된다. 그래서 화살표 함수는 어떻게 호출되냐보다 어떤 블럭에서 정의되었냐가 중요하다. 실행 컨텍스트가 하는 일 호이스팅을 수행한다. this 의 값을 결정한다. 현재의 스코프에서 어떤 변수에 접근할 수 있는지를 결정한다. 인자(argu..

Lexical Scope (렉시컬 스코프) 란? (자바스크립트의 스코핑 방식)

개요 자바스크립트에서는 렉시컬 스코프(Lexcial Scope) 라는 스코핑 방식을 이용한다. 이는 굉장히 낯설은 영단어로 처음 스코프 개념을 접하는 프로그래밍 초보자들에게 많은 혼란을 준다. Lexical Scope 란? Lexical Scope 란 한글로 번역하면 어휘적 스코프이다. 어휘적 스코프라는 말을 들었을 때 이 스코핑 방식에 대해 이해한다면, 당신은 프로그래밍 고인물일 확률이 높다. Lexical Scope 는 Static Scope (정적 스코프) 라고도 불리운다. 정적 스코프라고 불리우는 이유는 스코프가 컴파일 타임에 결정되고 변하지 않기 때문이다. 런타임에 스코핑을 지원하는 Dynamic Scope 와 다른 방식의 스코프이다. 왜 이름이 Lexical Scope 인가? Lexical S..

이터러블 스프레드 문법이란?

이터러블 스프레드 문법이란? 함수를 호출하거나 배열을 생성할 때, 결괏값을 이산값으로 분산하여 이터러블을 소비하는 방법이다. 속성 스프레드 문법 과 같이 ... 기호를 사용하지만, 다르다. 속성 스프레드 문법은 객체 내부에서만 유효하다. 이터러블 스프레드 문법은 iterable 객체 앞에서만 유효하다. 이터러블 스프레드 문법이 유효한 곳 함수의 인자 괄호 내부 배열 리터럴 내부 예제 1: 함수의 인자에서 사용 이터러블 스프레드 문법을 함수의 인자에서 사용할 수 있다. 이터러블 스프레드 문법 적용 전 Math.min(1, 2, 3, 4, 5, 6, 7, 8, 9, 0); Math.min() 은 원래 위처럼 인자를 하나씩 넣어주어야 한다. 배열에 저 모든 숫자가 들어있다면, 인자를 넣기가 쉽지 않다. con..