💻 프론트엔드 면접 질문 - JS #2

Chris Yang·2019년 4월 25일

CSS JavaScript html interview job js question

💻 프론트엔드 면접 질문 모음

목록 보기

6/8

이 글은 프론트엔드 직무 면접 질문과 관련된 Github 저장소 front-end-interview-handbook 번역본으로, 저장소에 Translations 폴더의 내용과 동일합니다.

JS 질문 #2

프론트엔드 면접 질문 - JS 질문에 대한 해설입니다.
Pull Request를 통한 제안, 수정 요청 환영합니다.

Function.prototype.bind에 대해 설명하세요.
언제 document.write()를 사용하나요?
Feature detection, Feature inference, UA String의 차이점은 무엇인가요?
Ajax에 대해 가능한한 자세히 설명하세요.
Ajax를 사용하는 것의 장단점은 무엇인가요?
JSONP가 어떻게 동작하는지(그리고 Ajax와 어떻게 다른지)를 설명하세요.
JavaScript 템플릿을 사용한 적이 있나요? 사용해봤다면, 어떤 라이브러리를 사용했나요?
호이스팅에 대해 설명하세요.
event bubbling에 대해 설명하세요.
"attribute"와 "property"의 차이점은 무엇인가요?
내장 JavaScript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇인가요?
document load 이벤트와 document DOMContentLoaded 이벤트의 차이점은 무엇인가요?
==와 ===의 차이점은 무엇인가요?

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

MDN에서 인용:

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

저의 경험상, 다른 함수로 전달하고자 하는 클래스의 메소드에서 this의 값을 바인딩할 때 가장 유용합니다. 이는 React 컴포넌트에서 자주 사용됩니다.

참고자료

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

[↑] Back to top

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

document.write()는 document.open()에 의해 열린 문서 스트림에 텍스트 문자열을 씁니다. 페이지가 로드된 후에 document.write()가 실행되면 document.open을 호출하여 문서 전체를 지우고 (<head>와 <body>를 지웁니다!). 문자열로 주어진 매개 변수 값으로 대체합니다. 그러므로 일반적으로 위험하고 오용되기 쉽습니다.

document.write()가 코드분석이나 JavaScript가 활성화된 경우에만 작동하는 스타일을 포함하고 싶을 때 사용되는 경우를 설명하는 온라인 답변이 몇 가지 있습니다. 심지어 HTML5 보일러 플레이트에서 스크립트를 병렬로 로드하고 실행 순서를 보존할 때도 사용됩니다! 그러나, 저는 그 이유가 시대에 뒤떨어진 것으로 생각하고 있으며, 현재는 document.write()를 사용하지 않고도 할 수 있습니다. 이것이 틀렸다면 고쳐주세요.

참고자료

[↑] Back to top

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

Feature Detection

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

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

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

Feature Inference

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

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

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

UA String

네트워크 프로토콜 피어가 요청하는 소프트웨어 유저 에이전트의 응용 프로그램 유형, 운영 체제, 소프트웨어 공급 업체 또는 소프트웨어 버전을 식별할 수 있도록 해주는 browser-reported String입니다. navigator.userAgent 를 통해 접근 할 수 있습니다. 하지만 문자열은 구문 분석하기 까다로우며 스푸핑될 수 있습니다. 예를 들어, Chrome은 Chrome과 Safari로 모두 보고됩니다. Safari를 감지하기 위해서는 Safari 문자열이 있는지와 Chrome 문자열이 없는지 확인해야 합니다. 이 방법은 사용하지 마세요.

참고자료

[↑] Back to top

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

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

XMLHttpRequest API는 비동기 통신에 자주 사용되며, 최근에는 fetch API가 자주 사용됩니다.

참고자료

[↑] Back to top

Ajax를 사용하는 것의 장단점은 무엇인가요?

장점

상호작용성이 좋아집니다. 서버의 새로운 컨텐츠를 전체 페이지를 다시로드할 필요 없이 동적으로 변경할 수 있습니다.
스크립트나 스타일 시트는 한 번만 요청하면 되므로 서버에 대한 연결을 줄여줍니다.
상태를 페이지에서 관리 할 수 있습니다. 메인 컨테이너 페이지가 다시 로드되지 않기 때문에 JavaScript의 변수와 DOM의 상태가 유지됩니다.
기본적으로 SPA의 대부분의 장점과 같습니다.

단점

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

[↑] Back to top

JSONP가 어떻게 동작하는지(그리고 Ajax와 어떻게 다른지)를 설명하세요.

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

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

<!-- https://mydomain.com -->
<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: 'Yang Shun' })

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

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

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

참고자료

https://stackoverflow.com/a/2067584/1751946

[↑] Back to top

JavaScript 템플릿을 사용한 적이 있나요? 사용해봤다면, 어떤 라이브러리를 사용했나요?

네. Handlebars, Underscore, Lodash, AngularJS, JSX. 저는 AngularJS에서의 템플릿을 좋아하지 않았습니다. 지시자에서 문자열을 많이 사용하게 되며 오타가 감지되지 않기 때문입니다. JSX는 JavaScript에 가깝고 배워야 하는 새로운 문법이 거의 없기 때문에 더 좋아합니다. 요즘에는, Third-party 라이브러리에 의존하지 않고 템플릿을 만드는 빠른 방법으로 ES2015 템플릿 문자열 리터럴을 사용할 수도 있습니다.

const template = `<div>My name is: ${name}</div>`

그러나 템플릿 라이브러리와 달리 컨텐츠가 이스케이프되지 않으므로 위의 접근 방식에서 잠재적 XSS를 알고 있어야 합니다.

[↑] Back to top

`호이스팅`에 대해 설명하세요.

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

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

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

// let/const 선언은 호이스팅되지 않습니다.
console.log(bar) // ReferenceError: bar is not defined
let bar = 2
console.log(bar) // 2

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

// 함수 선언
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]

[↑] Back to top

event bubbling에 대해 설명하세요.

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

[↑] Back to top

"attribute"와 "property"의 차이점은 무엇인가요?

attribute는 HTML 마크업에 정의되지만 property는 DOM에 정의됩니다. 차이점을 설명하기 위해 HTML에 다음 텍스트 필드가 있다고 가정해 봅시다: <input type="text" value="Hello">.

const input = document.querySelector('input')
console.log(input.getAttribute('value')) // Hello
console.log(input.value) // Hello

그러나 텍스트 필드에 "World!"를 추가하면 이렇게 될것입니다.

console.log(input.getAttribute('value')) // Hello
console.log(input.value) // Hello World!

참고자료

https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html

[↑] Back to top

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

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

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

참고자료

http://lucybain.com/blog/2014/js-extending-built-in-objects/

[↑] Back to top

document `load` 이벤트와 document `DOMContentLoaded` 이벤트의 차이점은 무엇인가요?

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

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

참고자료

[↑] Back to top

`==`와 `===`의 차이점은 무엇인가요?

==는 추상 동등 연산자이고 ===는 완전 동등 연산자입니다. ==연산자는 타입 변환이 필요한 경우 타입 변환을 한 후에 동등한지 비교할 것입니다. ===연산자는 타입 변환을 하지 않으므로 두 값이 같은 타입이 아닌 경우 ===는 false를 반환합니다. ==를 사용하면 다음과 같은 무서운 일이 발생할 수 있습니다.

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

저의 조언은 편의상 null과 undefined를 비교할 때를 제외하고, ==연산자를 절대 사용하지 않는 것입니다. a == null은 a가 null 또는 undefined이면 true를 반환합니다.

var a = null
console.log(a == null) // true
console.log(a == undefined) // true

참고자료

https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons

[↑] Back to top

Chris Yang

이전 포스트

💻 프론트엔드 면접 질문 - JS #1

다음 포스트

💻 프론트엔드 면접 질문 - JS #2

💻 프론트엔드 면접 질문 모음

JS 질문 #2

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

참고자료

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

참고자료

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

참고자료

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

참고자료

Ajax를 사용하는 것의 장단점은 무엇인가요?

JSONP가 어떻게 동작하는지(그리고 Ajax와 어떻게 다른지)를 설명하세요.

참고자료

JavaScript 템플릿을 사용한 적이 있나요? 사용해봤다면, 어떤 라이브러리를 사용했나요?

`호이스팅`에 대해 설명하세요.

event bubbling에 대해 설명하세요.

"attribute"와 "property"의 차이점은 무엇인가요?

참고자료

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

참고자료

document `load` 이벤트와 document `DOMContentLoaded` 이벤트의 차이점은 무엇인가요?

참고자료

`==`와 `===`의 차이점은 무엇인가요?

참고자료

💻 프론트엔드 면접 질문 - JS #1

💻 프론트엔드 면접 질문 - JS #3

0개의 댓글

💻 프론트엔드 면접 질문 - JS #2

💻 프론트엔드 면접 질문 모음

JS 질문 #2

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

참고자료

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

참고자료

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

참고자료

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

참고자료

Ajax를 사용하는 것의 장단점은 무엇인가요?

JSONP가 어떻게 동작하는지(그리고 Ajax와 어떻게 다른지)를 설명하세요.

참고자료

JavaScript 템플릿을 사용한 적이 있나요? 사용해봤다면, 어떤 라이브러리를 사용했나요?

호이스팅에 대해 설명하세요.

event bubbling에 대해 설명하세요.

"attribute"와 "property"의 차이점은 무엇인가요?

참고자료

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

참고자료

document load 이벤트와 document DOMContentLoaded 이벤트의 차이점은 무엇인가요?

참고자료

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

참고자료

💻 프론트엔드 면접 질문 - JS #1

💻 프론트엔드 면접 질문 - JS #3

0개의 댓글

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

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

`호이스팅`에 대해 설명하세요.

document `load` 이벤트와 document `DOMContentLoaded` 이벤트의 차이점은 무엇인가요?

`==`와 `===`의 차이점은 무엇인가요?