.jpg)
Q. 웹팩과 바벨의 역할에 대해서 설명하세요.
- 웹팩
웹팩(Webpack)은 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 한다. 프로젝트를 개발하다보면 수많은 라이브러리들을 사용하게 되는데 빌드(build)라는 과정을 통해 하나의 파일로 만들어 준다.
모듈 단위로 개발하여 유지보수성을 높일 수 있다.
하나의 파일에 모든 자바스크립트 코드가 있다고 할 때 그 코드가 몇 천 라인, 몇 만 라인인지는 모르지만 우리가 수정해야 할 코드에 접근하는데 어려움을 느낄 수 있다. 그렇기 때문에 번들러를 사용하면 우리도 이해하기 쉽도록 코드를 모듈 단위로 구분해 가독성과 유지보수성을 효율적으로 개선할 수 있다.
이 외에도 여러 플러그인이나 트리 쉐이킹같은 기능을 사용해 코드를 압축, 최적화 할 수도 있다. 이만큼 번들러는 많은 기능을 제공한다. 번들러는 웹팩뿐만 아니라 rollup, parcel 등이 존재한다.
- 바벨
바벨(Babel)은 코드 변환기다. 바벨은 최신 자바스크립트 문법을 구형 브라우저에서도 돌릴 수 있도록 코드 자체를 변환시킨다. 바벨 공식문서에서는 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있다. 더 정확하게 말하면 트랜스파일러라고 말할 수 있다. (트랜스파일러는 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 언어로 변환하는 것을 말하며 컴파일러의 일종이다)
다른 언어와 달리 자바스크립트는 정말 많은 환경에서 실행된다. 웹 브라우저, NodeJS, Deno 등에서 실행되는데 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 자바스크립트 코드를 읽게 된다. 게다가 이렇게 실행되는 환경의 버전에도 자바스크립트는 영향을 받는다. 특정 버전 이상에서만 실행되는 코드가 있고 특정 브라우저에서는 실행되지 않는 코드도 있다. 그렇기 때문에 모든 자바스크립트 실행 환경에서 정상적으로 동작할 수 있도록 하려면 바벨이 필요하다.
Q. event.preventDefault() 의 역할이 무엇인지 설명하세요.
a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나, 창이 새로고침하여 실행된다. 이럴 때 preventDefault 를 통해 이러한 동작을 막아줄 수 있다.
주로 사용되는 경우는
-
a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
-
form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)
유효성 검사 등을 할 때 사용된다.
Q. intersection Observer API가 무엇인지 설명하세요.
Intersection Observer API의 사용법과 활용방법
Q. performance API가 무엇인지 설명하세요.
The Performance API is a collection of APIs used to measure:
Perfomance API는 측정하기 위해 사용되는 API들이다. 주로 성능을 측정하는 데에 사용된다.
- navigation timing — redirects, DNS look-ups, DOM loaded, page loaded, etc.
- resource timing — loading of specific page assets such as CSS, scripts, images, and Ajax calls
- paint timing — the point at which browser rendering starts, and
- user timing — custom measurements for your application, including performance.now()
How to Evaluate Site Speed with the Performance API
Q. Bundling이 무엇이며 왜 필요한가요?
모듈들의 의존성 관계를 파악하여 그룹화 시켜주는 작업을 뜻한다. 작업의 효율성을 위해 모듈로 분리한 것들을 합쳐주는 것이다.
Q. 이벤트 위임이 무엇인가요?
이벤트 위임이란 하위 요소마다 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식을 말한다.
