Github에서 유명한 자바스크립트 면접 질문들을 정리해보고 있습니다.
원본 , 번역을 참고 하였습니다.

일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇인가요?

전역 스코프에 저장되어 있는 값들은 어디에서나, 누구나 사용 가능 하기 때문에 값을 변경하기 쉽다. 그렇기 때문에 변수 충돌이 일어나면서 에러가 발생하기 쉽다. 모듈 패턴을 이용하여 변수를 캡슐화하는 것이 좋음.

왜 load 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고 있나요? 알고 있다면 왜 그것을 사용할 건가요?

load 이벤트는 html 뿐 아니라 image나 css 등의 부가적인 리소스들이 모드 로드 되었을 때 일어나는 이벤트이다. DOMContentLoaded는 반면 html의 DOM 객체만 생성되면 일어나는 이벤트다. 전체 페이지가 로드되기 까지 기다릴 필요가 없을 때 사용

single page app이 무엇인지 설명하고 SEO-friendly하게 만드는 방법을 설명하세요.

브라우저는 서버가 보내 준 html을 받아 화면에 렌더링한다. 사용자가 다른 url로 이동하면 아예 새로운 페이지를 요청하고 이를 화면 전체에 다시 그려야한다. 이걸 sever-side rendering이라고 부른다.

요즘엔 client-side rendering을 많이 사용함. 브라우저는 먼저 전체 어플리케이션에 필요한 스크립트와 stylesheet와 초기 페이지를 로드한다. 사용자가 다른 페이지로 이동하면 페이지의 새로고침이 발생하지 않는다. 페이지의 url은 HTML5 History API를 통해 업데이트 된다.
일반적으로 화면에서 변경되어야 하는 데이터들은 비동기 AJAX로 서버로 요청한다. SPA는 초기 페이지 로딩에서 미리 다운받은 자바스크립트를 통해 페이지를 동적으로 업데이트한다.

장점

  • url이 변경될 때, 새로 페이지를 가져오는게 아니기 때문에 화면 전환이 자연스럽다.
  • 동일한 asset들 (css, img들)을 페이지 로드마다 다시 요청할 필요가 없기 때문에 HTTP 요청이 줄어듬
    • 대신 초기 로딩 속도가 이전보다는 느려짐
  • SPA는 화면을 렌더링하기 위해서 자바스크립트를 이용하지만 모든 검색 엔진이 크롤링하면서 자바스크립트를 실행하지는 않기 때문에 페이지에 빈 컨텐츠가 표시될 수 있다. 이로 인해 앱의 검색 최적화(SEO)가 어려워진다. 하지만 앱을 제작할 때 모든 컨텐츠를 색인하진 않아도 되기 때문에 SEO가 가장 중요한 요소는 아니다. 이를 극복하기 위해 Prerender 같은 서비스를 이용하여 브라우저에서 자바스크립트를 렌더링 하고 정적 html을 저장한다음 크롤러에게 반환하도록 한다.

🌟History API

Promises와 그 Polyfill에 대한 당신의 경험은 어느 정도인가요?

  • Promise 란 ?
    promise는 자바스크립트의 비동기 처리에서 사용되는 객체. 미래에 가지게 될 값을 처리할 때 사용. 여기서 비동기란 특정 코드의 실행이 끝날 때까지 기다리지 않고 다음 코드를 실행하는 자바스크립트 특성이다.

    function getData(){
    return new Promise( (resolve, reject) => {
     $.get('/url', function(response){
      resolve(response);
     }
    })
    }
    getData().then(res => {
    console.log(res);
    });
  • getData 함수는 promise를 리턴한다. 나중에 가져오게 될 값을 처리할 때(비동기로 요청) Promise를 사용한다.

  • getData가 실행하면 /url로 원하는 데이터를 요청하게 되고 요청이 정상적으로 실행되었을 때 resolve(response)로 결과값을 넘겨준다.

  • then은 getData()의 resolve된 결과를 받는다.

  • Promise와 babel, babel-polyfill
    babel은 ES6/7 문법을 브라우저가 이해할 수 있는 이전 문법들로 변환해주는 transpiler다. 하지만 Promise, Map, Set 처럼 ES6 부터 새로 도입된 개념들은 변환이 되어도 대응되는 개념이 없기 때문에 여전히 브라우저가 이해하지 못한다. babel-polyfill는 Promise를 사용할 수 있도록 정의해준다.

참고

Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇인가요?

callback이 많으면 어떤 식이 먼저 실행되는지 파악하기 점점 힘들어진다. 즉 가독성이 떨어진다. Promise를 사용하면 가독성이 좋은 연속적인 비동기 코드를 작성하기 쉬워짐. 또한 콜백을 너무 빨리 호출하거나 늦게 호출하거나, 매개 변수를 전달하는데 실패하는 등의 문제를 발생하지 않는다.

참고 : 자바스크립트 promise? 나도 써보자, 기본 개념부터~

JavaScript로 컴파일되는 언어로 JavaScript 코드를 작성하는 경우의 장단점은 무엇인가요?

자바스크립트로 컴파일 되는 언어는 CoffeeScript, Elm, TypeScript 등이 있다.

  • 자바스크립트가 가지고 있었던 오랜 문제점들을 해결한다.
  • 자바스크립트 위에 syntatic sugar를 제공하여 좀 더 짧은 코드 작성이 가능하게 한다.
  • 시간 경과에 따라 유지 관리해야하는 대규모 프로젝트에서 훌륭하다.(타입스크립트)

단점

  • 브라우저는 자바스크립트만 실행하기 때문에 빌드/컴파일 프로세스 과정이 필요하다. 브라우저에 제공되기 전에 js 파일을 컴파일해야함.
  • 이러한 언어에 익숙하지 않으므로 배워야함.