Javascript의 기본 #2

Function.prototype.bind이 무엇인가?

MDN에서는 하기와 같이 설명한다.

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

다른 함수로 전달하고자하는 클래스의 메소드에서 this의 값을 바인딩할 때, 가장 많이 사용되는 것 같습니다.
이는 React 컴포넌트에서 자주 사용됩니다.

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;

console.log(unboundGetX());  // 이 함수는 글로벌 스코프에 대한 값을 호출합니다. (브라우저일 경우 window)
const boundGetX = unboundGetX.bind(module);  // 해당 메소드 내 this로 사용될 데이터 값 바인딩

console.log(boundGetX());  // 42

Feature detection, Feature inference, UA String의 차이점이 무엇인가?

1. Feature Detection

Feature Detection은 부라우저가 특정 코드 블록을 지원하는지 여부에 따라 코드를 실행하도록 하여, 일부 브라우저에서 항상 오류 대신 무언가 작동하도록 합니다.

if ('geolocation' in navigator) {
  // navigator.geolocation를 사용할 수 있습니다.
} else {
  // 부족한 기능 핸들링
}

Modernizr은 Feature detection을 처리할 수 있는 훌륭한 라이브러리입니다.

2. Feature Inference

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

if (document.getElementsByTagName) {
  element = document.getElementById(id)

이 방식은 권장하지 않습니다.
Feature detection이 더 확실합니다.

3. UA String

네트워크 프로토콜 피어가 요청하는 소프트웨어 유저 에이전트의 응용 프로그램 유형, 운영 체제, 소프트웨어 공급 업체 또는 소프트웨어 버전을 식별할 수 있도록 해주는 browser-reported String입니다.
navigator.userAgent를 통해 접근할 수 있지만, 문자열은 구문 분석하기가 까다로우며 스푸핑될 수 있습니다.

Ajax이 무엇인가?

Ajax(asynchronous Javascript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 사용되는 웹 개발 기술의 집합입니다.
Ajax를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다.
Ajax는 프레젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써, 웹페이지 및 확장 웹 애플리케이션이 전체 페이지를 다시 로드할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 합니다.
실제로 최근에는 일반적으로 네이티브 Javascript의 장점 때문에 XML 대신 JSON을 사용합니다.

Ajax의 서브파티 라이브러리 격으로는 XMLHttpRequest 와 fetch 등이 있습니다.

Ajax의 장단점이 무엇인가?

장점

• 서버의 새로운 컨텐츠를 전체 페이지에 다시 로드할 필요 없이 동적으로 변경할 수 있기 때문에 상호작용성이 좋아집니다.
• 상태를 페이지 내에서 관리할 수 있습니다. 메인 컨테이너 페이지가 다시 로드되지 않기 때문에 Javascript의 변수와 DOM의 상태가 유지됩니다.
• 기본적으로 SPA의 대부분의 장점과 같습니다.

단점

• 동적 웹 페이지는 북마크하기 어렵습니다.
• 브라우저에서 Javascript 가 비활성화된 경우 작동하지 않습니다.
• 일부 웹 크롤러는 Javascript를 실행하지 않으며 Javascript에 의해 로드된 콘텐츠를 볼 수 없습니다.
• 기본적으로 SPA의 대부분의 단점과 같습니다.

JSONP는 어떻게 동작하고 Ajax와 어떻게 다른가?

JSONP(JSON with Padding)는 현재 페이지에서 cross-origin 도메인으로의 Ajax 요청이 허용되지 않기 때문에 웹 브라우저에서 cross-domain 정책을 우회하는데 일반적으로 사용되는 방법입니다.

즉 브라우저는 다른 호스트, 포트, 프로토콜로의 Ajax요청을 허용하지 않기 때문에 대부분의 서비스에서는 CORS를 사용하기도 합니다.

JSONP는 <script> 태그를 통해 cross-origin 도메인에 요청하고 보통 callback 쿼리 매개 변수(예: https://example.com?callback=printData) 로 요청합니다.
그러면 서버는 printData 안에 데이터를 래핑하여 클라이언트로 반환합니다.

<script>
  function printData(data) {
    console.log(`My name is ${data.name}!`);
  }
</script>

<script src="https://example.com?callback=printData"></script>

// https://example.com?callback=printData 에서 로드된 파일
printData({ name: 'Lucas' });

클라이언트는 전역 범위에 있는 printData 함수를 가져야만 하고, cross-origin domain으로부터의 응답이 수신될 때 함수가 클라이언트에 의해 실행됩니다.

JSONP는 안전하지 않을 수 있으며, 보안 관련 이슈가 있습ㄴ디ㅏ. JSONP는 실제 Javascript이고, Javascript가 할 수 있는 모든 작업을 수행할 수 있으므로 JSONP 데이터 공급자를 신뢰해야만 합니다.

요즘에는 CORS가 권장되는 접근 방식이며 JSONP는 해킹으로 간주됩니다.

호이스팅이 무엇인가?

호이스팅은 코드에서 변수 선언의 동작을 설명하는데 사용되는 용어입니다.
var 키워드로 선언되거나 초기화된 변수는 현재 스코프의 최상위까지 옮겨집니다.
이것을 호이스팅이라고 부릅니다. 그러나 선언문만 호이스팅 이되며 할당(있는 경우)은 그대로 있게 됩니다.

사실 선언은 실제로 이동되지 않습니다.
Javascript 엔진은 컴파일 중에 선언을 파싱하고 선언과 해당 스코프를 인식합니다.
선언을 해당 스코프의 맨 위로 옮겨지는 것으로 생각하여 동작을 이해하는 것이 더 쉬울 뿐입니다.

몇 가지 예를 들어 설명해보겠습니다.

// var 선언이 호이스팅됩니다.
console.log(foo);  // undefined
var foo = 1;

console.log(foo); // 1

함수 선언은 함수 몸체가 호이스팅되는 반면, 변수 선언 형태로 작성된 함수 표현식은 변수 선언만 호이스팅됩니다.

// 함수 선언
console.log(foo); // [Function: foo]
foo()  // 'FOOOOO'
function foo() {
  console.log('FOOOOO');
}
console.log(foo);  // [Function: foo]

// 함수 표현식
console.log(bar) // undefined
bar();  // Uncaught TypeError: bar is not a function
var bar = function() {
  console.log('BARRRR');
}
console.log(bar);  // [Function: bar]

event bubbling이 무엇인가?

DOM 요소에서 이벤트가 트리거되면 리스너가 연결되어 있는 경우 이벤트 처리를 시도한 다음, 해당 이벤트가 부모에게 bubbling되고 부모에서 동일한 이벤트가 발생합니다.
이 bubbling은 요소의 최상단 부모요소인 document 까지 계속적으로 확장하며 발생시킵니다.
이벤트 bubbling은 이벤트 위임의 작동 메커니즘입니다.

Attribute와 Property의 차이점이 무엇인가?

Attribute는 HTML 마크업에 정의되지만 Property는 DOM에 정의됩니다.

• Todo: 내용 추가 필요

내장 Javascript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇인가?

내장/네이티브 Javascript 객체를 확장한다는 것은 prototype에 속성/함수를 추가한다는 것을 의미합니다.
이것은 처음에는 좋은 생각처럼 보일 수 있지만 실제로는 위험합니다.
여러분의 코드가 동일한 contains 메소드를 추가함으로써 Array.prototype 을 확장하는 여러가지 라이브러리를 사용한다고 사용해보십시오.
이러한 구현은 메소드를 서로 덮어쓰게 되며, 이 두 메소드의 동작이 동일하지 않으면 코드가 망가질 것입니다.

네이티브 객체를 확장할 수 있는 유일한 경우는 polyfill을 만들 때입니다.
Javascript 사양의 일부지만 오래된 브라우저이기 때문에 사용자 브라우저에 없을 수 있는 메서드에 대한 고유한 구현을 제공해야할 경우 뿐입니다.

window Load 이벤트와 document DOMContentLoaded 이벤트의 차이점은 무엇인가?

DOMContentLoaded 이벤트는 스타일시트, 이미지, 서브프레임 로딩을 기다리지 않고, 초기 HTML 문서가 완전히 로드되고 파싱되면 발생합니다.

window의 load 이벤트는 DOM의 모든 종속 리소스와 에셋들이 로드된 후에 발생합니다.

==와 ===의 차이점이 무엇인가?

== 는 추상 동등 연산자이고 === 는 완전 동등 연산자입니다.
== 연산자는 타입 반환이 필요한 경우 타입을 변환을 한 후에 동등한지 비교할 것입니다.
=== 연산자는 타입 변환을 하지 않으므로 두 값이 동일 타입이 아닌 경우 false 를 반환할 것입니다.
따라서 추상 및 완전 동등 연산자는 아래와 같은 문제가 발생할 수도 있습니다.

1 == '1'  // true
1 == [1]  // true
1 == true  // true
0 == ''  // true
0 == '0'  // true
0  == false  // true

저의 경험상 만일의 경우를 대비해서라도 추상 동등 연산자의 사용을 피하는 것이 바람직 해 보입니다.

참조
https://velog.io/@chris/front-end-interview-handbook-js-2