[Javascript] 알쓸신잡(알아두면 쓸모있는 신기한 잡아스크립트) - 2

다양한 자바스크립트 서적과 글을 보고 다양한 문제를 직면하면서 생소하게 느낀 부분들을 정리해논 글 입니다. (목차를 보고 관심있는 부부만 읽어도 좋습니다.)

단순히 제 주관으로 판단하고 작성하는 글이기 때문에 가이드가 될 수는 없으니 주의해주시면 감사하겠습니다 🌟

 

 

1. 스코프(Scope)

스코프는 컨텍스트는 값과 "표현식"이 "표현"되거나 참조 될 수 있는 현재 실행되는 컨텍스트를 의미합니다. 만약 변수 또는 표현식이 "해당 스코프"내에 있지 않다면, 사용할 수 없습니다. 

// 불가능한 케이스
function exampleFunction() {
  const x = "declared inside function"; // 변수 x는 안에서만 사용 가능합니다.
  console.log("Inside function");
  console.log(x);
}

console.log(x); // 스코프가 달라 접근 불가

// 가능한 케이스
const x = "declared outside function";

exampleFunction();

function exampleFunction() {
  console.log("Inside function");
  console.log(x);
}

console.log("Outside function");
console.log(x); // 같은 최상위 스코프이므로 접근 가능

 

 

2. 렉시컬 스코프(Lexical Scope)

렉시컬 스코프는 함수를 어디에 선언하였는지에 따라 상위 스코프가 결정되는 것을 말합니다.
자바스크립트를 포함한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따르며, 이를 정적 스코프(Static Scope)라고 부르기도 합니다.

// 예제 1
var x = 1;

function bar() {
	console.log(x);
}

// bar메서드가 외부의 var x와 스코프가 같기 때문에 foo안에서 bar를 호출하더라도 렉시컬 스코프로 인하여 외부 x가 호출됩니다.
function foo() {
	var x = 10;
	bar();
}

foo(); // 1
bar(); // 1


// 예제 2
var y = 2;

// fooy가 bary 내부에 선언되어 있기 때문에 bary가 외부에서 호출되더라도 fooy는 bary 내부의 y를 호출하게 됩니다.
function bary() {
  var y = 20;
  
  function fooy() {
  	console.log(y);
  }
  fooy();
}

bary();

예제 2번은 다음의 클로저 개념과 연결되기 때문에 같이 보시는 게 좋습니다.

동적 스코프(Dynamic Scope)
렉시컬 스코프와 다르게 함수를 어디서 호출하였는지에 따라 상위 스코프가 결정되는 것을 동적 스코프라고 합니다.
Bash Scripting, Common Lisp 등 일부 언어에서 동적 스코프를 따릅니다.

 

 

3. 클로저(Closure)

클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(렉시컬 스코프)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말합니다.

즉, 자신이 생성될 때의 환경(렉시컬 스코프)을 기억하는 함수입니다. 이 클로저는 다음과 같이 활용할 수 있습니다.

• 데이터 은닉
• 비동기 작업
• 모듈 패턴

자세한 내용은 아래 두 링크를 참고하시면 좋을 것 같습니다.

• 렉시컬 스코프와 클로저, 그리고 커링
• 클로저에 대해서 설명해주세요

 

 

4. 커링(Currying)

커링은 f(a, b, c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합되도록 변환하는 것입니다.

 

function curry(f) { // 커링 변환을 하는 curry(f) 함수
  return function(a) {
    return function(b) {
      return f(a, b);
    };
  };
}

// usage
function sum(a, b) {
  return a + b;
}

let curriedSum = curry(sum);

alert( curriedSum(1)(2) ); // 3
alert( curry(sum)(1)(2) ); // 이렇게 사용할 수도 있습니다.

커링을 이용해 log 함수를 편리하게 이용할 수 있고 다중 인수(매개변수)를 받을 수 있게 조금 복잡한 고급 커링을 이용할 수도 있는데, 자세한 내용은 아래 링크를 참고하시면 좋을 것 같습니다.

 

참고 링크

• 커링

 

 

5. 일급 객체, 일급 함수

일급 객체는 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 말합니다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 이 함수를 일급 객체라고 합니다. 이런 일급 객체인 함수를 일급 함수라고도 합니다.

더 자세한 예제를 확인하려면 아래 MDN 링크를 참고하시면 좋을 것 같습니다.

• 일급 함수

 

 

6. reflow와 repaint

reflow는 Dom의 구조가 변경되거나 레이아웃에 영향을 줄 수 있는 CSS(width, height, margin, padding 등..)가 변경되면 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 말합니다.

repaint는 레이아웃은 그대로이고, 색상이나 배경 등의 스타일만 변경되는 경우에 요소의 모양만 다시 그리는 과정을 말합니다.

즉, reflow는 레이아웃을 다시 계산하는 과정이고, repaint는 그 계산 결과를 화면에 다시 그리는 과정이라고 할 수 있습니다

 

reflow, repaint를 관리하여 성능 최적화 하는 방법 3가지

1. reflow를 유발하는 CSS 속성 사용을 최소화
2. transform과 opacity 속성만을 사용하여 CSS 애니메이션 최적화
3. willchange 속성 사용

최적화 관련한 더 자세한 내용은 아래 링크를 참고하시면 좋을 것 같습니다.

• reflow와 repaint의 차이점에 대해서 설명해주세요.

 

 

7. 실행 컨텍스트

실행 컨텍스트는 자바스크립트에서 코드가 실행되는 환경을 의미합니다. 자바스크립트 엔진이 코드를 실행할 때의 환경을 정의하고 관리하기 위해 존재하는 것이 실행 컨텍스트입니다.

• 전역 실행 컨텍스트 : 자바스크립트가 처음 실행될 때 생성되는 컨텍스트. 전역에 선언된 변수나 함수가 모두 포함
• 함수 실행 컨텍스트 : 함수가 호출될 때마다 실행되는 컨텍스트. 함수 컨텍스트 내에서 선언된 변수와 함수는 해당 함수 내에서만 유효

실행 컨텍스트의 구성 요소

• 변수 객체
• 스코프 체인
• this

세부 설명은 아래 링크 참고

• 실행 컨텍스트에 대해서 설명해주세요

 

 

8. 이벤트 루프(Event Loop)

자바스크립트의 이벤트 루프는 자바스크립트가 싱글 스레드 기반 언어임에도 불구하고 비동기 작업을 처리할 수 있게 해주는 중요한 메커니즘입니다. 이벤트 루프는 다음과 같은 구성으로 되어 있습니다.

출처 : https://inpa.tistory.com/entry/%F0%9F%94%84-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84-%EA%B5%AC%EC%A1%B0-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98_%EB%82%B4%EB%B6%80_%EA%B5%AC%EC%84%B1%EB%8F%84

• Call Stack : 자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조
• Heap : 동적으로 생성된 자바스크립트 객체가 저장되는 공간
• Web APIs : 브라우저에서 제공되는 API 모음으로 비동기적으로 실행되는 작업들을 전담하여 처리하고 다음과 같은 멀티 스레드 구성 요소를 가지고 있음 (Console API나 Canvas API는 Web API이지만 이벤트 루프의 Web APIs와 관련이 없고 Call Stack에서동기적으로 바로 실행됨)
  • Timer : setTimeout, setInterval같은 함수 처리 지정된 시간이 지나면 Macro Task Queue로 전달
  • XMLHttpRequest : 서버와 비동기적으로 데이터를 교환할 수 있는 객체(AJAX 기술의 핵심) 데이터가 준비되면 Micro Task Queue로 전달
  • DOM Event Handler : HTML 문서의 구조와 내용을 표현하고 조작. 이벤트 감지는 멀티스레드에서 이루어지지만, 이벤트 실행은 항상 메인 스레드에서 동작하여 동기적으로 작동함
  • Web Workers : 명시적으로 멀티 스레드를 활용하기 위해 Javascript에서 사용할 수 있는 기능(독립적인 실행 환경에서 스레드를 생성하여 작업 수행)
  • 파일 입출력 작업 : 브라우저나 Node.js 환경에서 비동기로 처리되며, 멀티 스레드로 동작
  • Geolocation API : 사용자 위치 데이터를 가져오기 위한 비동기적 Web API로 브라우저는 Geolocation 요청을 백그라운드에서 처리한 뒤, 결과를 Macro Task Queue로 전달
• Callback Queue : 비동기적 작업이 완료되면 실행되는 함수들이 대기하는 공간 (Call Stack이 비어있을 때 Micro, Macro 순으로 Queue에 있는 콜백 함수들을 Call Stack으로 옮기게 됨)
  • Macro Task Queue(= Task Queue) : setTimeout, setInterval, fetch, addEventListner와 같이 비동기로 처리되는 함수들의 콜백 함수가 들어가는 Queue
  • Micro Task Queue : promise.then, process,nextTick, MutationObserver와 같이 우선적으로 비동기로 처리되는 함수들의 콜백함수가 들어가는 Queue(우선순위 높음)
• Animation Frames Queue : 애니메이션 작업에 대한 처리를 담당함 requestAnimationFrame 메소드를 통해 콜백을 등록하면 브라우저가 repaint 직전에 해당 Queue에 있는 작업을 전부 처리
  • requestAnimationFrame을 이용한 최적화 관련 링크 :🌐 웹 애니메이션 최적화 requestAnimationFrame 가이드

예시 코드

console.log('Start!');

setTimeout(() => {
  console.log('Timeout!');
}, 0);

Promise.resolve('Promise!').then(res => console.log(res));

console.log('End!');

위 코드의 실행 순서는 다음과 같습니다.

1. Call Stack에 console.log('Start!'); 이 쌓인 뒤 출력
2. setTimeout 코드가 콜 스택에 적재되고 실행되면, 콜백 함수가 이벤트 루프에 의해 Web API로 옮겨지고 타이머 작동(0초라서 사실상 바로 종료)
3. 타이머가 종료 후 setTimeout 의 콜백 함수는 Macro Task Queue에 이벤트 루프에 의해 적재
4. Promise 코드가 Call Stack에 적재 되어 실행되고 then 핸들러의 콜백 함수가 이벤트 루프에 의해 MicroTask Queue에 적재
5. console.log('End!') 코드가 실행되고 출력
6. 메인 스레드의 모든 자바스크립트 코드가 실행되어 Call Stack이 비워지게 됨
7. 이벤트 루프가 이를 감지하여 Callback Queue(Macro/Micro Task Queue)에 남아있는 함수들을 Call Stack에 적재 (이 때, Micro Task Queue에 남아 있는 Callback을 우선적으로 처리)
8. Micro Task Queue에 있는 console.log(res); 출력
9. Macro Task Queue에 있는 console.log('Timeout!'); 출력

다음 사이트에서 코드를 작성하고 어떻게 이벤트 루프가 동작하는 지 볼 수 있으니 한 번 테스트해보시길 바랍니다.

• http://latentflip.com/loupe

이 외에도 다음 Article에 Node.js, Async/Await 동작 과정 등 다양한 내용들이 있으니 한 번 보시면 좋을 것 같습니다.

• 🔄 자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕

 

 

9. 인터넷 창에 www.google.com을 입력하면 무슨 일이 일어날까? 

사용자가 www.google.com을 주소창에 입력하면 브라우저는 아래와 같은 순서로 동작하게 됩니다.

1. DNS 조회 : 도메인 이름을 IP주소로 변환하는 작업. 캐시된 DNS 기록을 먼저 확인하고 없으면 로컬 DNS 서버에 요청하여 www.google.com에 해당하는 IP 주소를 얻습니다.
2. TCP 연결 수립 : IP 주소가 확인되면, 브라우저는 서버와 TCP연결을 수립합니다. 이 과정에서 브라우저는 다음과 같은 3-way-handshake를 수행합니다.
3. HTTP 요청 : TCP 연결이 수립되면, 브라우저는 HTTP 또는 HTTPS 요청을 보냅니다. 이 요청은 GET / HTTP / 1.1 같은 형식으로 웹페이지를 요청한은 메세지입니다. 이 과정에서 브라우저와 서버가 암호화된 연결을 설정하기 위해 보안 인증서를 교환하고 암호화 키를 협상합니다. (HTTPS를 사용할 경우 SSL/TLS 핸드셰이크도 수행됩니다.)
4. 서버의 응답 : 서버는 요청을 받아 해당 리소스(HTML, CSS ,JavaScript, 이미지 등)를 브라우저에게 응답으로 보냅니다. 이 응답은 HTTP 응답 코드(ex. 200 OK)와 함께 전달됩니다.
5. 브라우저 렌더링 파이프 라인 : 받은 리소스들을 바탕으로 브라우저 렌더링 파이프라인을 진행합니다. DOM과 CSSOM을 생성하고, 렌더 트리를 구성한 뒤, 레이아웃 페인트 단계를 통해 윕 페이지가 화면에 표시됩니다.

 

 

10. 브라우저 렌더링 파이프라인

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 5가지 과정을 브라우저 렌더링 파이프라인이라고 합니다. 

 

1. DOM(Document Object Model) 생성

1. 브라우저가 HTML 파일 받음
2. 파일을 Byte단위로 읽음
3. 브라우저의 HTML Parser가 바이트들을 문자로 변환
4. 문자들을 다시 HTML 토큰(태그, 텍스트, 속송 등을 의미) 으로 변환
5. 브라우저는 HTML 토큰 기반으로 DOM 트리 생성

2. CSSOM(CSS Object Model) 생성

1. 브라우저가 CSS 파일 Parser가 바이트들을 문자로 변환
2. CSS 규칙에 의하여 선택자(selector : 스타일을 적용할 HTML 요소)와 선언(declaration : 적용할 스타일)으로 나눔
3. CSS 규칙 기반으로 CSSOM 트리 생성

3. 렌더 트리(Render Tree) 생성

• 브라우저는 DOM과 CSSOM을 결합하여 렌더 트리를 생성
• 렌더 트리는 화면에 실제로 표시될 요소들로만 구성 (ex. display: none 속성이 있는 요소는 포함 X)
• 렌더 트리의 각 노드는 DOM 트리의 요소와 연결되며, CSSOM 트리에서 해당 요소에 적용된 스타일 정보를 포함

4. 레이아웃(Layout)

• 브라우저는 생성된 렌더 트리를 사용해 각 요소의 정확환 위치와 크기를 계산
• 뷰포트(viewport)와 같은 크기 정보에 의존 (ex. 화면 크기가 변경되면 브라우저는 레이아웃 과정을 다시 수행)
• 레이아웃 과정에서 노드의 크기와 위치를 다시 계산하는 것을 리플로우(reflow)라고 함 (리플로우는 성능에 영향을 줄 수 있으므로 최소화 하는 것이 중요)

5. 페인트(Paint)

• 브라우저는 각 요소를 실제로 화면에 그리는 작업을 시작
• 텍스트, 색상, 그림자, 이미지 등 모든 시각적 요소가 화면에 그려짐
• 페인트 과정에서 각 요소를 화면에 다시 그리는 작업을 리페인트(repaint)라고 함 (리페인트도 마찬가지로 성능에 영향을 줄 수 있으므로 최소화 하는 것이 중요)

6. 합성(Compositing)

• 브라우저는 화면에 그려질 요소들을 각각의 레이어(layer)로 분리하고, 이 레이어들을 결합하여 최종 화면을 구성
• transform과 opacity와 같은 속성은 레이아웃이나 페인트 과정을 거치지 않고, 합성 단계에서만 처리되기 때문에 애니메이션은 더 부드럽고 빠르게 실행될 수 있음
• 합성 과정에서는 GPU를 활용하여 각 레이어를 빠르게 합성하지만, 메모리 관리 측면에서 봤을 때는 비싼 작업이므로 과도하게 사용하지 않아야 함

 

 

11. 호이스팅(Hoisting)

호이스팅(Hoisting) 은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징입니다. 이를 통해 코드의 선언된 위치와 관계없이 변수를 사용할 수 있는 것처럼 보일 수 있습니다.

호이스팅의 끌어올리는 특징은 다음과 같습니다.

 

1. 선언만 호이스팅할 뿐, 변수 값 할당까지 끌어올리지 않음

console.log(myVar); // 변수 자체는 호이스팅되지만 초기화 전까진 undefined

var myVar = 10;
console.log(myVar); // 10

 

2. 함수 선언은 전체가 호이스팅, 선언 이전에 호출 가능

console.log(myFunction()); // 'Hello World' 출력

function myFunction() {
  return 'Hello World';
}

 

3. TDZ(Temporal Dead Zone)

변수가 선언되고 초기화되기 전까지의 구간을 말합니다.

ES6에 도입된 let과 const로 선언된 변수는 TDZ가 존재하여, 이 구간에서는 변수에 접근할 수 없습니다.

console.log(myLet); // TDZ로 인해 초기화 전 접근하면 ReferenceError 발생

let myLet = 10;

 

 

12. 자바스크립트 함수의 특징

1. 일급 객체

자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있습니다.

const sayHello = function() { return 'Hello'; }; // 변수에 할당
console.log(sayHello()); // 'Hello'

const executeFunction = function(fn) { // 함수의 인자로 함수를 받을 수 있음
  return fn();
};
console.log(executeFunction(sayHello)); // 'Hello'

 

2. 익명함수와 함수 표현식

이름 없는 함수, 즉 익명 함수를 정의할 수 있습니다. 익명 함수는 함수 표현식에서 주로 사용되며, 필요에 따라 함수에 이름을 지정하지 않아도 됩니다.

const add = function(a, b) { // 익명 함수를 이용하여 함수 표현식 선언
  return a + b;
};
console.log(add(2, 3)); // 5

 

3. 호이스팅

함수 선언식을 통해 선언한 함수는 코드가 실행되기 전에 호이스팅되어 함수 선언 이전에 호출할 수 있습니다.

반면, 함수 표현식은 변수에 할당된 후에 사용할 수 있습니다.

// 함수 선언식은 호이스팅되어 코드 상 선언 이전에 호출 가능
console.log(declaredFunction()); // 'Declared Function'
function declaredFunction() {
  return 'Declared Function';
}

// 함수 표현식은 할당 후에만 사용할 수 있음
const expressedFunction = function() {
  return 'Expressed Function';
};
console.log(expressedFunction()); // 'Expressed Function'

 

4. 클로저

클로저는 함수가 자신이 선언된 환경(스코프) 을 기억하고, 해당 환경에 접근할 수 있는 특징을 가지고 있습니다. 이를 통해 함수는 자신이 선언된 당시 스코프 내의 변수를 참조할 수 있습니다. (자세한 내용은 해당 글 3번의 클로저를 참고하시면 좋을 것 같습니다)

function outer() {
  const outerVar = 'I am outer!';
  
  return function inner() {
    return outerVar; // 해당 함수 외부 변수에 접근 가능
  };
}

const innerFunction = outer();
console.log(innerFunction()); // 'I am outer!'

 

5. 고차 함수 (HOF : Higher Order Function)

고차 함수는 다른 함수를 인자로 받거나 반환하는 함수를 말합니다. 이는 자바스크립트에서는 함수가 일급 객체이기 때문이고 함수형 프로그래밍 패턴을 가능하게 합니다.

언뜻 보면 클로저와 비슷해 보이는데, 클로저와 고차 함수의 차이는 다음과 같습니다.

• 클로저 : 함수가 자신이 선언된 환경을 기억하고 접근할 수 있다는 것에 중점을 둚
• 고차 함수 : 함수가 다른 함수를 인자로 받거나 반환하는 것에 중점을 둚

function multiplyBy(factor) {
  return function(num) { // 함수를 반환하고 있음
    return num * factor;
  };
}

const double = multiplyBy(2);
console.log(double(5)); // 10

 

6. 화살표 함수(Arrow Function)

화살표 함수는 더 간결한 문법을 제공합니다.

this 바인딩에서 화살표 함수는 선언된 위치의 this 값을 유지하므로, 일반 함수와 달리 별도로 this를 바인딩할 필요가 없습니다.

this에 관련된 내용은 바로 아래의 글을 확인하면 좋을 것 같습니다

• 메타몽 같은 this 너란 녀석

const obj = {
  value: 42,
  method: function() {
    setTimeout(() => {
      console.log(this.value); // 42 (Arrow 함수는 obj의 this를 유지)
    }, 1000);
    
//    setTimeout(function() {
//      console.log(this.value); // undefined (일반 함수의 this는 window를 가르키게 됨)
//    }, 1000);
  }
};
obj.method();

 

---

참고 링크

•  MDN
• 매일메일