면접 예상 질문

HTML

• 일반적으로 CSS 태그를 태그 사이에 위치시키고, JS 태그를 태그가 끝나기 직전에 위치시키는 이유가 무엇인가요? DOM : HTML 을 한줄 씩 읽으면서 생성 CSSOM : 코드를 다 읽고나서 생성 렌더트리 : DOM + CSSOM HTML 파싱 중 <link> 를 만나면 병렬적으로 파싱 ⇒ 렌더링 속도 상승, 자원 절약 → 파싱은 동시에 진행되지만 렌더링은 CSSOM DOM 완성 뒤에 → CSS 속성이 파일 뒤에서 추가, 수정될 수 있기 때문 <script> 를 만나면 HTML 파싱이 일시정지 → DOM 이 완성된 후, JS 파일을 다운로드 할 수 있도록

• <script> <script async> <script defer> 태그들의 차이점은 무엇인가요? <script> : HTML 파싱 일시중지 후, JS 다운로드 <script async> : HTML 파싱과 동시에 JS 다운로드. JS 준비 시, HTML 파싱 일시중지 후 즉시 실행 <script defer> :HTML 파싱과 동시에 JS 다운로드. HTML 파싱 완료 후 JS 실행

• 시맨틱 태그(sementic tag) 에 대해 설명하세요. 태그의 목적과 의미를 브라우저와 개발자에게 명확하게 설명하는 태그 - 검색엔진의 지표로 활용SEO - 웹 접근성 - 가독성

DOM

• 개발자도구를 많이 사용하셨다면 주로 어떤 용도로 사용했나요? - Performance 브라우저 내부의 동작 측정 (페이지 로드, 렌더링 과정 등) - Elements HTML, CSS 확인, 수정 가능 - Console 간단한 JS 코드를 실행 가능, 디버깅 가능, 현재 DOM 조작 가능 - Application LocalStorage , SessionStorage , Cookie 의 데이터 확인, 조작 가능 쿠키: 서버가 클라이언트에게 전송, 조작 - Network 네트워크 작업의 상세 내용 확인 가능

• 웹팩과 바벨의 역할에 대해서 설명하세요. 웹팩 JS 어플리케이션을 위한 정적 모듈 번들러. 의존성 있는 모듈을 하나의 파일로 통합 → JS 파일 다운로드 1번으로 압축 (네트워크 병목 현상 해결) → 모듈 단위 개발 가능 바벨 JS 코드 변환기(트랜스파일러) → 구형 웹 브라우저를 지원

• event.preventDefault() 의 역할이 무엇인지 설명하세요. 기본으로 정의된 이벤트를 작동하지 못하게 막음

• intersection Observer API가 무엇인지 설명하세요. 관찰하고자 하는 타겟 요소가 최상위 뷰포트의 교차영역에서 변경이 발생할 때마다 실행될 콜백 함수를 호출 → scroll 이벤트를 대체 : scroll 이벤트는 단시간에 너무 많이 호출되어 DOM 조작 등의 무거운 이벤트 수행이 어려움

• Bundling이 무엇이며 왜 필요한가요? 여러 파일, 모듈을 묶어줌 - 단일화로 네트워크 비용 감소 - development, production 모드 지원으로 코드 난독화, 압축, 최적화 가능 - 로더를 통해 하위 브라우저 지원가능

• 이벤트 위임이 무엇인가요? 상위 엘리먼트에서 하위 엘리먼트의 이벤트를 제어

• 이벤트 버블링이란 무엇이며 막을 수 있는 방법은 무엇인가요? 특정 이벤트가 발생했을 때, 해당 이벤트가 상위 요소들까지 전파되는 특성 e.stopPropagation() 으로 중단가능 → 사이트 분석, 이벤트 분석 등도 막힘(비효율적) 차라리 커스텀 이벤트로 제어하자

• window.requestAnimationFrame(callback) 의 역할이 무엇인지 설명하세요. 비동기 함수로 브라우조가 실행시기를 결정하여 스스로 반복해서 호출하지 않음

• performance API가 무엇인지 설명하세요. 애플리케이션 모니터링 메서드 - performance.now() : 페이지 로드 후 경과 시간(밀리세컨드) - performance.mark(name) : 코드의 특정 부분을 실행하는 데 걸린 시간 마킹 - performance.measure(name, start, end) : 코드 내 특정 구간을 마킹 & 측정 측정값은 performance entry buffer 에 저장 - performance.getEntries() : 버퍼에 저장된 모든 값 - performance.getEntriesByName(name) : 버퍼에 저장된 특정 값 - performance.getEntriesByType(type) : 버퍼에 저장된 값 중 특정타입

JavaScript 기본

• 스코프에 대해서 설명하세요. 변수의 수명을 결정하고 확인할 수 있는 범위 - 전역 스코프 : 최상단 스코프로 이곳에서 선언된 변수는 전역변수로, 어떤 영역에서든 접근 가능 - 지역 스코프 : 전역 스코프에 포함되는 영역. 이곳에서 선언된 변수는 지역변수로 전역변수보다 우선순위가 높다.

• 클로져에 대해서 설명하세요. 내부함수의 변수가 외부함수의 변수에 접근할 수 있는 메커니즘 함수와 함수가 선언된 어휘적 환경의 조합을 통해 만들어진 매커니즘 클로저가 생성된 시점의 유효 스코프 내에 있는 모든 지역 변수로 구성 → 클로저가 포함된 내부함수에서 외부 함수의 스코프에 접근 가능 → 일반적으로 함수가 실행될 때 생성된 컨텍스트는 종료될 때 가비지 컬렉터에게 사라짐 → 하지만 클로저 패턴이 사용되면, 해당 내부함수의 변수가 언제 외부함수의 변수를 참조할지 알 수 없기때문에 가비지 컬렉터의 대상이 되지 않음

• 클로져의 사용 예제를 알려주세요. - 캡슐화 - 커링

• 변수 선언, 초기화, 할당의 차이점에 대해서 설명하세요. - 선언 : 스코프에 변수를 등록 - 초기화 : 실행 컨텍스트의 변수 객체에 메모리 할당(undefined) - 할당 : 초기화된 메모리에 다른 값을 넣음

• 호이스팅과 Temporal Dead Zone이 어떻게 연관되어있는지 설명하세요. 호이스팅 : var , let , const , function , class 등으로 선언된 모든 식별자가 코드 맨 위로 끌어올려지는 현상 var : 선언+초기화 let , const : 선언만. → 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 것이 TDZ

• ES6의 주요 변화점에 대해서 설명하세요. - let , const - template literal ⇒ ` ${ } ` - 화살표 함수 - 비구조화 할당 - ... : default parameter, rest parameter, spread syntax - for ... of : 반복가능한 객체에서의 반복문

• rest parameters와 spread syntax rest parameters : 매개변수 앞에 ... 를 붙여 정의한 매개변수 spread syntax : 개별적인 값들의 목록, iterable 만 사용 가능

• 원시 자료형, 참조 자료형 - 원시: 변경 불가능한 값 메모리의 고정 크기로 값을 저장하고 해당 주소를 직접 참조 ⇒ 불변성 - 참조: 객체 타입의 값(변경 가능한 값) 값이 할당된 메모리의 주소를 참조

• == vs === - == : 동등 비교 연산자 암묵적 타입 변환을 통해 타입을 일치시킨 후 값의 동등함 비교(느슨한 비교) - === : 일치 비교 연산자 값과 타입을 모두 고려하여 동등함을 비교(엄격한 비교)

• 자바스크립트에서 배열의 타입 → 객체 프로토타입 기반의 언어이기 때문 ? 프로토타입

• undefined와 null 그리고 undeclared의 차이 undeclared : 변수의 선언, 할당 X undefined : 변수를 초기화할 때 사용하는 값 null : 변수에 값이 없다는 것을 의도적으로 명시

• 깊은 복사와 얕은 복사의 차이에 대해서 설명하세요. 자바스크립트에서 깊은 복사를 하는 방법은 무엇인가요? 얕은 복사 : 가장 상위 객체만 새로 생성되고, 내부 객체들은 참조 관계인 경우. 주소값을 참조하기 때문에 원본-복사본 영향을 끼침 깊은 복사 : 내부 객체까지 모두 새로 생성된 경우. 원본, 결과본 각각 메모리 할당 - 재귀함수로 복사 - JSON.parse(JSON.stringify()) - 라이브러리 사용

• let, const, var의 차이와 각각의 사용 방법을 설명하세요. var : 재선언O, 재할당O, 선언 + 초기화. 함수 레벨 스코프 → 전역 변수 let : 재선언X, 재할당O, 선언 / 초기화. 블록 레벨 스코프 → 지역 변수 const : 재선언X, 재할당X, 선언 / 초기화. 블록 레벨 스코프 → 지역 변수

• 순수함수란 무엇인가요? 오직 함수의 입력만이 함수의 결과에 영향을 끼침 외부 상태 의존X → side-effect가 없음 조건 - 동일한 인자값을 받으면 항상 동일한 결과 반환 - 어디서 호출되든 동일한 결과 반환 - 외부에 영향을 주지도 받지도 않음