모의 면접준비한다고 급하게 이론을 공부했는데 너무 얕게 알고있던 것들이 많았고, 새롭게 배운내용들도 많앗다. 조금씩 업데이트 해 나가야겠다.
HTML / DOM / JavaScript 기본
HTML
1. 일반적으로 CSS 태그를 태그 사이에 위치시키고, JS 태그를 태그가 끝나기 직전에 위치시키는 이유가 무엇인가요?
- 일반적으로
<head>태그 사이에<link>태그를 넣는다.
해드 태그내에 링크태그를 넣으면, HTML과 CSS가 병렬적으로 동시에 렌더링 된다. 이는 사이트의 렌더링 시간을 빠르게한다. 만일 링크태그를 바디 뒷부분에 둔다면, 렌더링이 두번일어난다. 첫번재는 스타일이 적용되지 않은 HTML이고, 두번째는 스타일이적용된 최종 HTML요소가 보이게된다. 이는 재랜더링에의한 시간낭비가 심하고 스타일적용전 HTML이 보이게 되므로 UX에 좋지 않다. - 페이지 로딩을 막지않고, DOM이 생성된 후에 JS를 실행시켜야 코드가 재대로 실행 됨.
2. <script> <script async> <script defer> 태그들의 차이점은 무엇인가요?
-
<script>: 코드가 순서대로 읽히기 대문에<body></body>위에 script 태그를 위치시키면 스크립트 아래에 있는 DOM요소에 접근 불가능하여 스크립트를 이용한 각종 이벤트가 행위가 불가능해진다. 또한 스크립트는 용량이 비교적 크기때문에 사용자들은 스크립트가 다운로드되고 실행될동한 아래쪽 페이지를 볼 수 없다. 이를 방지하기위해 스크립트를 페이지 맨아래에 놓는 방법이있다. -> HTML 문서자체가 아주 큰경우 페이지가 아주 느려질 수 있다. -
<script async>: 비동기 스크립트라고 하며, 지연스크립처럼 독립적으로 동작한다. 스크립트 완료시점이 페이지 구성전이냐 후냐에 따라 DOMContentLoaded가 비동기 스크립트 실행 전 또는 실행 후에 발행할 수 있다. 그리고 스크립트 다운로드 순서에 따라 실행된다. 이를'loader-first order'라고 부른다. 페이지 로딩을 막지않아 콘텐츠가 바로 출력된다.
광고같이 독립적인 역할의 서드파티 스크립트를 현재 개발중인 스크립트에 통합할때 유용하다. -
<script defer>: 지연 스크립트라고 하며, 백그라운드에서 지연스크립트를 다운로드하고, 다운로드 도중 HTML 파싱이 멈추지 않음. 그리고 스크립트 실행은 페이지 구성이 끝날때까지 지연된다. 그리고 DOM이 준비된후 실행되지만 DOMContentLoaded이벤트 전에 실행된다.
지연스크립트또한 HTML에 추가된 순서대로 실행된다.
src속성이 없으면defer속성은 무시된다.
페이지 생성을 절때 막지않는다.
3. 시맨틱 태그(sementic tag) 에 대해 설명하세요.
<div>와 같은 기능을 수행하는 태그로, 해당 태그가 목적이나 의미를 가지도록 하는것이다. 이를 통해 웹페이지에서 데이터를 효율적으로 추출이 할 수 있도록 한다. 이밖에 페이지 전체 구성을 파악하는데 도움을 준다.
DOM
1. 개발자도구를 많이 사용하셨다면 주로 어떤 용도로 사용했나요?
디버깅가 오류메시지 확인이 주요용도였으며, 쿠기나, local storage에 데이터 저장/삭제 등을 검토하기위해 사용했습니다.
elements탭과 style탭을 이용해 배치나 디자인을 검토하는데 사용했습니다.
2. 웹팩과 바벨의 역할에 대해서 설명하세요.
웹팩: Build를 통해 코드실행에 필요한 모듈들의 의존성을 분석하여 하나의 파일로 만들어주는 역할을 한다.
바벨: 다양한 브라우저의 버전에 따라 코드가 다를 수 있는데 최신 자바스르립트 문법을 구형버전에서도 사용할 수 있도록 코드를 변환시켜준다. TS를 JS로 변환시키는 일도 한다.
3. event.preventDefault() 의 역할이 무엇인지 설명하세요.
태그의 기본동작을 해제거나, 어떤 이벤트의 기본동작을 실행하지 않도록 한다. 이벤트 흐름의 어떤단계에서 실행되더라도 이벤트가 취소된다.
4. window.requestAnimationFrame(callback) 의 역할이 무엇인지 설명하세요.
비동기 함수로, 애니메이션을 구현 하기위해 다음 리페인트가 진행되기 전에 해당 에니메이션을 업데이트 하는 함수를 호출하도록 한다. 브라우저는 모니터 주사율에 맞춰 함수를 실행하며, 반복을 위해선 재귀적으로 호출해주어야한다.
cancelAnimationFrame()을 사용해 멈추는것도 가능하다.
5. intersection Observer API가 무엇인지 설명하세요.
요소의 가시성을 탐지하여 특정 함수를 실행시키는 API로서,
생성자를 통해 실행되며, callback함수와 options을 인자로 받는다. option 조건에 따라 콜백함수가 실행되도록 한다. option은 {root, rootMargin, threshold}가있다.
6. performance API가 무엇인지 설명하세요.
performance API는 좀 더 정교하게 어플리케이션을 모니터링 할 수 있게 도와준다. 대표적으로 performance.now() 를 통해 페이지를 로드한 이후 지난 밀리세컨드를 보여준다. 시간정밀도는 5us 입니다.
7. Bundling이 무엇이며 왜 필요한가요?
묶는다는 개념으로 개발중 모듈화되었던 다양한 기능들을 하나의 파일로 묶어주는 기능이며, 이를통해 파일또는 모듈마다 서버에 요청하여 자원을 얻어올 필요가 없어지고, 여러개의 파일을 로딩할때보다 네트워크 소모가 적어진다. 그리고 모듈간의 변수 충돌 위험등이 감소하게 된다.
8. 이벤트 위임이 무엇인가요?
비슷한 방식으로 여러 요소를 다뤄야할때 사용된다. 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당하여 여러 요소를 다루는 방법이다.
이벤트 캡처링과 버블링을 활용하여 이벤트 위임을 구현할 수 있다.
9. 이벤트 버블링이란 무엇이며 막을 수 있는 방법은 무엇인가요?
한 요소를 클릭하면 해당요소의 이벤트부터 부모요소의 이벤트까지 순서대로 동작하는것으로 가장 최상단의 조상요소를 만날때까지 이과정이 반복된다. 막을수 있는 방법은 event.stopPropagation()을 통해 해당요소까지만 이벤트가 실행되고 상위요소로의 이벤트는 더이상 실행되지않도록 할 수 있습니다.
JavaScript 기본
1. 스코프에 대해서 설명하세요.
변수를 읽을 수 있는 범위로 블럭스코프, 전역스코프, 함수스코프가 있다. 전역스코프보다 블럭스코프나 함수스코프가 더높은 우선순위를 갖느다.
2. 클로져에 대해서 설명하세요.
외부 함수의 변수에 접근할 수 있는 내부함수입니다. 클로져 패턴이 사용된 경우 내부함수의 변수가 언제 외부함의 변수를 참조할지 알 수 없기때문에 외부함수가 종료되어도 가비지 컬렉션의 수집되상이 되지않아, 클로저 패턴을 남발하면 메모리 누수가 발생하여 퍼포먼서 저하를 야기 시킬수 있다.
3. 클로져의 사용 예제를 알려주세요.
function addNum(a) {
return function (b) {
return a + b;
};
}
const add7 = addNum(7);
add7(3); // 10
add7(6); // 164. 변수 선언, 초기화, 할당의 차이점에 대해서 설명하세요.
변수 선언: 변수를 선언하면 자바스크립트는 변수 사용에 문제가 없는지 살피고 문제가 없으면 변수를 등록한다.
초기화 : 변수에 값을 저장할 메모리공간을 할당하고, 값으로 undefined를 할당한다.
할당: undefined가 저장된 공간에 새로운 변수를 교체하여 저장한다.
5. 호이스팅과 Temporal Dead Zone이 어떻게 연관되어있는지 설명하세요.
: 호이스팅은 변수나 함수선언시 최상위에 선언된 것 처럼 행동하는 것이다. let은 선언과 초기화가 분리되어 이루어지는데 초기화단계는 실제 코드에 도달해야 실행되게된다. 그렇기 코드도달전에 변수를 사용하면 ref error가 발생한다.
const는 선언과 할당이 동시에 이루어지기 때문에 선언코드 이전에 ref error를 발생시킨다. ref error 발생시키는 영역이 TDZ이다.
6. ES6의 주요 변화점에 대해서 설명하세요.
변수선언시 let, const가 등장하여 블록스코프범위가 적용가능해졌다.
화살표함수, rest/spread syntax 사용 가능.
7. 원시 자료형, 참조 자료형
원시자료형은 크기에 상관없이 하나의 데이터만 담는 것을 말하며,
객체가 아니면서 method를 갖지않는 타입이다.
string, number, boolean, undefined, null, symbol.
8. == vs === 의 차이는 무엇인가요?
이 두개의 비교 연산자는 비교하는 엄격성의 정도가 다릅니다.
동등 연산자, 일치연산자
9. 자바스크립트에서 배열의 타입
typeof 를 사용하면 object, Array.isArray() 를 사용하여 배열인지 아닌지 boolean값으로 확인이가능하다.
10. undefined와 null 그리고 undeclared의 차이
undefined: 값이 할당되지 않은 상태
null: 'null'이라는 값이 할당된 상태
undeclared: 변수가 선언되지 않은 상태
11. rest parameters와 spread syntax
rest parameters: 함수가 정해지지 앟ㄴ는 매개변수를 배열로 받는것,
function rest(a, b, ...restParameter){return;}의 형태로 사용한다.spread syntax: 배열이나, 문자를 0개 이상의 키-값쌍의 객체로 확장 시키는 문법
12. 깊은 복사와 얕은 복사의 차이에 대해서 설명하세요.
참조 자료형을 복사할때 깊은 복사와 얕은 복사의 개념이 나온다.
깊은 복사는 참조자료형의 실제값을 새로운 메모리 공간에 복사하는 것을 의미하고, 얕은 복사는 그 주소 값을 복사한다는 의미이다.
13. 자바스크립트에서 깊은 복사를 하는 방법은 무엇인가요?
새로운 객체를 만들어 각각의 값들은 추가해주는 방법이 있다.
14. let, const, var의 차이와 각각의 사용 방법을 설명하세요.
var는 함수스코프, let과 const는 블럭스코프를 갖는다.
var는 재선언, 재할당이 가능하고
let은 재선이 불가하고, 재할당이 가능하고,
const는 재선언, 재할당이 불가능하다.
15. 순수함수란 무엇인가요?
동일한 인자가 주어졌을때 항상 같은 값을 리턴하고, 외부상태를 변경하지 않는 함수
16. (Optional) 버퍼, 스트림
버퍼와 스트림은 파일을 읽거나 쓸 때 사용하는 방식
버퍼는 용량이 큰 데이를 특정 단위마큼 잘라서 전송하는 개념이고, 스트림은 버퍼를 전송하는 연결 통로이다.
17. (Optional) 화살표 함수 ***
일반함수와 달리 this가 자신이 종속된 인스턴스를 가르킨다.
생성자함수로 생성이 불가
(el) => {return el} 형태의 함수 인자가 하나이면 소괄호를 생략할 수 있고
el => {}, 함수내용이 return 뿐이라면 중괄호와 return을 생략 할 수 있다. el => el
