DOM 개념 정리

번들러(Bundler)란 무엇이며 왜 필요한가?

다이나믹한 상호 작용이 많은 대규모 웹 서비스들이 생겨나면서 수백 개의 JS 파일을 관리하기 어려워 다음과 같은 문제가 있다.

1. 전역 범위를 갖는 수백 개의 자바스크립트 파일의 중복 선언
2. 많은 자바스크립트 파일로 인한 로딩
3. 수동적인 웹 개발 루틴 작업 (파일, 이미지 압축 / CSS 전처리기 변환 등)

이러한 문제를 해결하기 위해 번들러(Bundler)가 등장했다.

번들러(Bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(버들) 도구를 의미한다.

번들러를 사용하면

1. 모듈 단위의 코드 작성
2. 네트워크 병목 완화(최적화)
3. 웹 개발 작업 자동화

번들러는 웹팩(Webpack), Rollup, Parcel, Browserify 등이 있다.

웹팩과 바벨의 역할

웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러이다. 모듈이란 자바스크립트 소스코드와 라이브러리이며 번들러는 의존성 있는 모듈을 하나의 파일로 통합시켜주는 도구이다.

웹팩의 역할은?

자바스크립트 코드의 가독성과 유지보수성을 위해 모듈 단위로 개발하는데, 웹 페이지를 로드할 때마다 각각의 모듈을 따로 다운로드 받는다면 네트워트가 지연될 수 있다. 하지만 웹팩은 각기 다른 자바스크립트 파일을 하나로 만들어, 한 번에 다운로드 받을 수 있게 해주기 때문에 모듈 단위 개발의 단점을 해소한다.

바벨은 자바스크립트 트랜스파일러이다. 트랜스파일러는 하나의 언어로 작성된 소스코드를 비슷한 수준의 다른 언어로 변환하는 것을 의미한다.

자바스크립트는 다양한 웹 브라우저에서 사용되며, 각각의 웹 브라우저는 다른 버전의 자바스크립트 엔진을 사용한다. 그래서 모든 자바스크립트 실행 환경에서 정상적으로 동작하게 하기 위해서는 바벨을 사용해 최신 자바스크립트 문법을 레거시 문법으로 변경시켜준다.

event.preventDefault() 의 역할

기본적으로 정의된 이벤트를 작동하지 못하게 하는 메서드

이벤트 위임이 무엇인가?

이벤트 위임은 엘리먼트마다 핸들러를 할당하지 않고, 공통의 부모 엘리먼트에 이벤트 핸들러를 하나만 할당해도 여러 요소를 한번에 다룰 수 있는 방법이다.

상위 태그를 이벤트 리스너에 연결 하고, 하위에서 발생한 클릭 이벤트를 감지 하여 처리 하는 이벤트 위임 으로 해당 문제를 해결할 수 있습니다.

이벤트 버블링이란 무엇이며 막을 수 있는 방법은 무엇인가?

특정 엘리먼트에서 이벤트가 발생했을 때 해당 이벤트가 상위 엘리먼트로 전파되어 가는 특성을 의미한다.

이벤트 객체 메서드인 event.stopPropagation() 을 사용해 이벤트 전파를 막을 수 있다.

DOM으로 HTML 조작하기
Node와 Element의 차이
children vs childNodes
append() vs appendChild()
같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?
remove() vs removeChild()

DOM 바로가기

createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어하기

createDocumentFragment를 활용한 퍼포먼스 개선 바로가기