- Keyword
HTML / DOM / JavaScript 기본
- Quiz 정리
Q1.
일반적으로 CSS <link> 태그를 <head></head> 태그 사이에 위치시키고, JS <script> 태그를 <body> 태그 끝나기 직전에 위치시키는 이유?
A1.
브라우저에 나타나는 웹사이트를 보기 위해서는 Render Tree(DOM과 CSSOM을 합친 Tree)가 필요한데, 이 Render Tree를 빠르게 구성하여 사용자에게 UI화면을 보여줌으로써, 향상된 UX를 제공하기 위해 해당 위치에 위치시킵니다.
CSS부터 설명을 드리자면, 앞부분인 <head>에 CSS <link>를 삽입함으로써 불필요한 렌더링을 줄이고, HTML과 거의 동시에 렌더링 할 수 있습니다. 만약 <body> 뒷부분에 삽입한다면 HTML을 렌더링 한 후에 CSS를 렌더링 하기 때문에 불필요한 렌더링을 하게 됩니다.
JS 같은 경우에는 HTML parser가 parsing 하는 동안 <script> 태그를 만나면 다운로드하고 실행하는 동안 HTML parsing을 멈추는데, 이렇게 되면 브라우저 화면이 보이는 시간이 느려지기 때문에 HTML 요소를 모두 parsing 하고 난 뒤에 다운로드하고 실행할 수 있도록 하기 위해서 <body> 태그 맨 뒤에 두는 것입니다.
Q2.
<script>, <script async>, <script defer> 태그들의 차이점은?
A2.
HTML parsing을 하다가 <script> 태그를 만나게 되면 HTML parsing이 중단되고, 해당 script를 즉시 다운로드 후
실행되며, script 실행 완료 후 HTML parsing이 다시 시작됩니다.
<script async>는 HTML parsing 하는 동안 script를 병렬로 다운로드만 하며,
다운로드 이후에는 HTML parsing은 잠시 중단되고 먼저 다운로드된 script부터 실행합니다. 그래서 script 순서를
보장할 수 없습니다.
<script defer> 역시 async처럼 병렬로 다운로드만 하지만 실행은 HTML parsing이 끝난 뒤에 순서대로 실행됩니다.
Q3.
시맨틱 태그(sementic tag)란?
A3.
의미가 있는 태그라는 뜻으로 HTML5 때 도입되었으며, 단순히 <div>, <span> 등의 역할 구분하기 힘든 태그의 무분별한 사용을 막음으로써, 검색엔진의 HTML 분석이 수월해졌고, 유지보수 측면에서도 더 편해졌습니다.
예를 들어 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 등 태그 이름만 봐도 어떤 역할을 할지 직관적으로 파악이 가능합니다.
Q4.
웹팩과 바벨의 역할에 대해서 설명하세요.
A4.
웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러입니다. 여기서 모듈이란 자바스크립트 소스코드와 사용한 라이브러리를 말하며, 번들러는 의존성 있는 모듈을 하나의 파일로 통합시켜주는 도구입니다. 웹팩을 사용하는 이유는 웹페이지에서 자바스크립트 파일을 여러 번 다운로드하지 않도록 각기 다른 자바스크립트 파일을 하나로 만들어주고, 모듈 단위로 개발할 수 있게 해 주어 유지 보수성으로 효율적이기 때문입니다.
바벨은 자바스크립트 트랜스 파일러입니다. 최신 자바스크립트 코드가 특정 구버전 브라우저 환경에서 실행되지 않을 수 있기 때문에 호환 가능하도록 예전 버전으로 바꿔주는 역할을 합니다.
Q5.
event.preventDefault()의 역할이 무엇인지 설명하세요.
A5.
각 tag에 default로 정의된 event를 실행하지 못하게 막는 메서드입니다.
예를 들어 <a> 같은 경우 클릭 시 href를 통해 이동하는데 이때 preventDefault를 사용하여 이동하는 것을 막을 수 있습니다.
*Q6.
window.requestAnimationFrame(callback)의 역할이 무엇인지 설명하세요.
A6.
window.requestAnimationFrame(callback)은 HTML5의 Canvas, SVG 등의 애니메이션 구현을 위해 사용하는 함수입니다. 비동기 함수이며, 브라우저가 모니터의 주사율에 맞추어 함수 실행 시기를 결정하고, 스스로 반복해서 호출하지 않습니다.
window.setInterval 함수와 비슷해 보이지만, requestAnimationFrame 같은 경우에는 브라우저가 프레임 생성 초기 단계에 맞춰 애니메이션 코드를 실행시킴으로써 애니메이션이 더 부드럽게 동작합니다. 또한, callback 함수 인자로 timestamp값이 넘어오고, timestamp는 ms 단위이기 때문에 복잡한 공식을 이용하여 애니메이션을 구현해야 할 때 더 효율적입니다.
*Q7.
intersection Observer API가 무엇인지 설명하세요.
A7.
target 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 감지할 수 있는 API입니다.
이 API로 페이지 스크롤에 따른 이미지, 콘텐츠의 레이지 로딩과 무한 스크롤을 구현할 수 있습니다.
인자로는 callback 함수와 option(root, rootMargin, threshold)을 갖고, observe 하는 태그가 해당 option에 조건에 따라 반응하면 등록한 callback이 실행됩니다.
*Q8.
performance API가 무엇인지 설명하세요.
A8.
좀 더 정교하게 어플리케이션을 모니터링할 수 있게 도와주는 API입니다. 대표적인 메서드로는 performance.now()가 있습니다.
performance.now()를 통해 페이지를 로드한 이후 지난 시간을 ms 단위로 보여줍니다.
또한, performance.mark(name)와 performance.measure(name, start_mark, end_mark)가 있습니다.
둘 다 코드 내에 마킹하고 시간을 측정하는 메서드입니다.
Q9.
Bundling이 무엇이며 왜 필요한가요?
A9.
Bundling은 말 그대로 어떤 것들을 묶는다라는 뜻을 가지고 있습니다.
자바스크립트로 작업하다 보면 코드를 여러 파일로 나누게 될 경우도 있고, npm을 통해 다양한 모듈을 다운로드하여서 사용하게 되는 경우도 발생합니다.
이렇게 만들어진 여러 파일들, 모듈들을 묶어주는 것을 Bundling이라고 합니다. 대표적으로 웹팩이 있습니다.
Bundling이 필요한 이유는 각 파일들마다 서버에 요청하여 자원을 얻어오는 비효율을 줄이기 위해 한 번에 묶어서 요청하기 위해서 필요하고, 웹팩의 경우에는 주요 구성 요소 중 하나인 Loder가 일부 브라우저에서 지원되지 않는 자바스크립트 버전에 대해 호환을 가능하게 해 주기 때문에 사용합니다.
Q10.
이벤트 위임이 무엇인가요?
A10.
이벤트 위임은 각 하위 요소마다 eventHandler를 할당하지 않고, 요소의 공통 상위 요소에 eventHandler를 할당함으로써, 여러 하위 요소를 한꺼번에 다룰 수 있는 방법을 말합니다.
예를 들면 어떤 LIst에 요소들을 다룰 때 List안에 요소에 eventHandler를 할당하는 게 아닌 그 요소의 상위 요소인 List에 eventHandler를 할당하는 것이 있습니다.
Q11.
이벤트 버블링이란 무엇이며 막을 수 있는 방법은 무엇인가요?
A11.
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 요소들로 전달되어 가는 특성을 말합니다.
이벤트 버블링을 막는 방법은 event.stopPropagation()을 사용하여 막을 수 있습니다.
*Q12.
스코프에 대해서 설명하세요.
A12.
스코프는 변수를 탐색(참조)할 수 있는 유효 범위이며, Local Scope와 Global Scope로 나눌 수 있습니다.
Global Scope는 최상단의 scope로써 이곳에서 선언된 변수는 전역 변수이고, 어떤 영역에서든 접근이 가능합니다.
Local Scope에 선언된 변수는 지역 변수이며, 해당 scope와 하위 지역(중첩 함수)에서는 탐색이 가능하지만 더 상위 지역에서는 탐색이 불가능합니다.
*Q13.
클로저에 대해서 설명하세요.
A13.
클로저는 외부의 변수를 품고 있는 즉, 자신이 생성될 때의 렉시컬 환경을 기억하는 함수입니다.
이러한 현상이 나오는 이유는 함수가 호출되고 실행이 완료되어 함수가 스택에서 제거되더라도 이를 참조하는 대상이 남아있기 때문에 가비지 컬렉터에 의해 메모리 정리가 되지 않아 발생합니다.
Q14.
클로저의 사용 예제를 알려주세요.
A14.
캡슐화를 통해 변수를 private 하게 사용할 수 있습니다
또한, 여러 개의 인자를 가진 함수가 있을 때, 각각의 인자를 따로 받는 함수를 만드는 커링 기법을 이용하여 마치 템플릿 함수처럼 사용할 수 있고, 고정값을 넣어 재사용할 수도 있습니다.
Q15.
변수 선언, 초기화, 할당의 차이점에 대해서 설명하세요.
A15.
자바스크립트에서의 변수 선언은 실행 컨텍스트의 변수 객체에 변수를 등록하는 단계입니다.
이 변수 객체는 스코프가 참조하는 대상이며, 이 단계에서 호이스팅이 일어납니다.
초기화는 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계입니다.
var 같은 경우에는 선언과 초기화가 동시에 일어나서 할당 전에 undefined로 출력됩니다.
할당은 초기화된 메모리에 다른 값을 넣는 것을 뜻합니다.
Q16.
호이스팅과 Temporal Dead Zone이 어떻게 연관되어있는지 설명하세요.
A16.
호이스팅은 마치 변수를 최상단에 선언한 듯한 상태로 만드는 것이며, TDZ는 let과 const에서 발생하며,
var같은 경우에는 선언과 초기화가 동시에 일어나 참조를 하면 undefined로 출력되지만, let과 const는 선언과 초기화가 동시에 일어나지 않기 때문에 초기화 전까지 let과 const를 참조를 하게 되면 reference error가 발생하고 초기화를 하게 되면 error가 발생하지 않는데 이렇게 초기화전까지의 상태를 Temporal Dead Zone이라고 부릅니다.
Q17.
ES6의 주요 변화점에 대해서 설명하세요.
A17.
class를 도입하여 쉽게 class를 만들어 객체지향프로그래밍을 할 수 있게 되었고,
기존 var의 함수 레벨 스코프에서 let, const를 추가함으로써, 블록 레벨 스코프를 이용하여 변수의 혼란을 줄였고,
백 틱(`)과 ${}를 이용한 템플릿 리터럴 표기법이 추가 되었습니다.
또한, arrow function을 통해 함수를 더 간편하게 활용할 수 있게 되었고, 비구조화 할당을 통해 배열로 묶어서 변수를 선언하거나 변수를 전달 받을 수 있고, 매개 변수의 기본값을 정의해주는 default parameter, 매개변수를 배열로 묶어주는 rest parameter, 배열을 "..."을 이용하여 원소로 해체해주는 spread syntax 문법이 생겼습니다.
for ... of 같이 배열 같이 반복간으한 객체에서 그 길이에 맞게 각 속성값에 대한 반복문을 실행하는 문법도 도입되었습니다.
Q18.
원시 자료형과 참조 자료형이 무엇인가요?
A18.
원시 자료형은 데이터 타입 중 변경이 불가능한 값(immutable value)을 말합니다.
원시 자료형은 string, number, boolean, undefined, null, symbol 이렇게 6가지가 있고, 이런 원시 자료형은 stack에 생성 되고 변수가 할당 될 때, 메모리의 고정 크기로 값을 저장하고 해당 주소를 직접 참조합니다.
참조 자료형은 객체 타입의 값이며 변경 가능한 값(mutable value)을 뜻합니다.
원시 자료형이 아닌 모든 자료형을 참조 자료형이라 부르며, 대표적으로 객체, 배열, 함수가 있습니다.
참조 자료형 변수는 heap에 생성되고 heap 메모리의 값은 값이 할당된 메모리의 주소를 참조합니다.
Q19.
== vs === 의 차이는 무엇인가요?
A19.
== (동등 비교 연산자)는 값으로 비교하며, 암묵적 타입 변환을 통해 타입을 일치시킨 후 비교하는 느슨한 비교 연산자입니다.
=== (일치 비교 연산자)는 값과 타입을 모두 고려하여 비교하는 엄격한 비교 연산자입니다.
Q20.
자바스크립트에서 배열의 타입은 무엇인가요?
A20.
자바스크립트는 원시 자료형을 제외하고는 전부 객체(object)로 이루어져 있습니다. 그 이유는 자바스크립트는 프로토타입 기반의 언어이기 때문입니다.
프로토타입은 자신을 만들어낸 객체의 원형이라고 말할 수 있습니다.
Q21.
undefined와 null 그리고 undeclared의 차이
A21.
undefined는 원시 자료형으로 선언 이후 값이 할당되지 않은 상태입니다.
null도 마찬가지로 원시 자료형으로 어떤 값이 의도적으로 비어있음을 표현합니다. 명시적으로 할당한다는 점에서 undefined와 다릅니다.
undeclared는 접근 가능한 스코프 내에 변수 선언조차 되어있지 않은 상태를 말합니다. 변수 타입은 undefined 라고 반환되어 브라우저가 오류 처리를 하지 않도록 도와줍니다.
Q22.
rest parameters와 spread syntax의 차이는 무엇인가요?
A22.
rest parameters는 매개 변수 이름 앞에 세개의 점을 붙여 정의한 매개 변수를 의미합니다.
함수로 전달된 인수들의 목록을 배열로 만들 때 사용합니다. 여러 매개 변수를 사용할 시에는 반드시 마지막 파라미터로 사용해야 합니다.
spread syntax는 점 세개를 이용하여 배열같이 여러개의 값들을 각 원소로 표현해줄 때 사용합니다. iterable하지 않은 객체에서는 사용할 수 없습니다.
Q23.
깊은 복사와 얕은 복사의 차이에 대해서 설명하세요. 자바스크립트에서 깊은 복사를 하는 방법은 무엇인가요?
A23.
깊은 복사는 원본과의 참조가 완전히 끊어져 각각의 메모리에 할당되는 것을 말하며, 쉽게 말해 값 복사라고 이해하면 됩니다.
깊은 복사를 하는 방법은 JSON.stringify()를 이용하거나 lodash 라이브러리를 사용하면 됩니다.
얕은 복사는 참조 복사라고 이해하면 되며, 참조를 복사했기 때문에 값을 수정하게 된다면 참조되어 있는 다른 객체에 영향을 미칩니다.
Q24.
let, const, var의 차이를 설명하세요.
A24.
var는 재선언, 재할당 모두 가능합니다.
let은 재선언이 불가능하지만 재할당은 가능합니다.
const는 재선언, 재할당 모두 불가능합니다.
var는 오로지 함수의 코드 블록만을 지역 스코프로 인정합니다.
반면 let, const는 모든 코드 블록(함수, if 문, for 문, while 문, try / catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프입니다.
Q25.
순수함수란 무엇인가요?
A.25.
순수 함수란 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다.
외부 상태에 의존하지 않고, 오직 매개 변수를 통해 함수 내부로 전달된 인수에만 의존해 반환 값을 만듭니다.
또한, 매개 변수로 전달된 값을 수정하지 않습니다.
순수 함수의 조건은 다음과 같습니다.
1. 동일한 인자 값을 받으면 항상 동일한 return 값을 반환합니다.
2. 어디서 호출되든 동일한 결과를 보여줍니다.
3. 외부에 영향을 주지도 받지도 말아야 합니다.
- 오늘 하루 느낀 점
오늘은 주어진 HTML / DOM / JavaScript 기본이라는 페이지에 나와 있는 질문들에 관한 공부 및 면접을 위한 나만의 언어로 만드는 작업을 하였다.
질문 내용을 보는데 이게 기본이었어?라고 생각한 내용도 은근히 있었다. 역시 기본기가 부족하다.
내 것으로 만들기에는 시간이 생각보다 많이 부족하였고, 질문 하나하나 깊게 보려다 보니 결국 모든 문제를 다 정리하지 못했다. 그래도 공부할 것들이 눈에 보이니 좀 느리더라도 차근차근 정리해 볼 예정이다.
Q 앞에 * 표시를 통해 더 자세히 공부해서 추후 블로그로 남길 것들을 정하였다.
교육 1일째라 OT도 하였고, 생각보다 여유 있게 진행한 것 같다.
모의 면접은 최악 중 최악이었다. 그동안 나는 면접을 어떻게 봐온 걸까? 반성하자.
오늘은 첫날이라 그렇고 이제 기업 과제를 하게 되면 이렇게 여유 있게 블로그를 쓸 수 있을지 잘 모르겠지만, 첫 단추부터 잘 끼워서 마지막 단추까지 잘 끼우길 바라본다.