[JavaScript]

jjune095·2021년 6월 2일
0

면접

목록 보기
6/7

이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요.

  • 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 더 상위 요소들로 전달되어 가는 특성을 의미한다. (자식 -> 부모 , 부모와 같은 이벤트이면 부모의 이벤트가 실행됨)
  • 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식이다. (부모 -> 자식)

=> 버블링을 막는 방법
1) event.stopPropagation()
버블링을 위에까지 올라가지 않게 막지만, 형제 노드들은 이벤트가 발생함.

2) event.stopImmediatePropagation()
그 즉시 멈춰서 형제 노드의 이벤트도 막음 => 위험하다.

3) (best) event target이 같은지 확인.
같은 경우만 이벤트 실행.

event delegation에 대해 설명하세요.

특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 한다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 이벤트 핸들러를 더 적게 등록해 주기 때문에 메모리도 절약할 수 있다.

하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84---event-delegation

this는 JavaScript에서 어떻게 작동하는지 설명해주세요.

this는 자바스크립트 런타임 시에 바인딩이 이루어지는 실행 컨텍스트 중 하나로, 해당 함수가 실행되는 동안에 사용할 수 있으며 함수 호출 부분에서 this가 가리키는 것이 무엇인지를 확인할 수 있다. 때로는 복잡한 코드에서 암시적 바인딩에 의해 혼란스러운 경우가 많은데, 이런 문제를 해결하기 위해서 call이나 apply 같은 내장 유틸리티를 사용하여 명시적으로 바인딩을 해 준다.

*실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. (call stack에 쌓아 코드의 실행 흐름을 확인 가능)

  1. 기본 바인딩 (전역객체)
  • window를 context 객체로 갖는 것
  1. 암시적 바인딩
  • 어떤 객체를 통해 함수가 호출될때 그 객체가 this의 context 객체가 된다.
  1. 명시적 바인딩
  • call, apply, bind 메소드를 통해 첫번째 인자로 넘겨주는 것
  1. new 바인딩
  2. Arrow function

"호이스팅(Hoisting)"이란?

호이스팅은 인터프리터가 자바스크립트 코드를 해석함에 있어서, Global 영역 또는 함수 영역 안에 대해서 주어진 선언들을 모두 끌어올려서 해당 유효 범위 최상단에 선언하는 것을 의미한다.

실제로 코드를 끌어올리는것은 아니며 자바스크립트 Parser 내부적으로 끌어올려서 처리한다. 실제 메모리에서는 변화가 없다.

var 변수/함수의 선언만 호이스팅되며 할당은 끌어 올려지지 않는다.
let과 const도 호이스팅은 되지만 TDZ(Temporal Dead Zone)에 의해 에러가 발생한다. 선언 단계와 초기화 단계 사이에 TDZ가 존재하고, TDZ에서 관리 중일 때(선언 및 할당 코드가 나오기 전에) 사용하려 한다면 ReferenceError가 발생한다.

prototype 기반 상속은 어떻게 하는지 설명해주세요.

자바스크립트 객체에는 Prototype이라는 내부 프로퍼티가 있고, 이는 다른 객체를 참조할 때 사용한다. 자바스크립트에서 상속을 진행할 때는 프로토타입끼리 연결을 하는데, 부모 프로토타입을 create()나 setPropertyOf() 메서드를 사용하여 자식 프로토타입과 연결한다.

null과 undefined의 차이점은 무엇인가요?

두 타입 모두 값이 없음을 의미한다. 둘 다 데이터 타입이자 그 변수의 값이다. 자바스크립트에서 변수를 선언하면 초기값으로 undefined를 할당하게 된다. 반면 null은 값이 비어있음을 나타내며 값이 없다는 값이 등록되어 있는 것이다.

비동기 설명: AJAX에 관해 가능한 한 자세히 설명하세요.

  • 자바스크립트는 하나의 쓰레드로 돌아가는 싱글 쓰레드 환경이다. 한번에 일을 처리하지 못하고 동기적으로 처리한다. 이벤트 루프를 사용하여 해결하지만 동기적인 방법이 문제가 있는 경우가 있다. 이를 해결하기 위해 비동기적인 방법이 필요하다. (ajax, axios, fetch)

AJAX

  • JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술. (csv, json, xml)
  • XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터를 로드할 수 있음.
  • jQuery를 사용하면 쉽게 구현이 가능하고 error, success,complete의 상태를 쉽게 사용 가능하나 jQuery를 사용해야 한다는 점과 promise 기반이 아닌점이 단점이다.

Axios

  • node와 브라우저를 위한 http 통신 라이브러리.
  • fetch와 달리 크로스 브라우징이 최적화되어 IE11도 지원한다. (호환성)
  • return값으로 Promise를 반환한다.
  • JSON 자동 변환 가능.

fetch

  • JS의 내장 라이브러리이나 지원하지 않는 브라우저가 있다.

Callback과 Promise, async/await의 차이점에 대해서 설명해 주세요.

가장 먼저 나온 Callback은 비동기 처리를 구현하기 위해 만들어 졌다. 이 함수는 다른 함수에게 인자로 전달되어 어느 시점에 실행될 수 있도록 던져주는 함수이다. 하지만 콜백 지옥이라 불리는 중첩문이 발생하면서 에러처리 한계가 생기기 시작했고 이를 해결하기 위해 Promise가 나타났다.

Promise는 어떤 값이 생성 되었을 때 그 값을 대신하는 대리자이다. 비동기 연산이 종료된 이후에 그 결과 값이나 에러를 처리할 수 있도록 처리기를 연결하는 역할을 하는 객체이다. Promise 객체를 통해 성공, 실패, 오류에 따른 후속처리가 바로 가능해서 가독성도 좋고, 비동기 에러를 처리하기도 수월하다.

Async/await은 비동기 코드를 동기식으로 표현하는 더 나은 방법으로 ES2017에 등장하였다. Async와 await는 항상 같이 붙어 있어야 한다. await 모드는 Promise 객체를 받아 처리하고, 만약 비동기 함수가 아닌 동기적 함수라면 리턴 값을 그대로 받는다. Async 함수는 Promise 객체를 통해 비동기적으로 처리된 내용을 동기적인 코드 진행 순서로 보여주는 역할을 한다.

event loop란 무엇인가요? ⭐️ ⭐️

자바스크립트 엔진이 Call Stack과 Callback Queue의 상태를 체크하여 Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어 넣는다.

Event Loop(감시자)는 루프를 돌면서 Call Stack과 Task Queue를 확인한다.

⇒ Call Stack에 일이 있으면 비어질때 까지 기다린다.

⇒ 다 비어지게 되면 그때 Task Queue에 있는 콜백을 Call Stack으로 가져와서 자바 스크립트 엔진에서 실행한다. (buffer 같은 역할)

Call Stack에서 실행되는 것은 끝날 때까지 보장이 된다!!

Javascript Scope Chaining에 대해 설명해 주세요.

실행 컨텍스트 내에서 변수를 탐색할 때 중복되는 변수가 있더라도 먼저 탐색된 변수를 우선적으로 실행시키는 방식이다.

use strict 은 무엇이고, 사용했을 때 장단점에 관해서 설명해주세요.

use strict는 엄격 모드로 전체 스크립트 또는 부분 함수에 적용이 가능하다.

1) 기존에 무시되던 에러들이 throw 되며
2) JS 엔진 최적화 작업을 어렵게 만드는 실수들을 바로 잡고
3) ECMAScript의 차기 버전에서 정의될 문법들을 금지하는 특성을 가지고 있다.

특히 엄격 모드에서는 이전에 허용되던 실수를 오류로 바꾸어 놓는다. 예를 들어 전역 변수 생성을 불가능하게 만든다든지, 아니면 NaN에 할당하는 것과 같은 일들을 엄격 모드에서는 그냥 넘어가지 않는다. 또한 삭제할 수 없는 프로퍼티를 삭제하려고 하면 예외를 발생시킨다.

클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.

클로저는 반한된 내부함수가 자신이 선언되었을때의 환경인 스코프를 기억하여 자신이 선언되었을때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수이다. 즉, 자신이 생성될때의 환경을 기억하는 함수이다.

클로저를 사용하는 이유

  • 현재 상태를 기억하고 변경된 최신 상태를 유지하기 위해 사용.
  • 전역 변수의 사용을 억제하기 위해
  • 정보의 캡슐화와 은닉화를 하기 위해

클로저 핵심

  1. 함수 종료 후에도 사라지지 않고 값을 유지하는 변수
  2. 외부로부터 내부 변수 보호 (캡슐화) - (setter없이는 영향x)

⇒ 함수 종료 후에도 사라지지 않는 지역변수를 만들 수 있다.
*컨텍스트 A에서 선언한 변수 a를 참조하는 내부함수 B를 A의 외부로 전달할 경우, A가 종료가 되어도 a가 사라지지 않고 유지되는 현상이다. (클로저의 핵심)

JSON이 무엇이며 사용하면 어떠한 장점이 있나요?

JSON은 경량화된 파일 형식이다. 자바스크립트에서 모든 객체는 연관배열(Key/Value)을 기초로 구성되어 있는데, JSON은 이러한 연관 배열을 표시하는데 매우 효과적인 방식이다. JSON은 텍스트 포멧이며 유니코드 인코딩이다. AJAX에서 JSON 방식을 사용하게 되면 eval() 메서드를 사용하지 않아도 키 값을 바로 불러올 수 있다. XML로도 데이터를 불러올 수 있지만, 데이터의 크기를 불필요하게 증가시킬 수 있으며, 파싱 시에 브라우저 호환성도 신경을 써 주어야 한다는 단점을 가지고 있다.

전역 scope를 사용했을 때 장단점에 관해 설명해주세요.

자바스크립트에는 스코프 체인(scope chain)이라는 개념이 있는데, 내부 함수에서는 외부 함수의 변수에 접근이 가능하지만 외부 함수에서는 내부 함수의 변수에 접근할 수 없다. 내부 함수에서는 변수를 먼저 해당 스코프에서 찾은 뒤, 만약 없으면 outer 스코프에서 찾고, 그렇게 타고 올라가다가 결국 전역 scope에서 찾는다. 따라서 전역 변수를 만들어서 작업하면 다른 개발자와 협업할 때 우연히 같은 변수 이름을 사용해서 이전의 변수를 덮어쓰는 불상사가 발생할 수도 있다. 굳이 전역 변수의 장점을 꼽자면 함수 내의 지역 변수와 달리, 저장된 값이 사라지지 않는다는 점이다.

function foo() {}와 var foo = function() {}에서 foo 의 차이가 무엇인지 설명해보세요.

전자는 함수 선언(function statement)이며 후자는 함수 표현(function literal)이다. 함수 선언은 코드 블럭 자체가 실행 가능 코드가 아니라는 것이다. 해당 코드 블럭을 콘솔에서 실행하여도 어떠한 결과가 리턴되지 않는다. Class와 동일한 개념으로 이해해도 된다. 함수 표현은 특정 변수에 할당되거나 즉시 실행가능한 코드 블럭으로서 존재하는 함수를 의미하는 것이다. 둘은 호이스팅 관점에서 차이가 있다. 선언식은 호이스팅 되지만 표현식은 호이스팅 되지 않는다.

JavaScript의 작동방식의 장단점에 관해 설명해주세요.

자바스크립트는 V8 엔진을 사용하며, 싱글 쓰레드 기반이고 콜백 큐를 사용한다. 엔진은 크게 두 요소로 구분된다. 메모리 힙(Memory Heap)과 콜 스택(Call Stack). 메모리 힙에서는 메모리 할당이 일어나고, 콜 스택에서는 코드 실행에 따라 호출 스택이 쌓인다. 자바스크립트는 싱글 쓰레드 기반 언어이기 때문에 호출 스택이 하나이고 따라서 그 하나의 호출 스택에 실행된 코드가 하나씩 쌓이게 된다. 싱글 스레드이기 때문에 데드락 같은 문제나 복잡한 시나리오를 고민할 필요는 없으나, 호출 스택에 처리 시간이 어마어마하게 오래 걸리는 함수가 있다면 브라우저는 해당 함수가 실행되는 동안 아무것도 하지 못하고 가만히 있게 된다.

함수형 프로그래밍에 대해 설명해 주세요.

함수형 프로그래밍은 계산을 수학적 함수의 조합으로 생각하는 방식을 말한다. 이것은 일반적인 프로그래밍 언어에서 함수가 특정 동작을 수행하는 역할을 담당하는 것과는 반대되는 개념으로, 함수를 수행해도 함수 외부의 값이 변경될 수 없다.

함수형 프로그래밍은 순수 함수(pure function)를 조합하고 공유 상태(shared state), 변경 가능한 데이터(mutable data) 및 부작용(side-effects)을 피하여 소프트웨어를 만드는 프로세스다. 함수형 프로그래밍은 명령형(imperative)이 아닌 선언형(declarative)이며 어플리케이션의 상태는 순수함수를 통해 전달된다.

Callback을 왜 사용하나요?

디자인 패턴 중 하나인 옵저버(Observer) 패턴에서 나온 개념으로써 객체의 상태 변화(이벤트)가 발생 하였을 경우에 이러한 사실을 함수를 통해 전달하게 되는데, 이를 콜백 함수라고 한다. 콜백 함수를 사용하는 이유는 서버로 어떠한 요청을 보낸다고 가정할 때 응답을 기다리는 동안 가만히 시간을 버리는 것이 아닌, 다른 작업을 함으로써 동기적인 코드에 비해 성능을 향상시킬 수 있기 때문이다.

ES6에서 바뀐 문법을 생각나는 대로 이야기 해 주세요.

Destructuring(var { name } = person;), Template Literal(`, 백틱), Spread Operator(...), 화살표 함수(const a = () ⇒ {}), const&let(var와 다르게 block scope), import/export, Map/Set, Promise 등

ES6 이상의 버전을 브라우저에서 인식하지 못한다면 어떻게 해결해야 하는지?

ES6 이상의 자바스크립트 버전은 브라우저 별로 지원률이 상이하기 때문에 트랜스파일러인 바벨을 사용하여 ES6+ → ES5로 변환한다.

자바스크립트 메서드 .call()과 .apply(), .bind() 차이를 설명하시오.

call과 apply는 함수를 호출하는 함수이다. 그냥 실행하는 것이 아닌 첫 번째 인자에 this로 setting 하고싶은 객체를 넘겨주어 this를 바꾸고 나서 실행한다. call과 apply의 차이점은 첫 번째 인자(this를 대체할 값)를 제외하고, 실제 함수 호출에 필요한 파라미터를 넣어야 한다. call 과 다르게 apply 함수는 두 번째 인자부터 모두 배열에 넣어야 한다.

bind 함수가 call과 apply와 다른 점은 함수를 실행하지 않는다는 점이다. 대신 bound 함수를 리턴한다. 이 bound 함수가 이제부터 this를 obj로 가지고 있기 때문에 나중에 사용해도 된다. bind에 사용하는 나머지 파라미터들은 동일하다.

ES6에서 화살표 함수와 일반 함수의 차이는?

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 반면에, 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

etc

프로토타입 체인은 상속과 프로퍼티 검색을 위한 메커니즘이다.
스코프 체인은 식별자 검색을 위한 메커니즘이다.
=> 스코프 체인과 프로토타입 체인은 서로 협력하여 식별자 프로퍼티를 검색하는데 사용된다.
(자바스크립트 딥 다이브 19장 참고, 추가: 프로퍼티 쉐도잉)


참고 링크:

https://devowen.com/276?category=778540
https://devowen.com/283?category=778540

profile
프론트엔드 개발자 남준영입니다.

0개의 댓글