JS 기술면접 스터디 2주차: 호스트 객체부터 Ajax까지

기술면접 스터디 1주차에 이어 2주차를 진행하고 관련 내용을 정리합니다. 1주차 내용이 궁금하시다면 여기를 클릭해주세요.

 

전체 질문 리스트의 출처는 front-end-interview-handbook이며, 이 글은 스터디 내용을 복기하고 정리하는 글로 아주 상세한 기술내용을 담고 있진 않습니다. 관련해서는 이후에 따로 정리할 계획입니다.

 

2주차 질문은 호스트/내장객체, 함수선언, call()/apply()/bind(), Ajax, JSONP 등에 대한 내용입니다.

 

1. 호스트 객체와 내장 객체의 차이점은 무엇인가요?

내장객체는 ECMAScript에 의해 정의된 JavaScript의 일부인 객체(String, Math, RegExp, Object, Function 등)이고 native object, built-in object이라고도 부릅니다.
호스트객체는 window, XMLHTTPRequest 등 런타임환경(브라우저, Nodejs)에 의해 제공되는 객체를 말합니다.

 

2. function Person(){}, var person = Person(), var person = new Person()의 차이점은 무엇인가요?

function Person(){}은 우선 생성자함수(클래스)를 정의하려 한 것 같고, Person이라는 함수는 함수선언문 방식으로 정의됨에 따라 전역함수가 됩니다.
var person = Person()은 Person함수의 결과값(리턴값)을 person이라는 변수에 할당한 것이다.(그런데 일반적으로 생성자 함수는 리턴값이 없으므로 person을 콘솔로 찍으면 undefined가 나올 확률이 높다.)
var person = new Person()은 Person 생성자 함수로 탄생한 한 인스턴스를 person이라는 변수에 할당한 것이다. 즉, person은 Person 객체의 인스턴스. Object.create(Person.prototype)과 동일합니다.

function Person(){} // 함수 선언문 방식(호이스팅에 있어 함수표현식과 차이있음)
var Person = function(){} // 함수 표현식
var Person = new Function(인자, 리턴문); // Function 생성자 함수(일반적으로 잘 안쓰이는 방식)

 

3 .call과 .apply의 차이점은 무엇인가요?

둘 다 함수를 호출할 때 사용하며, 첫번째 매개변수는 함수 내의 this의 값으로 됩니다. 함수를 호출한다는 것은 리턴값으로 함수 실행 결과를 반환하는게 아니라 함수의 실행 그 자체를 호출한다는 것입니다.
둘은 거의 비슷하지만 call() 은 함수에 전달될 인수들을 그대로 받는데 비해, apply()는 인수들의 단일배열(리스트)을 받는다는 점입니다.(MDN 설명)

아래는 호출의 의미를 보여주는 코드입니다.

function callee(){console.log(`Hi, I'm callee`)}
function caller(){
  callee.call();
  callee.apply();
  console.log(`Hi, I'm caller`);
}
caller() // 실행결과
// Hi, I'm callee
// Hi, I'm callee
// Hi, I'm caller

호출과 this, 호출하는 함수의 인수에 대한 의미를 보여주는 코드입니다.

const array = ['a', 'b'];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.log(array); // ["a", "b", 0, 1, 2]
// arr.push() 메소드를 호출하라. 단 this는 array 객체로 바인딩하고, arr.push()의 인수를 지정하는 유사 배열 객체는 elements로 한다.

• 참고자료
  • MDN의 Function.prototype.call()
  • MDN의 Function.prototype.apply()
  • apply/call/bind 호출

 

4. Function.prototype.bind에 대해 설명하세요.

bind는 this를 주어진 값으로 고정시키고 매개변수도 자신의 인자를 사용해 채워놓은 새로운 함수를 리턴합니다. 리액트에서 상부 컴포넌트의 이벤트를 하부 컴포넌트로 바인딩해줄때 상부의 this를 유지하기 위해 유용하게 사용하며, 만약 그게 귀찮다면 함수 생성 당시의 환경으로 this를 고정하는 화살표 함수를 이용하면 됩니다.

bind() 메서드는 this 키워드를 주어진 값으로 설정하고, 앞쪽의 매개변수도 자신의 인자를 사용해 미리 순서대로 채워놓은 새로운 함수를 반환합니다. (MDN 설명)

 

5. 언제 document.write()를 사용하나요?

document.open()에 의해 열린 도큐먼트의 흐름에 텍스트 문자열을 쓸 때 사용하는 메소드입니다.

• 참고자료
  • 질문리스트에서의 답
  • MDN의 Document.write

 

6. Feature detection, Feature inference, UA String의 차이점은 무엇인가요?

• Feature detection
  feature detection의 개념은 당신이 사용하려는 기능이 브라우저에서 지원하는지 아닌지 결정하기 위한 테스트를 할 수 있다는 것이다. 그러고 그 기능을 지원하는 브라우저와 지원하지 않는 브라우저 모두에 만족할만한 경험을 제공하기 위해 코드를 조건부로 실행됩니다.

• Feature inference
  Feature inference는 Feature detection과 마찬가지로 기능을 확인하지만 다른 함수도 존재한다고 가정하고 사용합니다.(Feature detection이 더 확실)

• UA String
  User-Agent String으로 네트워크 프로토콜 피어가 요청하는 소프트웨어 유저 에이전트의 응용프로그램 유형, 운영체제, 소프트웨어 공급 업체 또는 소프트웨어 버전을 식별할 수 있도록 해주는 browser reported String. navigator.userAgent로 접근. 그러나 스푸핑(속임수에 당하는 것)될 수 있고 문자열을 분석하기 까다로울 수 있습니다.

  console.log(navigator.userAgent) // UA String
  // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"

 

7. Ajax에 대해 가능한 자세히 설명하세요.

Ajax는 Asynchronous JavaScript and XML의 약자로 비동기 웹 응용프로그램을 만들기 위한 클라이언트 개발의 방식이빈다. 기존의 페이지의 화면/동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 내보내고 서버에서 데이터를 받아올 수 있습니다. 이것은 프레젠테이션 레이어와 데이터 교환 레이어를 분리함으로써 가능해졌습니다.
관련 기술로는 XMLHttpRequest, Fetch API, axios, ES6의 제네레이터, 리덕스 사가 등이 있으며 주로 사용하는 데이터 형식은 JSON을 사용합니다.

• 참고자료
  • XMLHttpRequest
  • Fetch API
  • axios 라이브러리
  • ES6 Generator 🤷‍
  • Redux Saga 🤷‍

 

8. Ajax의 장단점은 무엇인가요?

장점: 페이지 새로고침(깜빡임)없이 데이터를 갱신할 수 있어 상호작용과 UX가 좋아집니다. CSS나 script를 한번만 호출하면 되어 반복저인 서버통신이 줄어듭니다. 이외에 SPA 장점과 같습니다.
단점: SEO가 까다롭고, 동적화면에서 History 관리와 북마크가 어려울 수 있습니다. 대표적으로 뒤로가기가 사용자의 의도대로 동작하지 않는 경우가 있습니다. 이외에 SPA 단점과 같습니다. SEO를 개선하기 위해서 최근 React에서는 서버 사이드 렌더링 방식이 고려되고 있고, SEO가 필요한 콘텐츠에 한해 따로 html파일을 제작해 놓는 경우도 있습니다

• 참고자료
  • SPA 구현방식과 장단점(SPA & Routing)
  • MDN 브라우저 히스토리 조작하기

 

9. JSONP가 어떻게 동작하며 Ajax와 어떻게 다른지 설명하세요.

JSONP(JSON with Padding)은 cross-origin 도메인으로의 Ajax 요청이 허용되지 않기 때문에 웹 브라우저에서 cross-domain 정책을 우회하는데 사용되는 방법입니다.
그러나 JSONP는 보안이슈가 있습니다. JSONP는 실제 JavaScript이기 때문에 앱을 악의적으로 조작할 수도 있습니다. 따라서 공급자를 신뢰할 때에만 쓸 수 있고, 일반적으로 해킹으로 간주됩니다. 요즘은 CORS가 권장되는 접근 방식입니다.

• 참고자료
  • 질문리스트에서의 답

 

JS 기술면접 스터디 1주차: 이벤트 위임부터 코드구성까지