개발하는 애플리케이션의 크기가 커지고 프로그램의 내부를 기능별로 분할한 부분을 “모듈”이라 부른다

모듈화의 장점

• 유지보수
  • 기능들이 모듈화가 잘 되어있다면 의존성을 줄일 수 있어 유지보수가 편리하다.
• 네임스페이스화
  • 모듈화를 하면 모듈만의 네임스페이스를 가지기 떄문에 중복 변수명으로부터 자유로워진다.
• 재사용성
  • 재사용 가능한 로직을 모듈로 분리시켜 필요할 때마다 사용할 수 있다.

모듈 시스템

JavaScript 프로그램을 모듈로 개발하고 배포할 수 있게 하기 위해 만들어짐

CJS (CommonJS)

모듈 시스템이 없던 초기의 자바스크립트는 브라우저에서는 큰 문제가 없었지만 서버 사이드에서 사용하기에는 여러 기능들을 모듈화 없이 유지보수하는 것은 거의 불가능에 가까웠다. 파일을 나누는 것은 가능하지만 스코프가 전역(Global)이라서 충돌 위험이 너무 컸다.

하지만 클라이언트와 서버 측에서 같은 언어를 쓸 때의 많은 이점으로 인해 수요는 늘어갔고, 이로 인해 탄생한 것이 ServerJS(CommonJS) 이다.

// 내보내기
module.exports = function add(a, b) { return a + b }

// 가져오기
const add = require("./add");

• 구) ServerJS
• Node.js에서 기본적으로 사용하는 모듈 시스템이다.
• 서버 사이드에서 사용하며, 동기적으로 작동한다. (위에서 아래로 순차적으로 실행)
  • 서버 애플리케이션은 파일 시스템에 직접적으로 접근할 수 있고, 필요한 모듈이나 데이터를 로컬에서 빠르게 로드할 수 있다.
  • 이러한 방식은 네트워크 지연 시간이 거의 없기 때문에 동기적으로 작동해도 문제가 없다.

브라우저의 경우, 네트워크를 통해 모듈이나 라이브러리를 로드하기 떄문에 동기적 로딩은 웹페이지의 로딩 시간을 크게 증가시킬 수 있다. 규모가 클수록 더 많은 영향을 받았고, 브라우저 환경을 고려한 비동기로 동작하는 모듈 시스템 AMD가 탄생하게 되었다.

AMD (Asynchronous Module Definition)

AMD 그룹은 브라우저 환경을 위한 브라우저 모듈의 표준을 만들고자 했으며, 자바스크립트 모듈과 의존성을 비동기적으로 로드하는 방법을 정의하는 개방형 표준을 공개했다. 이 표준을 기반으로 모듈 시스템을 위한 다양한 라이브러리가 탄생했다.

amdjs-api/AMD.md at master · amdjs/amdjs-api

• RequireJS
• 클라이언트에서 주로 사용하며(서버 사이드에서 사용 가능), 비동기적으로 작동한다.
• define을 통해 모듈을 정의하고, require을 통해 모듈을 비동기적으로 불러와 사용한다.

UMD (Universal Module Definition)

자바스크립트 생태계가 점점 넓어지며, CommonJS와 AMD 모듈 시스템을 모두 지원해야 하는 상황이 생기게 되었고 두 모듈 방식을 좀 더 효율적으로 구성하기 위해 모듈 관리 패턴 UMD가 탄생하게 되었다.

(function (root, factory) {
  if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else {
    // 브라우저 글로벌
    root.myLibrary = factory();
  }
}(this, function () {
  return {
    hello: function() { console.log("Hello!"); }
  };
}));

• 모듈 선언을 위해 즉시실행함수(IIFE)를 사용한다.
• 보통 라이브러리를 배포할 떄 많이 사용한다.
• 다양한 환경에서 실행할 수 있는 유연한 구조이다.
  • CommonJS 모듈을 사용할 수 있는지 확인
  • 그렇지않다면 AMD에서 사용하는 define 함수를 사용할 수 있는지 확인
  • 둘 다 아니라면 브라우저라 판단

ESM (ES Module)

모듈화를 위한 다양한 움직임 끝에 ECMAScripts2015 표준 명세에 ECMA Modules가 등장하며, 자바스크립트 자체 모듈 시스템을 사용할 수 있게 되었다.

// 내보내기
export function add (a, b) { return a + b }

// 가져오기
import { add } from "/add.js"

• 현재는 브라우저와 Node.js 모두에서 기본적으로 지원한다.
• 비동기 로딩과 명확한 의존성 파악이 가능하다.
• 트리 쉐이킹(tree-shaking)을 통해 사용하지 않는 코드를 제거할 수 있다.
• 브라우저에서는 <script type=”module”>을 통해 직접 사용할 수 있다.
• Node.js에서는 package.json 에 “type”: “module”을 추가하면 된다.

브라우저는 기본적으로 ESM만 인식한다. 따라서 다른 모듈 시스템을 제공하는 라이브러리를 사용하기 위해서는 ESM 형식으로 변환(트랜스파일) 해주는 과정이 필요하다. 이러한 작업은 보통 Webpack, Rollup 같은 번들러 도구들이 처리해준다.

번들러(Bundler)

웹 애플리케이션 개발에 필요한 HTML, CSS, JS 등의 모듈화된 자원들을 모아서, 하나 혹은 최적의 소수 파일로 결합(번들링)하는 도구이다.

결합 전 수행 작업

개발자의 작업 효율성을 높이고, 브라우저 호환성이나 성능을 개선하는데 크게 도움을 준다.

• 불필요한 주석이나 공백 제거
• 난독화
• 파일 압축
• 최신 문법이나 기타 개발에 필요한 특수 기능 등을 브라우저가 지원하는 형태로 변환(트랜스파일링)

요즘의 번들러는 단순히 파일을 묶는 기능 뿐만 아니라, 트랜스파일링 작업도 포함한 종합적인 빌드 도구로 발전했다. 이에 해당하는 예시로는 Webpack, Rollup 등이 있다.

Webpack

대표적인 자바스크립트 번들러로, 많은 기능과 확장성으로 좀 더 복잡한 프로젝트에서도 효율적으로 모듈을 관리할 수 있도록 도와준다.

• 모듈 번들링 (Module Bundling)
  • 진입점에 연결된 파일을 단일 파일로 묶어줌
• 번들 최적화 (Automatic Bundle Optimization)
  • 번들 최적화를 통해. 보다 더 작은 번들을 생성하고 그만큼 빠르게 로딩할 수 있다.
• 코드 스플리팅 (Code Splitting)
  • 모듈을 청크(chunk)로 분리하여, 동적으로 필요한 모듈만 로딩할 수 있다.
• 트리 쉐이킹 (Tree Shaking)
  • 사용하지 않는 코드를 제거해서 번들의 크기를 줄이고 성능을 향상시킨다.
• 개발 서버 시행 (Development Server)
  • 코드가 변경될 때마다 브라우저에 반영(HMR)되는 개발용 서버를 실행할 수 있다.

Rollup

경량화와 번들 최적화를 중점에 둔 ES Module 번들러이다.

• ESM 중심
  • ES 모듈을 기본으로 지원한다.
  • 최신 JS 문법에 최적화되어 있어서 Tree Shaking 효과가 좋다
• Tree Shaking 최적화
  • Webpack보다 더 깔끔하게 제거하는 경우가 많다.
• 라이브러리 번들링에 최적화
  • 앱보다는 라이브러리(npm 패키지 등)을 번들링할 때 더 많이 사용된다.
  • 작은, 최적화된 번들을 만드는 데 강점이 있다

ESBuild

노드기반 번들러보다 10~100배 빠른 빌드를 제공하는 번들러이다.

• Go 언어 기반
  • Go로 구현되어 병렬 처리가 최적화되어 있어서 수백 개 파일도 몇 초안에 번들링이 가능하다.

트랜스파일러(Tranpsiler)

소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환해주는 도구이다. 주로 최신 버전의 언어를 구형 버전의 언어로 변경하거나, 다른 언어로 변경하는데 사용된다.

자바스크립트를 대상으로 하는 트랜스파일러는 Babel, TSC, ESBuild 등이 있다.

• ES6 → ES5 (Babel)
• typescript → javascript (TypeScript Compiler)
• sass / scss → css

Babel

대표적인 자바스크립트 트랜스파일러로, 최신 버전의 자바스크립트 코드를 오래된 버전의 자바스크립트 코드로 변환해주는 역할을 한다.

• 구) 6to5
• ES5 문법으로의 변환을 통해, 모든 브라우저에서 일관적 동작을 보장해준다. (크로스 브라우징)
• 플러그인과 프리셋 시스템을 제공하여 개발자가 원하는 변환 규칙을 추가하고 설정할 수 있다.
• 소스 변환 과정이 추가되기 때문에 빌드 시간을 증가시킬 수 있다.
• 파싱(parsing) → 변환(transformation) → 출력(print)의 세 단계를 걸쳐서 코드를 변환한다.
  • 파싱 : 코드를 읽어서 AST(추상 구문 트리)로 변환
  • 변환 : AST를 정해진 규칙에 따라 다시 변환(ES6 → ES5)
  • 출력 : 변환된 AST를 다시 소스 코드로 출력

SWC

Speedy Web Compiler의 약자로, JS와 TS를 빠르게 트랜스파일링하는 도구이다.

• 초고속 트랜스파일링
  • Rust로 작성되어서, JavaScript/TypeScript 트랜스파일링 속도가 매우 빠르다.
• TypeScript 지원
  • 별도로 추가 설정 없이 TypeScript 파일을 바로 컴파일할 수 있다.
• React + TS 환경에서 유용
  • React 프로젝트에 맞는 설정과 트랜스파일링이 간단하다.
• Babel보다 생태계가 작다.

지금은 대부분의 빌드 도구가 두 역할을 동시에 처리하기 때문에 옛날에 비해 트랜스파일러와 모듈러의 경계가 흐려졌다. 이제는 도구의 “정체성”보다는 “무엇을 해결해주는가(문법 변환? 모듈 결합? 최적화?)”를 중심으로 이해하는게 더 실용적이다.

특정 코드가 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 실행하는 것

콜백 기반(Callback-based)

무언가를 비동기적으로 수행하는 함수는 함수 내 동작이 모두 처리된 후 실행되어야 하는 함수가 들어갈 콜백을 인수로 반드시 제공해야 한다.

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;
  script.onload = () => callback(script);
  document.head.append(script);
}

loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {
  alert(`${script.src}가 로드되었습니다.`);
  alert( _ ); // 스크립트에 정의된 함수
});

콜백 지옥

언뜻 봤을 때는 꽤 쓸만해보이지만, 꼬리에 꼬리를 무는 비동기 동작의 경우 문제가 될 수 있다.

• 콜백 지옥 예시

    loadScript('1.js', function(error, script) {
  
      if (error) {
        handleError(error);
      } else {
        // ...
        loadScript('2.js', function(error, script) {
          if (error) {
            handleError(error);
          } else {
            // ...
            loadScript('3.js', function(error, script) {
              if (error) {
                handleError(error);
              } else {
                // 모든 스크립트가 로딩된 후, 실행 흐름이 이어집니다. (*)
              }
            });
  
          }
        })
      }
    });

위의 예시와 같이 계속된 호출로 인해 깊은 중첩 코드가 만들어지는 패턴을 콜백 지옥 혹은 멸망의 피라미드라고 부른다.

이를 해결하기위해 독립적 함수들로 분리할 수는 있지만, 코드의 진행 순서를 읽기가 불편해진다는 점과 재사용하지 않을 함수들을 각각 선언하면서 네임스페이스가 복잡해져버린다.

• 독립적 함수로 분리 예시

    loadScript('1.js', step1);
  
    function step1(error, script) {
      if (error) {
        handleError(error);
      } else {
        // ...
        loadScript('2.js', step2);
      }
    }
  
    function step2(error, script) {
      if (error) {
        handleError(error);
      } else {
        // ...
        loadScript('3.js', step3);
      }
    }
  
    function step3(error, script) {
      if (error) {
        handleError(error);
      } else {
        // 모든 스크립트가 로딩되면 다른 동작을 수행합니다. (*)
      }
    };

프로미스(Promise)

자바스크립트의 비동기 작업을 처리하기 위한 객체

state

• pending(보류) : 지정한 작업을 수행중인 상태
• fulfilled(이행) : 작업이 성공적으로 마무리된 상태
• rejected(거절) : 작업에 문제가 생겨 오류가 발생한 상태

producer

원하는 기능을 비동기적으로 실행하는 Promise

const promise = new Promise((resolve, reject) => {
    console.log("promise.execute!");
});

프로미스 생성자를 통해 promise 객체를 생성하며, 매개변수로는 executor라는 callback 함수를 전달해줘야한다.

executor 함수는 프로미스가 생성되는 동시에 바로 실행된다.

executor 함수는 두 가지 매개변수를 갖는다.

• resolve(value) : 일이 성공적으로 끝난 경우, 그 결과를 나타내는 value와 함께 호출
  • resolve가 호출되면 프로미스 객체의 상태(state)는 fulfilled로 변경된다.
• reject(error) : 에러 발생 시, 에러 객체를 나타내는 error와 함께 호출
  • reject가 호출되면 프로미스 객체의 상태는 rejected로 변경된다.

consumer

producer가 제공한 데이터를 소비하는 것

then, catch, finally 를 이용하여 값을 받아올 수 있다.

• then : 프로미스에서 가장 중요하고 기본이 되는 메서드다.

    promise.then(
      result => alert(result),
      error => alert(error) 
    );

  • 첫번째 매개변수는 프로미스가 이행되었을 때 실행되는 함수이고,
  • 두번째 매개변수는 프로미스가 거부되었을 때 실행되는 함수이다.

• catch : 에러가 발생한 경우만 다루고 싶을 때 사용되는 메서드다.

    let promise = new Promise((resolve, reject) => {
      setTimeout(() => reject(new Error("에러 발생!")), 1000);
    });
  
    // .catch(f)는 promise.then(null, f)과 동일하게 작동한다.
    promise.catch(alert); //바로 아래 코드와 같은 의미
    //promise.catch((error) => alert(error));

• finally : 프로미스를 처리한 후(이행되거나, 거부된 후) 호출할 함수를 예약하는 메서드다.

    new Promise((resolve, reject) => {
      /* 시간이 걸리는 어떤 일을 수행하고, 그 후 resolve, reject를 호출함 */
    })
      // 성공·실패 여부와 상관없이 프라미스가 처리되면 실행됨
      .finally(() => 로딩 인디케이터 중지)
      .then(result => result와 err 보여줌 => error 보여줌)

프로미스 API

Promise.all

배열 안의 프로미스가 모두 처리되면 새로운 프로미스가 이행되는데, 배열 안 프로미스 결과값을 담은 배열이 새로운 프로미스의 result가 된다.

let promise = Promise.all([...promises...]);

• 배열 result의 요소 순서는 이행 순서가 아닌, 매개변수로 전달된 프라미스의 순서에 상응한다.
• 전달되는 프로미스 중 하나라도 거부되면, Promise.all이 반환하는 프로미스는 에러와 함께 거부된다.

Promise.allSettled

모든 프로미스가 처리될 때까지 기다렸다가 이행(거부) 여부와 상관없이 그 결과(객체)를 담은 배열을 반환한다.

let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/Violet-Bora-Lee',
  'https://no-such-url'
];

Promise.allSettled(urls.map(url => fetch(url)))
  .then(results => { // (*)
    results.forEach((result, num) => {
      if (result.status == "fulfilled") {
        alert(`${urls[num]}: ${result.value.status}`);
      }
      if (result.status == "rejected") {
        alert(`${urls[num]}: ${result.reason}`);
      }
    });
  });

결과

[
  {status: 'fulfilled', value: ...응답...},
  {status: 'fulfilled', value: ...응답...},
  {status: 'rejected', reason: ...에러 객체...}
]

Promise.race

Promise.all과 비슷하지만, 가장 먼저 처리되는 프라미스의 결과를 반환한다는 점이 다르다.

let promise = Promise.race(iterable);

전달된 프라미스 중 하나가 먼저 이행(거부)된다면, 나머지 프로미스의 이행(거부) 여부의 상관 없이 첫번째 프로미스의 결과만 반환한다.

async/await

프로미스를 조금 더 편하게 사용할 수 있는 문법이다.

async

함수 앞에 async 키워드를 붙이면 해당 함수는 항상 프로미스를 반환한다.

async function f() {
  return 1;
}
f().then(alert); // 1

await

async 함수 안에서만 동작한다.

자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다린다. 결과는 그 이후 반환된다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

awiat은 최상위 레벨 코드에서 작동하지 않는다.

프로미스가 정상적으로 이행되면 프라미스 객체의 result에 저장된 값을 반환한다.

반면 프로미스가 거부되면 마치 throw문처럼 에러가 던져진다.

async function f() {

  try {
    let response = await fetch('http://유효하지-않은-주소');
    let user = await response.json();
  } catch(err) {
    // fetch와 response.json에서 발행한 에러 모두를 여기서 잡습니다.
    alert(err);
  }
}

f();

위와 같이 코드를 작성할 경우,

여러 줄의 코드에서도 오류를 감지 할 수 있다.

개발하는 애플리케이션의 크기가 커지고 프로그램의 내부를 기능별로 분할한 부분을 “모듈”이라 부른다

모듈화의 장점

• 유지보수
  • 기능들이 모듈화가 잘 되어있다면 의존성을 줄일 수 있어 유지보수가 편리하다.
• 네임스페이스화
  • 모듈화를 하면 모듈만의 네임스페이스를 가지기 떄문에 중복 변수명으로부터 자유로워진다.
• 재사용성
  • 재사용 가능한 로직을 모듈로 분리시켜 필요할 때마다 사용할 수 있다.

모듈 시스템

JavaScript 프로그램을 모듈로 개발하고 배포할 수 있게 하기 위해 만들어짐

CJS (CommonJS)

모듈 시스템이 없던 초기의 자바스크립트는 브라우저에서는 큰 문제가 없었지만 서버 사이드에서 사용하기에는 여러 기능들을 모듈화 없이 유지보수하는 것은 거의 불가능에 가까웠다. 파일을 나누는 것은 가능하지만 스코프가 전역(Global)이라서 충돌 위험이 너무 컸다.

하지만 클라이언트와 서버 측에서 같은 언어를 쓸 때의 많은 이점으로 인해 수요는 늘어갔고, 이로 인해 탄생한 것이 ServerJS(CommonJS) 이다.

// 내보내기
module.exports = function add(a, b) { return a + b }

// 가져오기
const add = require("./add");

• 구) ServerJS
• Node.js에서 기본적으로 사용하는 모듈 시스템이다.
• 서버 사이드에서 사용하며, 동기적으로 작동한다. (위에서 아래로 순차적으로 실행)
  • 서버 애플리케이션은 파일 시스템에 직접적으로 접근할 수 있고, 필요한 모듈이나 데이터를 로컬에서 빠르게 로드할 수 있다.
  • 이러한 방식은 네트워크 지연 시간이 거의 없기 때문에 동기적으로 작동해도 문제가 없다.

브라우저의 경우, 네트워크를 통해 모듈이나 라이브러리를 로드하기 떄문에 동기적 로딩은 웹페이지의 로딩 시간을 크게 증가시킬 수 있다. 규모가 클수록 더 많은 영향을 받았고, 브라우저 환경을 고려한 비동기로 동작하는 모듈 시스템 AMD가 탄생하게 되었다.

AMD (Asynchronous Module Definition)

AMD 그룹은 브라우저 환경을 위한 브라우저 모듈의 표준을 만들고자 했으며, 자바스크립트 모듈과 의존성을 비동기적으로 로드하는 방법을 정의하는 개방형 표준을 공개했다. 이 표준을 기반으로 모듈 시스템을 위한 다양한 라이브러리가 탄생했다.

amdjs-api/AMD.md at master · amdjs/amdjs-api

• RequireJS
• 클라이언트에서 주로 사용하며(서버 사이드에서 사용 가능), 비동기적으로 작동한다.
• define을 통해 모듈을 정의하고, require을 통해 모듈을 비동기적으로 불러와 사용한다.

UMD (Universal Module Definition)

자바스크립트 생태계가 점점 넓어지며, CommonJS와 AMD 모듈 시스템을 모두 지원해야 하는 상황이 생기게 되었고 두 모듈 방식을 좀 더 효율적으로 구성하기 위해 모듈 관리 패턴 UMD가 탄생하게 되었다.

(function (root, factory) {
  if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else {
    // 브라우저 글로벌
    root.myLibrary = factory();
  }
}(this, function () {
  return {
    hello: function() { console.log("Hello!"); }
  };
}));

• 모듈 선언을 위해 즉시실행함수(IIFE)를 사용한다.
• 보통 라이브러리를 배포할 떄 많이 사용한다.
• 다양한 환경에서 실행할 수 있는 유연한 구조이다.
  • CommonJS 모듈을 사용할 수 있는지 확인
  • 그렇지않다면 AMD에서 사용하는 define 함수를 사용할 수 있는지 확인
  • 둘 다 아니라면 브라우저라 판단

ESM (ES Module)

모듈화를 위한 다양한 움직임 끝에 ECMAScripts2015 표준 명세에 ECMA Modules가 등장하며, 자바스크립트 자체 모듈 시스템을 사용할 수 있게 되었다.

// 내보내기
export function add (a, b) { return a + b }

// 가져오기
import { add } from "/add.js"

• 현재는 브라우저와 Node.js 모두에서 기본적으로 지원한다.
• 비동기 로딩과 명확한 의존성 파악이 가능하다.
• 트리 쉐이킹(tree-shaking)을 통해 사용하지 않는 코드를 제거할 수 있다.
• 브라우저에서는 <script type=”module”>을 통해 직접 사용할 수 있다.
• Node.js에서는 package.json 에 “type”: “module”을 추가하면 된다.

브라우저는 기본적으로 ESM만 인식한다. 따라서 다른 모듈 시스템을 제공하는 라이브러리를 사용하기 위해서는 ESM 형식으로 변환(트랜스파일) 해주는 과정이 필요하다. 이러한 작업은 보통 Webpack, Rollup 같은 번들러 도구들이 처리해준다.

번들러(Bundler)

웹 애플리케이션 개발에 필요한 HTML, CSS, JS 등의 모듈화된 자원들을 모아서, 하나 혹은 최적의 소수 파일로 결합(번들링)하는 도구이다.

결합 전 수행 작업

개발자의 작업 효율성을 높이고, 브라우저 호환성이나 성능을 개선하는데 크게 도움을 준다.

• 불필요한 주석이나 공백 제거
• 난독화
• 파일 압축
• 최신 문법이나 기타 개발에 필요한 특수 기능 등을 브라우저가 지원하는 형태로 변환(트랜스파일링)

요즘의 번들러는 단순히 파일을 묶는 기능 뿐만 아니라, 트랜스파일링 작업도 포함한 종합적인 빌드 도구로 발전했다. 이에 해당하는 예시로는 Webpack, Rollup 등이 있다.

Webpack

대표적인 자바스크립트 번들러로, 많은 기능과 확장성으로 좀 더 복잡한 프로젝트에서도 효율적으로 모듈을 관리할 수 있도록 도와준다.

• 모듈 번들링 (Module Bundling)
  • 진입점에 연결된 파일을 단일 파일로 묶어줌
• 번들 최적화 (Automatic Bundle Optimization)
  • 번들 최적화를 통해. 보다 더 작은 번들을 생성하고 그만큼 빠르게 로딩할 수 있다.
• 코드 스플리팅 (Code Splitting)
  • 모듈을 청크(chunk)로 분리하여, 동적으로 필요한 모듈만 로딩할 수 있다.
• 트리 쉐이킹 (Tree Shaking)
  • 사용하지 않는 코드를 제거해서 번들의 크기를 줄이고 성능을 향상시킨다.
• 개발 서버 시행 (Development Server)
  • 코드가 변경될 때마다 브라우저에 반영(HMR)되는 개발용 서버를 실행할 수 있다.

Rollup

경량화와 번들 최적화를 중점에 둔 ES Module 번들러이다.

• ESM 중심
  • ES 모듈을 기본으로 지원한다.
  • 최신 JS 문법에 최적화되어 있어서 Tree Shaking 효과가 좋다
• Tree Shaking 최적화
  • Webpack보다 더 깔끔하게 제거하는 경우가 많다.
• 라이브러리 번들링에 최적화
  • 앱보다는 라이브러리(npm 패키지 등)을 번들링할 때 더 많이 사용된다.
  • 작은, 최적화된 번들을 만드는 데 강점이 있다

ESBuild

노드기반 번들러보다 10~100배 빠른 빌드를 제공하는 번들러이다.

• Go 언어 기반
  • Go로 구현되어 병렬 처리가 최적화되어 있어서 수백 개 파일도 몇 초안에 번들링이 가능하다.

트랜스파일러(Tranpsiler)

소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환해주는 도구이다. 주로 최신 버전의 언어를 구형 버전의 언어로 변경하거나, 다른 언어로 변경하는데 사용된다.

자바스크립트를 대상으로 하는 트랜스파일러는 Babel, TSC, ESBuild 등이 있다.

• ES6 → ES5 (Babel)
• typescript → javascript (TypeScript Compiler)
• sass / scss → css

Babel

대표적인 자바스크립트 트랜스파일러로, 최신 버전의 자바스크립트 코드를 오래된 버전의 자바스크립트 코드로 변환해주는 역할을 한다.

• 구) 6to5
• ES5 문법으로의 변환을 통해, 모든 브라우저에서 일관적 동작을 보장해준다. (크로스 브라우징)
• 플러그인과 프리셋 시스템을 제공하여 개발자가 원하는 변환 규칙을 추가하고 설정할 수 있다.
• 소스 변환 과정이 추가되기 때문에 빌드 시간을 증가시킬 수 있다.
• 파싱(parsing) → 변환(transformation) → 출력(print)의 세 단계를 걸쳐서 코드를 변환한다.
  • 파싱 : 코드를 읽어서 AST(추상 구문 트리)로 변환
  • 변환 : AST를 정해진 규칙에 따라 다시 변환(ES6 → ES5)
  • 출력 : 변환된 AST를 다시 소스 코드로 출력

SWC

Speedy Web Compiler의 약자로, JS와 TS를 빠르게 트랜스파일링하는 도구이다.

• 초고속 트랜스파일링
  • Rust로 작성되어서, JavaScript/TypeScript 트랜스파일링 속도가 매우 빠르다.
• TypeScript 지원
  • 별도로 추가 설정 없이 TypeScript 파일을 바로 컴파일할 수 있다.
• React + TS 환경에서 유용
  • React 프로젝트에 맞는 설정과 트랜스파일링이 간단하다.
• Babel보다 생태계가 작다.

지금은 대부분의 빌드 도구가 두 역할을 동시에 처리하기 때문에 옛날에 비해 트랜스파일러와 모듈러의 경계가 흐려졌다. 이제는 도구의 “정체성”보다는 “무엇을 해결해주는가(문법 변환? 모듈 결합? 최적화?)”를 중심으로 이해하는게 더 실용적이다.

• 객체들이 모여서 상호 협력하면서 데이터를 처리하는 방식

최신 프론트엔드 트렌드는 함수형 프로그래밍이 강조되고 있지만, 객체지향 프로그래밍도 알아두면 좋을 것 같다.

용어

• 클래스

  • 객체 지향 프로그래밍을 지원하기 위해 ES6에서 도입된 기능이다.
  • 객체를 생성하는 템플릿, 설계도 역할을 하며, 프로토타입 기반의 객체 지향 패턴을 보다 명확하고 쉽게 사용할 수 있게 해준다.

• 객체

  • 객체는 원시타입과 달리 다양한 데이터를 담을 수 있는 데이터 타입이다.
    • 원시 데이터 타입, 객체, 함수, 배열, Date, 정규표현식, 심볼 등
  • 키(key)와 값(value)로 구성된 프로퍼티(Property)들의 집합이다.
  • ‘클래스의 인스턴스’라고도 부른다.

• 인스턴스

  • 설계도를 바탕으로 소프트웨어 세계에 구현된 구체적인 실체이다.
  • 인스턴스는 객체에 포함된다고 볼 수 있다.

프로그래밍 구조

• 프로퍼티와 메소드

  • 프로퍼티(property)

    • 객체에는 ‘키 : 값’ 쌍으로 구성된 프로퍼티가 들어간다.
    • 프로퍼티 값엔 모든 데이터 타입이 올 수 있다.
    • 하지만 몇몇 데이터 타입은 어떤 경우에 동작하지 않거나 원치 않은 결과를 불러올 수 있다.
      • NaN, Infinity, BigInt, undefined, null

  • 메서드(method)

    • 객체 안에 프로퍼티로 정의된 함수를 메서드라고 한다.

      const obj = {
      f1 : function () {
       console.log("hi!")
      },
      f2(){
       console.log("hi!")   
      }

      기존에는 f1의 형태처럼, 프로퍼티를 정의할 때와 동일하게 선언했었는데,

      ES6에서는 f2와 같이 : 를 생략한 축약 표현을 사용할 수 있다.

     >ES6 이후의 코드를 작성할 때는 더 간결한 축약 메서드 구문을 사용하는 것이 일반적이다.

• 캡슐화

  • 비슷한 관련된 역할을 하는 속성과 메소드들을 하나의 캡슐로 만들어 외부로 부터 보호하는 것을 말한다.

  • 이유

    • 데이터 보호 : 외부로 부터 각 객체에 정의된 속성과 기능을 보호
    • 데이터 은닉 : 내부의 동작을 감추고 필요한 부분만 노출시키기 위함

  • 프라이빗 필드

    • #을 사용하여 클래스 내에서만 접근 가능한 프라이빗 필드를 정의할 수 있다.
    • 이는 클래스 외부에서 필드에 직접 접근 및 수정하지 못하도록 한다.
    • 단점은 클래스의 상속 구조에서 자식 클래스가 부모 클래스의 프라이빗 필드에 접근할 수 없다는 점을 고려해야 한다는 것이다.

  • getter/setter

    • 예시

        class Person {
          #name; 
          #age;   
      
          constructor(name, age) {
            this.#name = name;
            this.#age = age;
          }
      
          // Getter
          get name() {
            return this.#name;
          }
      
          get age() {
            return this.#age;
          }
      
          // Setter
          set name(newName) {
            this.#name = newName;
          }
      
          set age(newAge) {
            if (newAge > 0) {
              this.#age = newAge;
            }
          }
        }
      
        const person = new Person('John', 30);
      
        console.log(person.name);  // "John"
        console.log(person.age);   // 30
      
        person.name = 'Jane';  // setter 호출
        person.age = 35;       // setter 호출
      
        console.log(person.name);  // "Jane"
        console.log(person.age);   // 35

• 상속

  • 객체가 다른 객체를 상속 받아 해당 객체의 요소를 사용하는 것을 의미한다.
  • 상속 받은 객체는 자식, 상속된 객체는 부모라 칭한다.
  • 상속을 통해 프로젝트의 생산성, 유지보수성, 재사용성을 높일 수 있다.

• 다형성

  • 동일한 메시지나 인터페이스가 여러 가지 형태로 동작할 수 있는 것을 의미한다.
  • 메서드 오버로딩(Method Overloading)
    • 같은 이름의 메서드를 여러 개 정의하되, 각 메서드는 서로 다른 매개변수 목록을 가진다.
    • 자바스크립트에서는 이를 직접 지원하지 않지만, 매개변수의 개수와 타입을 체크하며 직접 구현할 수 있다.
  • 메서드 오버라이딩(Method Overriding)
    • 상속을 통해 자식 클래스에서 부모 클래스의 메서드를 재정의하여 사용한다.
  • 상속과 마찬가지로 생산성, 유지보수성, 재사용성을 높일 수 있다.

객체 표현 방식

객체표현 - 1. 리터럴 표기법 (Literal Notation)

• 중괄호를 사용하여 객체를 정의하며, 속성과 값음 key : value 형식으로 나열한다.

const healthObj = {
  name : "달리기",
  lastTime : "PM10:12",
  showHealth() {
    console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
  }
}

healthObj.showHealth();

객체표현 - 2. 생성자 함수 (Constructor Function)

• 객체의 템플릿을 정의하고, new 키워드로 객체를 생성한다. 생성자 함수의 첫 글자는 보통 대문자를 사용하는 것이 관례이다.

const Health = function(name,healthTime) {
  this.name = name;
  this.healthTime = healthTime;
  this.showHealth = function() {
    console.log(this.name + "님, 오늘은 " + this.healthTime + "에 운동을 하셨네요");
  }
}

const ho = new Health("crong", "12:12");
ho.showHealth();

객체표현 - 3. 클래스 문법 (Class Syntax)

• ES6부터 도입된 문법으로, 생성자 함수보다 직관적이고 상속과 같은 객체 지향적인 개념을 쉽게 사용할 수 있다.

const Health = class {
  constructor(name, healthTime) {
    this.name = name;
    this.healthTime = healthTime;
  }

  showHealth(){
     console.log(this.name + "님, 오늘은 " + this.healthTime + "에 운동을 하셨네요");
  }

}

const ho = new Health("crong", "12:12");
ho.showHealth();

this와 super 키워드 차이점

this

• 인스턴스 변수와 로컬 변수 구별

  • 인스턴스 변수와 로컬 변수의 이름이 같을 때, this 키워드를 사용하며 인스턴스 변수를 구분할 수 있다.

  • 예시

      class Example {
        constructor(value) {
          this.value = value;  // 인스턴스 변수
        }
        showValue() {
          let value = 10;  // 로컬 변수
          console.log(value); // 출력 : 로컬 변수
          console.log(this.value); // 출력 : 인스턴스 변수
        }
      }

• 현재 객체 반환

• 현재 객체의 메서드 호출

  • 같은 클래스 내에서 다른 메서드를 호출

super

• 부모 클래스의 생성자, 메서드를 호출하거나 인스턴스 변수를 참조할 때 사용된다.

SOLID 원칙

SRP(Single Responsibility Principle) 단일 책임 원칙

• 한 클래스는 하나의 책임을 가져야 한다는 원칙
• 클래스가 변경되어야 하는 이유가 단 하나만 있어야 한다는 것이다.
• 목적 :
  • 유지보수성 향상
  • 변경의 용이성
  • 재사용성 증가
• 코드 길이가 길어졌다 하더라도, 하나의 클래스를 사용하는 것보다 여러 개의 클래스를 사용하는 것이 더 효율적이다.

1. 클래스명은 책임의 소재를 알 수 있게 작명
2. 책임을 분리할 때 항상 결합도, 응집도를 따져가며
   1. 응집도란 한 프로그램 요소가 얼마나 뭉쳐 있는가를 나타내는 척도
   2. 결합도는 프로그램 구성 요소들 사이가 얼마나 의존적 인지를 나타내는 척도

LSP(Liskov- Substitution Principle) 리스코프 교환원칙

• 프로그램에서 상위 타입의 객체를 하위 타입의 객체로 치환해도 프로그램의 동작이 바뀌지 않아야 한다는 원칙
• 자식 클래스는 언제나 자신의 부모 클래스를 대체할 수 있어야 한다는 것이다.
• 사실상 다형성 원리를 얘기하는 것이다.
• 목적 :
  • 신뢰성 향상
  • 유연성 증가
  • 유지보수성 개선

자바스크립트 런타임 구성요소

콜 스택(Call Stack)

• 함수가 호출되었을 떄 생성되는 실행 컨텍스트들이 여기에 push 된다.

• FILO(First-In-Last-Out) 방식으로 처리

• 함수의 실행이 종료되면 컨텍스트가 pop 된다.

• 자바스크립트는 싱글 쓰레드(Single Thread)의 형태로 단 하나의 콜스택을 가지기 때문에 굉장히 많은 시간을 잡아먹는 작업이 있을 경우, 프로그램 작동이 막힐 수가 있다.

    function longRunnigTask() {
        let count = 0;
        for (let j = 0; j < 1e9; j++) {
            count++;
        }
        console.log("Long task done!");
    }
  
    function importantTask() {
        console.log("Important!");
    }
  
    longRunningTask();
    importantTask();

  콜 스택은 longRunningTask 함수가 끝날 때까지 importantTask 함수를 실행할 수 없기 때문에, 중요한 작업이 오랫동안 미뤄질 수가 있다.

  이런 긴 실행 작업이 필요할 때, 프로그램의 진행이 멈추지 않도록 Javascript 에서는 web APIs를 통해 일부 기능을 제공한다.

Web APIs

• 브라우저가 활용하는 기능과 상호작용할 수 있는 인터페이스 세트를 제공한다.

• 여기에는 자주 사용하는 Document Object Model, fetch, setTimeout 등이 포함된다.

• 자바스크립트 런타임과 브라우저 기능 간의 다리 역할을 한다.

• 비동기 작업이 시작되면 이를 Web APIs로 전달하고, 콜 스택의 해당 실행 컨텍스트는 제거된다.

• 여기서 비동기 작업은 callback 형태와 promise 형태로 나누어진다.

모든 Web APIs가 비동기 작업을 다루는 것은 아니다.

• Callback-based APIs
  • 위의 getCurrentPosition 메서드의 경우, API가 원하는 값을 받았을 때의 success callback과 받지 못했을 때의 error callback으로 이루어져있다.
  • 해당 메서드를 호출하면 실행 컨텍스트가 콜 스택에 추가되고, 이 컨텍스트는 콜백을 웹 API에 등록하고 브라우저에 작업을 넘기는 역할을 한 후 종료된다.
  • 브라우저에서 사용자가 상호작용하는 동안에도 콜 스택은 이와 상관없이 다른 작업을 할 수 있다.(non-blocking task)
  • web APIs의 상호작용이 종료된 후에 callback은 콜 스택이 아닌 Task Queue에 추가된다.
• Promise-based APIs
  • 콜백 함수가 아닌, promise를 리턴하는 API 작업들이 해당한다.
  • 이 작업들은 Task Queue가 아닌 Microtask Queue에 추가된다.

태스크 큐(Task Queue)

• Web API의 콜백 또는 이벤트 핸들러가 실행 대기하게 되는 저장소이다.
• FIFO(First-In-First-Out)

마이크로 태스크 큐(Microtask Queue)

• then(callback), catch(callback), finally(callback)같은 프로미스 핸들러의 콜백 함수
• async 함수 내의 await뒤 따라오는 작업
• MutationObserver 콜백 함수
• queueMicrotask 콜백 함수
• 태스크 큐보다 높은 우선 순위를 가짐
• FIFO(First-In-First-Out)

이벤트 루프(Event Loop)

1. 콜 스택이 빌 떄까지 지속적으로 확인한다.
2. 만약 콜 스택에서 실행 중인 작업이 없다면 마이크로 태스크 큐의 작업을 최우선으로 찾는다.
   1. 마이크로 태스크 큐의 작업이 있을 경우, 가장 먼저 들어온 첫번째 작업을 실행한다.
   2. 마이크로 태스크 큐에 작업이 없을 경우, 태스크 큐의 첫번째 작업을 실행한다.
3. 콜 스택이 빌 때마다 계속해서 반복한다.

[javascript-questions/ko-KR/README-ko_KR.md at master · lydiahallie/javascript-questions]

함수를 호출할 때 생성되는 실행 컨텍스트 객체를 말한다.

this는 실행 컨텍스트가 생성될 때 결정되며, 함수가 호출되는 방식에 따라 다르게 바인딩된다.

전역 컨텍스트 (Global Context)

전역에서 this를 참조하면 브라우저에서는 전역(window) 객체를 가리킨다.

console.log(this); //window

일반 함수 호출 (Default Binding)

함수 내부에서 this를 사용하면, 전역(window) 객체를 가리킨다.

non-strict mode 에서는 전역 객체를, strict mode 에서는 undefined

function foo() {
    console.log(this); //window
}
foo();

메서드 호출 (Implicit Binding)

객체의 메소드로 호출되었을 경우, this는 그 객체를 가리킨다.

const obj = {
    name: "Peter",
    funcD: () {
        console.log(this.name);
    }
}

obj.funcD();
//Peter

생성자 함수 (New Binding)

new 키워드를 사용하여 함수를 호출하면, 새로운 객체가 생성되면 this가 그 객체를 가리킨다.

function Person(name) {
    this.name = name;
}
const me = new Person('Alice');
console.log(me.name); // "Alice"
****

명시적 바인딩 (Explicit Binding)

.call(), .apply(), .bind() 메서드를 사용하면 this를 명시적으로 지정할 수 있다.

function greet() {
    console.log(this.name);
}

const user = { name: 'Bob' };
greet.call(user);  // "Bob"
greet.apply(user); // "Bob"

const boundGreet = greet.bind(user);
boundGreet();      // "Bob"

• call()과 apply() 는 즉시 실행하며, 첫 번째 인자로 this를 지정한다.
• bind()는 새로운 함수를 반환하여 나중에 실행할 수 있도록 한다.

화살표 함수 (Lexical Binding)

화살표 함수의 경우, this를 바인딩하지 않고 선언된 위치에서 this를 상속한다.

즉 자신을 감싸고 있는 상위 스코프의 this를 그대로 사용한다.

1. 객체에서 사용되었을 경우, 해당 객체가 아니고 상위 스코프인 전역 객체를 참조한다.

const obj = {
  name: "Alice",
  funcD: () => {
    console.log(this.name);
  },
};

obj.funcD(); 
//undefined

1. 객체의 메서드를 외부 함수로 내부에서 사용되었을 경우

const obj = {
  name: "Alice",
  funcD: function () {
      setTimeout(() => {
      console.log(this.name);
      }, 1000)
  },
};

obj.funcD();
//Alice

상위 스코프인 funcD 함수의 this를 상속받는다.

funcD는 obj 객체의 메소드이기 때문에, this는 ****obj 객체에 바인딩되어있다.

DOM addEventListener() 의 경우, this는 e.currentTarget과 같다.

정리

• HTML 문서 내에서 선택한 요소만을 ****정렬된 순서대로 모아둔 집합
• 요소를 배열의 항목처럼 유사하게 다룰 수 있는 객체이며, 이를 유사 배열 객체라고 부른다.
• for ...of문으로 순회 가능한 이터러블(iterable) 객체이기도 하다.

HTML Collection 객체를 반환

• getElementsByTagName()
• getElementsByClassName()

getElementsByName() 은 비슷하게 생겼으나 NodeList를 반환한다.

특징

• 유사 배열 객체

  • 인덱스를 통해 요소에 접근할 수 있다.
  • length를 통해 요소의 수를 확인할 수 있다.
  • 하지만 진짜 배열처럼 배열 메서드(push, pop, forEach, map, filter)를 사용할 수 없다.
  • const elimentsArray = Array.from(HTMLCollection)
  • 대신 Array.from 메서드를 이용하면 배열로 변환하여 배열 메서드를 사용할 수 있다.

• 이터러블 객체

  • const elimentsArray = [...HTMLCollection]
  • 이터러블 객체이기 때문에 스프레드 문법을 통해 배열로 만드는 방법도 있다.

• live DOM 객체

  • DOM의 변경 사항을 실시간으로 반영하는 객체이다.

  • 객체가 생성된 후에 DOM이 변경되면 객체 또한 변경된다는 것을 의미한다.

    const divs = document.getElementsByTagName("div");
    console.log(divs.length); // 현재 div 개수 출력
    
    // 새로운 div 추가
    const newDiv = document.createElement("div");
    document.body.appendChild(newDiv);
    
    console.log(divs.length); // 새 div가 추가되었으므로 값이 변경됨 (Live 특성)

  • 변경을 방지하기 위해서는 NodeList를 사용할 수도 있고, Array.from 메서드를 통해 Live 특성을 지우고 배열로 사용하는 방법도 있다.

NodeList

• 요소 객체뿐만 아니라 텍스트, 주석, 속성 등의 모든 노드를 정렬된 순서대로 모아둔 집합
• HTMLCollection과 마찬가지로 요소 배열 객체이면서 이터러블 객체이다.

NodeList 객체를 반환

• querySelectorAll()
• getElementsByName()
• Node.childNodes

특징

• 유사 배열 객체
• 이터러블 객체
• forEach 메서드 사용 가능
  • NodeList.prototype 에 forEach 메서드가 정의되어 있기 때문이다.

일부 오래된 브라우저(IE11 이하)는 NodeList가 forEach 메서드를 지원하지 않는다.

• non-live DOM 객체
  • DOM의 변경사항을 실시간으로 반영하지 않는다.

>Node.childNodes는 위와 별개로 live DOM 객체이다.


```jsx
const divs = document.querySellectorAll("div");
console.log(divs.length); // 현재 div 개수 출력

// 새로운 div 추가
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);

console.log(divs.length); // 새 div가 추가되었으나 값이 변경되지 않음
```

요약

스코프는 참조 대상 식별자(identifier)를 찾아내기 위한 규칙이다.

간단하게 설명하면 ‘변수에 접근할 수 있는 범위’라고 말할 수 있다.

스코프의 구분

스코프는 크게 두 가지로 나눌 수 있다.

• 전역 스코프(Global Scope)
  • 최상위 레벨의 스코프
  • 전체 코드 어디에서든 접근 가능
• 지역 스코프(Local Scope)
  • 특정 함수에 해당하는 스코프
  • 해당 함수와 하위 함수에서만 접근이 가능하다.

전역 스코프(Global Scope)

브라우저에서 실행되는 JavaScript에서는 window 객체가 담당한다.

전역에서 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다.

n0='n0'; //암묵적 전역
var v0='v0';
let l0='l0';
const c0 = 'c0';
console.log(v0, n0, l0, c0);
console.log(window.v0, window.n0, window.l0, window.c0);

var 키워드로 선언한 전역 변수(v0)나 전역 함수, 암묵적 전역의 경우 모두 전역 객체 window의 프로퍼티가 된다.

암묵적 전역(implicit global) 키워드 없이 변수를 선언할 경우 스코프 체인을 통해 해당하는 변수의 선언을 찾을 수 없으므로 참조 에러가 발생해야 하지만 자바스크립트 엔진이 window의 프로퍼티로 해석하여 동적으로 생성하는 것을 말한다. 이는 변수가 아닌 전역 객체의 프로퍼티이기 떄문에 호이스팅은 발생하지 않는다. 그리고 전역 객체이기때문에 함수 내에서 키워드 없이 선언하더라도, 전역 스코프에서 참조할 수 있다.

let, const 키워드로 선언한 전역 변수는 Script Scope에 저장된다.

Script Scope let이나 const로 전역변수를 선언하고 DevTools에서 이를 확인할 경우, Global Scope가 아닌 Script Scope에 변수가 저장되어있는 것을 볼 수 있다. ES6 이전의 방식과 이후의 새로운 방식을 두 부분으로 전역 환경을 나누되, 이를 논리적으로 하나의 환경으로 간주하는 것이다. https://stackoverflow.com/questions/40685277/what-is-the-purpose-of-the-script-scope

지역 스코프 (Local Scope)

전역이 아닌 함수 내에 선언된 변수들은 지역 스코프를 가진다.

지역 스코프는 함수 스코프와 블록 스코프로 나누어진다.

• 함수 스코프 (Function-level Scope)
  • 함수 내에서 선언한 변수는 그 함수 내에서만 접근 할 수 있다.
  • 자바스크립트는 기본적으로 함수 스코프를 따른다.
  • var가 이에 해당한다.
• 블록 스코프 (Block-level Scope)
  • 선언된 블록 내에서만 접근 할 수 있다.
  • for문, if문, switch문 같이 {,} 블록이 생성되는 경우를 말한다.
  • let과 const가 이에 해당한다.

렉시컬(=정적) 스코프 (Lexical(=Static) Scope))

함수가 어디서 호출되었는지가 아니라 어디서 선언하였는지에 따라 상위 스코프를 결정되는 것

var x = 1; // global

function first() {
  var x = 10;
  second();
}

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

first(); // 1
second(); // 1

함수 선언을 기준으로 상위 스코프가 결정되기 떄문에,

함수 second의 상위 스코프는 전역 스코프이고, 스코프 체인에 의해 전역 변수 x를 할당받는다.

키보드 이벤트

마우스 이벤트

폼 이벤트

input event와 change event의 공통점

type이 checkbox인 경우, 체크하거나 해제할 때마다 이벤트 발생

type이 radio인 경우, 요소가 체크될 때만 이벤트 발생

input event와 change event의 차이점

텍스트 입력의 경우,

input event는 글자가 수정될 때마다 발생하고

change event는 수정 후 커서 포커스가 밖에 있을 때 발생

이벤트 리스너(Event Listener)

이벤트가 발생했을 때 이를 잡아내고, 지정된 함수를 실행하는 것을 Event Hanlder라 부른다.

자바스크립트에서는 세 가지 방법으로 이벤트를 잡아낸다.

❌Inline Event Handler

사용하지 않기로 하자

<button onclick="alert("Hello")"> 버튼 </button> 

우선 HTML 파일에 JavaScript를 동시에 작업해야하기 때문에 가독성이 나빠지며,

100개의 버튼이 있으면 100개의 속성을 입력해야해서 유지보수 또한 비효율적이다.

Event Handler Properties

효율적이진 않지만 사용할만하다.

btn.onclick = ( ) => {alert("Hello")};

HTML의 속성은 property를 통해 접근할 수 있다.

이를 이용하면 인라인이 아니어도 script 파일에서 직접적으로 이벤트를 적용할 수 있다.

하지만 property를 이용하면 하나의 이벤트에 두 가지 함수를 실행할 수 없다는 단점이 있다.

element.onclick = function1; //(x)
element.onclick = function2; 

‼️addEventListner

가장 권장되는 방식이다.

const btn = document.querySelector("button");

btn.addEventListener("click", () => {
    alert("Hello");
})

이 메소드는 두 개의 매개변수를 가지는데,

첫 번째는 어떤 이벤트가 발생하면 함수를 실행할지를 나타내는 문자열이고

두 번째는 이벤트 발생 후 실행될 콜백 함수이다.

추가로 하나의 이벤트에 두 개 이상의 Listener를 등록할 수 있다.

btn.addEventListener("click", functionA);
btn.addEventListener("click", functionB);

이미 등록된 listener를 삭제하는 방법도 있다.

btn.removeEventListener("click", changeBackground);

Event Object

event handler를 사용하다보면 콜백 함수에 event evt e 를 매개변수로 사용하는 경우가 있는데 이를 이벤트 객체라고 부른다.

처음부터 handler에 바로 주어지며, 이 객체는 여러 기능과 정보를 담고 있다.

가장 많이 쓰는 예로는 아래와 같이 있다.

Event Bubbling & Capturing

이벤트가 자식으로부터 부모로 위임되는 것을 Bubbling이라고 하고,

부모로부터 자식으로 위임되는 것을 capturing이라고 부른다.

Bubbling(버블링)

<body>
  <div id="container">
    <button>Click me!</button>
  </div>
  <pre id="output"></pre>
</body>

const output = document.querySelector("#output");
function handleClick(e) {
  output.textContent += `You clicked on a ${e.currentTarget.tagName} element\n`;
}

const container = document.querySelector("#container");
const button = document.querySelector("button");

document.body.addEventListener("click", handleClick);
container.addEventListener("click", handleClick);
button.addEventListener("click", handleClick);

body, container, button 모두 click event를 가지고 있는데, 버튼을 클릭하면

You clicked on a BUTTON element You clicked on a DIV element You clicked on a BODY element

자식부터 부모 순으로 이벤트가 발생하는데

이를 비눗방울이 떠오르는 것처럼 표현하여 bubbling이라 말한다.

버블링을 강제로 중단시키고 싶다면, event.stopPropagation()을 이용하면된다. 하지만 꼭 필요한 경우가 아니라면 사용하지 않는 것이 좋다.

• 자바스크립트 코드가 내부적으로 실행되는 환경이다
• 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

실행 컨텍스트의 종류

• 전역 실행 컨텍스트(Global Execution Context) :
  • 전역에 존재하는 소스코드를 실행한다.
  • 함수 안에서 실행되는 코드가 아니라면 모두 여기서 실행된다고 보면 된다.
  • 브라우저의 경우, window 객체가 이에 해당한다.
• 함수 실행 컨텍스트(Function Execution Context) :
  • 함수 내부에 존재하는 소스코드를 실행한다.
  • 선언된 함수가 호출이 될 때 생성이 되고, 함수가 종료되면 소멸된다.
• Eval Function Execution Context :
  • 빌트인 전역 함수인 eval 함수로 실행되는 소스코드를 실행한다.

실행 컨텍스트의 단계

자바스크립트 엔진은 소스 코드를 두 가지 과정으로 나누어 처리한다.

기본적으로 가장 먼저 전역 실행 컨텍스트를 생성한다. (window 객체)

Creation Phase

1. 메모리에 변수와 함수를 저장한다.
2. 변수는 undefined를 값으로, 함수는 함수 참조를 저장한다.

Excution Phase

1. 위에서 아래로 코드를 순차적으로 실행한다.
2. 변수가 초기화 또는 할당되면 값을 넣는다.
3. 함수 선언식은 건너뛰고, 함수가 호출되면 함수 컨텍스트를 생성한다.

1. 함수 내의 변수나 내부함수는 함수 컨텍스트 내부에 저장된다.
2. 함수가 종료되거나 값을 반환하면 함수 컨텍스트는 종료된다.
3. 모든 코드가 끝이나면, 실행 컨텍스트 또한 종료된다.

이는 모든 실행 컨텍스트에서 동일하게 진행된다.

실행 컨텍스트의 구성

변수 객체(Variable Object)

• 함수의 인자, 변수, 그리고 선언된 함수들이 저장된다.
• 함수 인자는 해당 함수의 실행 컨텍스트 안에서만 유효하며 함수가 실행되는 동안에만 존재한다.

스코프 체인(Scope Chain)

• 현재 실행 컨텍스트에서 접근할 수 있는 변수들의 구조
• 내부 함수에서 변수를 탐색할 때, 함수의 계층적 구조에 따라 내부 함수부터 외부 함수, 전역 스코프를 단계적으로 탐색하는 과정

this binding

• this는 현재 컨텍스트를 가리킨다.

콜 스택(Call Stack)

• 실행 컨텍스트는 콜 스택이라는 자료 구조에 의해 관리된다.
• 함수가 실행되면 해당 함수에 대한 실행 컨텍스트를 생성한 뒤 콜스택에 담는다.
• LIFO(Last-In-First-Out)

function funcA(m,n) {
    return m * n;
}

function funcB(m,n) {
    return funcA(m,n);
}

function getResult(num1, num2) {
    return funcB(num1, num2)
}

var res = getResult(5,6);

console.log(res); // 30

1. 가장 먼저 전역 실행 컨텍스트가 생성된다.
2. funcA, funcB, getResult 함수와 변수 res가 메모리에 저장된다. [Creation Phase]
3. getResult() 함수가 호출되고, 함수 실행 컨텍스트가 콜 스택에 push된다. [Excution Phase]
4. 내부 함수 funcB()가 호출되고, 콜 스택에 push된다.
5. 내부 함수 funcA()가 호출되고, 콜 스택에 push된다.
6. 각 함수의 실행이 종료되면 반환값을 상위 함수에 전달하고, 실행 컨텍스트는 pop되어 사라진다.
7. 모든 함수 실행 컨텍스트가 종료되면 변수 res에 최종 반환값이 저장되고 이를 출력한다.
8. 마지막으로 페이지를 나가거나 브라우저를 종료하면 전역 실행 컨텍스트가 종료된다.

참조

https://www.datoybi.com/execution-context/

https://www.nextree.io/execution-context/

https://www.freecodecamp.org/news/how-javascript-works-behind-the-scene-javascript-execution-context/

/* html */
<div class="margin_collapse">
   <div class="block_box">Block</div>
   <div class="block_box">Block</div>
   <div class="block_box">Block</div>
</div>

/* css */
.block_box {
    width: 100px;
    height: 100px;
    margin: 50px;
    border: 1px solid #000;
    text-align: center;
}

위와 같이, 세 개의 div 요소에 margin 값을 똑같이 50px로 주었는데 결과를 보면

margin의 범위가 합쳐져 100px이 아닌 50px만큼 떨어져 있는 것을 확인할 수 있다.

이 현상을 마진 병합(margin collapsing)이라고 한다.

Block 타입 요소들이 수직 방향으로 배치될 때 발생하는데 상위 요소와 하위 요소의 margin이 겹칠 경우, 둘 중 더 큰 값만 적용되고 작은 값은 무시된다.

특징

1) 수직 방향일 때만 발생한다.

2) 오직 인접한 요소들 사이에서 발생한다. -</br>태그가 요소 사이에 끼어있다면 보이지 않더라도 병합이 발생하지 않는다.

3) 두 margin 사이에 border, padding, inline 컨텐츠, height, min-height, max-height 중 하나라도 존재한다면 발생하지 않는다.

같은 방식으로 부모 요소에 위의 컨텐츠가 단 하나라도 없는 경우, 부모의 margin과 자식의 margin이 병합되고 병합된 여백은 부모 요소 바깥에 위치한다.

<style>
  p {
    margin-top: 48px;
    margin-bottom: 48px;
  }
</style>

<div>
  <p>Paragraph One</p>
</div>
<p>Paragraph Two</p>

5) 같은 방향의 margin끼리도 병합될 수 있다.

<style>
  .parent {
    margin-top: 72px;
  }

  .child {
    margin-top: 24px;
  }
</style>

<div class="parent">
  <p class="child">Paragraph One</p>
</div>

6) 3개 이상의 margin 도 병합될 수 있다.

7) 음수 margin이 병합될 때는 절대값이 더 큰 값만 적용된다.

8) 만약 음수와 양수 margin이 병합된다면 서로 상쇄된 값이 남는다.

참조

MDN_Web_Docs

https://www.joshwcomeau.com/css/rules-of-margin-collapse/