HTML
- 일반적으로 CSS 태그를 head 사이에 위치시키고, script 태그를 body가 끝나기 직전에 위치시키는 이유?
HTML과 CSS는 한 줄씩 읽고 실행합니다. head 태그에 css를 위치시키면 HTML과 CSS를 동시에 렌더링 할 수 있게 되어 전체적인 렌더링 속도가 빨라집니다.
HTML이 한 줄 씩 읽고 실행하다가 script 태그를 만나면 js를 실행하게 되는데 이럴 경우 사용자에게 화면이 보이는 시간이 HTML 렌더링만 할 때보다 느려지기 때문에 HTML를 모두 파싱하고 js를 실행될 수 있도록 대부분의 경우 마지막에 위치시키는 것이 좋습니다. 만약, DOM에 접근할 일이 없고 가장 빠르게 실행하고 싶은 경우에는 head 태그 안에 위치시키는 것이 좋습니다.
- <script> <script async> <script defer> 태그들의 차이점?
script 태그는 즉시 HTML 파싱을 멈추고 js를 다운로드 및 실행합니다.
script async 태그는 js를 다운로드 명령 후 병렬로 수행하다가 다운로드가 끝나면 그 즉시 HTML 파싱을 멈추고 js를 실행합니다. 만약 의존적인 script 파일들을 여러 개 다운로드하는 도중이라면 실행 순서가 중요하므로 위험할 수 있습니다. 또한, js에서 DOM을 조작한다면 HTML 파싱이 완전히 끝나지 않았기 때문에 위험할 수 있습니다.
script defer는 모든 script 파일들이 병렬로 다운로드되고 HTML이 파싱된 이후에 실행되므로 의존적인 script 파일들을 실행할 때도 안전합니다.
- 시맨틱 태그 (sementic tag) 란
태그 이름에 의미를 부여한 태그를 말합니다. div나 span같은 태그는 감싸져 있는 내용이 뭔지 보기 전까지는 그 내용을 짐작할 수 없습니다. 하지만, header, nav, img 같은 시맨틱 태그는 태그 이름만 봐도 어떤 역할을 하는지 쉽게 유추할 수 있고 시각장애인들을 위해서도 중요한 지표로 활용됩니다.
DOM
- 개발자 도구로 활용할 수 있는 것들?
DOM의 Element를 탐색하여 스타일을 적용하거나 간단한 js 코드 및 콘솔을 볼 수 있습니다. 또한, api 요청시 데이터가 잘 송수신됐는지 Network 탭을 통해 확인할 수 있으며 Application 탭에서 cookie, local storage, session storage을 확인하고 조작할 수 있습니다. React을 사용한다면 React Developer tools 등의 확장 프로그램을 설치하여 Component와 Profiler 등의 탭을 활용할 수 있습니다.
- 웹팩과 바벨의 역할?
웹팩은 여러 개의 파일을 하나로 합져주는 모듈 번들러입니다. 웹페이지에서 js 파일을 여러 번 다운로드하지 않아도 되게 하여 네트워크 부하를 줄여주고 모듈 단위로 코드를 짤 수 있게 도와줍니다. 바벨은 대표적인 트랜스파일러로 ES6 이상의 최신 문법을 브라우저에 제한받지 않고 사용할 수 있도록 구버전의 문법으로 변환시킵니다.
- event.preventDefault() 의 역할?
이벤트 발생시 기본적으로 실행되는 동작을 막습니다. 예를 들면, form에서 submit 역할을 하는 버튼 클릭 시 페이지가 새로고침 되거나 이동되는데 이것을 막을 수 있습니다.
- window.requestAnimationFrame(callback) 의 역할?
애니메이션 구현을 위한 함수로서 모니터의 주사율에 따라 프레임을 설정하므로 자연스러운 애니메이션을 위해 사용할 수 있습니다.
- intersection Observer API란?
기존에는 어떤 위치에 진입시 액션을 발생시킬 때, scroll 등의 이벤트를 리스닝하였습니다. 그러나 이런 방식은 의도치 않은 잦은 호출을 발생시킬 수 있고 그 배경으로 intersection observer api가 등장하였습니다. 이것은 target 요소가 viewport나 특정 요소에 어느 정도 교차해야 이벤트를 발생시킬지 설정하고 콜백 함수를 등록하여 동작시킬 수 있습니다.
- performance API란?
정교하게 어플리케이션의 성능을 추적할 수 있는 api입니다. 대표적으로는 now 메서드가 있습니다. 이것은 현재 시점이 페이지가 로드되고 얼마나 지났는지를 쉽게 알게 해 줍니다. 또한, mark 메서드와 measure 메서드를 함께 사용하면 mark를 시작하고 끝낸 시점까지 시간이 얼마나 걸렸는가를 쉽게 측정할 수 있습니다.
- Bundling이 무엇이며 왜 필요한가?
번들링은 모아서 묶어준다는 개념입니다. 많은 파일들을 일일이 다운로드하면 네트워크 부하 때문에 속도 저하가 올 수 있고 변수나 함수의 이름 충돌 등이 발생할 수 있습니다. 이를 개선하고자 모듈들을 묶어서 리소스를 최적화해줌으로써 성능 향상을 기대할 수 있습니다.
- 이벤트 위임이란?
하위 요소마다 이벤트를 리스닝하지 않고 상위 요소에 이벤트 리스너를 추가한 후 하위 요소들의 이벤트를 제어하는 방식입니다. 과도한 이벤트 리스닝을 막을 수 있고 동적으로 추가된 하위 요소에도 추가 설정 없이 이벤트를 발생시킬 수 있습니다.
- 이벤트 버블링이란 무엇이며 막을 수 있는 방법은?
하위 요소에서 이벤트 발생시 상위 요소에도 이벤트가 전파되어 발생하는 현상을 뜻합니다. 이것은 의도치 않은 이벤트를 발생시킬 수 있으므로 event.stopPropagation 메서드로 이벤트 전파를 막을 수 있습니다.
JavaScript
- 스코프란?
변수가 유효할 수 있는 범위를 뜻합니다. 대표적으로 local scope와 global scope가 있습니다. local 스코프는 변수가 선언된 블록에서만 유효한 반면, global scope는 해당 파일의 어디에서나 유효합니다.
- 클로져란?
내부 함수에서 외부 함수의 변수에 접근할 수 있는 것을 말합니다. 이것은 함수를 정희할 때의 스코프가 접근 가능한 모든 변수이므로 가능하게 됩니다. 일반적으로 함수는 호출이 끝나면 가비지 컬렉션에 의해 메모리 정리가 되지만 클로저는 언제 외부 스코프의 변수를 참조할지 모르기 때문에 계속 메모리에 유지합니다. 따라서 클로저의 남발은 오히려 불필요한 메모리 공간의 차지와 그로 인한 메모리 누수를 발생시킬 수 있으므로 주의해야 합니다.
- 변수 선언, 초기화, 할당의 차이점?
변수 선언은 해당 컨텍스트와 스코프에 변수를 등록하는 것입니다. 변수 초기화는 변수를 위한 메모리 공간을 만드는 것이며 초기값은 undefined가 됩니다. 변수 할당은 초기화된 메모리에 특정 값을 저장시키는 것입니다.
- 호이스팅과 Temporal Dead Zone이 어떻게 연관되어있는지?
var는 호이스팅시 선언과 동시에 undefined로 초기화되는 반면, let과 const는 호이스팅시 선언만 될 뿐 초기화가 이루어지지 않습니다. 이 단계에서 TDZ에 들어가게 됩니다. 즉, 선언은 되어있지만 초기화가 되지 않아 메모리가 준비되어 있지 않은 상태라는 뜻입니다. TDZ에 있는 변수를 호출하려고 하면 메모리에 없기 때문에 에러가 발생합니다.
- ES6의 주요 변화점?
arrow 함수, class, `(백틱)을 활용한 템플릿 리터럴 표기법, 비구조화 할당, 블록 스코프를 사용하는 let과 const, rest 파라미터, default 파라미터, for ... of 등이 있습니다.
- 원시 자료형, 참조 자료형이란?
원시 자료형은 immutable합니다. number를 예로 들면, let a = 6;로 a를 선언하고 a = 12;로 다시 값을 할당했을 때 이전에 할당했던 메모리가 아닌 새로운 메모리에 a의 값을 저장합니다. 이와 같은 특징을 가진 자료형은 number, string, boolean, undefined, null, symbol 6가지이며 이를 제외한 모든 자료형은 참조 자료형이며 변경 가능합니다.
== vs. ===
==은 느슨한 동등비교이고 ===은 엄격한 동등 비교입니다. ==은 암시적으로 같은 타입으로 변환하여 값을 비교하지만 ===은 값과 타입 모두가 일치하여야만 true를 반환합니다.
- 자바스크립트에서 배열의 타입은?
Object입니다. js에서는 number, string, boolean과 같은 원시 타입을 제외하고는 모든 것이 객체로 이루어져 있습니다. 그 이유는 js가 프로토타입 기반의 언어이기 때문입니다.
- undefined와 null 그리고 undeclared의 차이?
undefined는 값을 할당하지 않은 변수 즉, 변수를 할당한 메모리가 없습니다. null은 명시적으로 '없음'을 표현하기 위한 값입니다. undeclared는 변수 선언조차 되어 있지 않은 상태입니다. let으로 변수를 선언했지만 값을 할당하지 않은 경우에 바로 undeclared 상태에 있게 됩니다.
- rest parameters와 spread syntax
rest parameter는 매개 변수에 사용되며 인자로 전달된 값들을 배열화할 때 사용됩니다. spread syntax는 배열이나 객체같이 여러 값이 함께 있는 경우에 그것들을 개별 값들의 목록으로 만들어줍니다.
- 깊은 복사와 얕은 복사의 차이?
깊은 복사는 원본과 참조가 완전히 끊어져 하나의 값을 변경해도 다른 하나에 전혀 영향을 주지 않으며 원시 자료형이 동작하는 방식입니다. 얕은 복사는 가장 상위 객체만 새로 생성되고 그 안의 객체들은 참조 관계인 것을 말합니다. 이 경우 하나의 값을 변경하면 다른 하나도 변경됩니다. 완벽하게 깊은 복사를 하려고 한다면 재귀 함수를 통해서 가장 바깥의 객체가 없어질 때까지 얕은 복사를 진행하거나 JSON.stringify로 문자열로 바꿨다가 다시 객체로 바꾸는 방법이 있습니다. 라이브러리를 사용한다면 대표적으로는 lodash가 있습니다.
- let, const, var의 차이?
let은 블록 스코프로 변경 가능한 값을 할당하는 변수로 사용할 수 있습니다. const는 블록 스코프이지만 변경 불가능한 상수 값만 선언할 수 있습니다. var는 함수 스코프로 변경 가능합니다.
- 순수함수란?
오로지 매개변수에만 의존하여 로직을 처리하고 결과를 반환하는 함수를 말합니다. 매개변수를 변경하지 않고 인자로 받은 값을 온전히 사용하기 때문에 외부의 값의 변경에 따른 side-effect가 없는 것이 특징입니다.