자주 나오는 프론트엔드 개발자 취업 면접 질문 및 답변 정리-2

 

 

 

개발의 길은 멀고도 험하다는 걸 깨닫고 있는 요즘입니다. 백엔드로 개발 공부를 시작해 프론트엔드 개발자로 전향해 열심히 공부하고 있는데, 네트워크부터 컴퓨터 보안까지 공부할 내용은 끝도 없고 그렇기 때문에 더더욱 체계적인 정리가 필요해보입니다. 기본적으로 면접 질문들을 정리해가면서 기본 개념을 확실히 잡아보는 게 좋을꺼같아 두번째 프론트엔드 개발자를 위한 인터뷰 질문 블로그 글을 연재합니다.

 

 

---

 

 

1. 제너릭 프로그래밍이란 무엇인가요?

 

 

데이터 형식에 의존하지 않고, 하나의 값이 여러 다른 데이터 타입들을 가질 수 있는 기술에 중점을 두어 재사용성을 높일 수 있는 프로그래밍 방식입니다.

 

 

 

 

2. 익명 함수란 무엇인가요?

 

 

익명 함수는 실행 시간 중에 동적으로 선언되는 함수입니다. 이런 함수를 익명함수라고 하는데 다른 평범한 함수와는 달리 이름이 주어지지 않기 때문입니다.

 

 

 

 

3. 가비지 컬렉터의 역할은 무엇이고 어떻게 동작하는지 설명해주세요.

 

 

메모리 할당을 추적하고 할당된 메모리 영역이 필요하지 않은 영역일 경우 판단해서 회수하는 것입니다. 자바스크립트에서 변수는 직접적으로 참조 값(문자열, 객체, 배열 등)을 담고 있지 않고, 해당 값을 메모리상에 저장합니다. 그래서 참조 값을 생성하고 나서 더 이상 참조할 것이 없거나 비어졌을 때 가비지 컬렉터가 동작해서 메모리가 반환됩니다. (메모리를 다시 재사용할 수 있는 상태가 됩니다.)

 

 

 

 

4. 자바스크립트의 순환 참조란 무엇이고 어떤 것이 문제인지 그리고 해결방법에 대해서 말해주세요.

 

 

function foo() {

	var o = {};
    var o2 = {};
    o.a = o2; // o는 o2를 참조한다.
    o2.a = o; // o2는 o를 참조한다.
    
	return "error";
    }
 
 foo();

 

위의 코드와 같이 서로 순환되어서 참조되어져 가비지컬렉터가 작동하지 않고 메모리 누수가 발생합니다. 해결 방법은 null 을 할당하여 연결을 끊는 방법이 있습니다. 대부분의 브라우저에서는 Mark-and-Sweep 알고리즘을 사용하고, 그래서 가비지컬렉터가 참조되지 않는 객체가 있을 때 동작하는 것이 아니라 접근할 수 없는 객체일 때 동작하게 됩니다.

 

 

 

 

자바스크립트의 배열이 실제 자료구조 배열이 아닌데 그 이유는 무엇인가요?

 

 

자바스크립트의 배열은 실제 자료구조의 배열과 다르게 HashMap으로 구현되어 있습니다. 이 HashMap을 구현하기 위해서는 연결리스트로 구현하게 되는데 연결리스트에서 값을 찾기 위해서는 탐색해나가면서 값을 찾기 때문에 일반적인 배열보다는 성능적인 면에서 느릴 수 밖에 없는 구조적인 단점이 있습니다. 하지만 특정 요소를 탐색하거나 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있습니다.

 

 

 

 

5. 이벤트 루프와 동시성 모델에 대해서 설명해주세요.

 

 

자바스크립트는 싱글 스레드 기반 언어입니다. 함수를 실행하면 함수 호출이 스택에 순차적으로 쌓이고 스택의 맨 위에서부터 아래로 한번에 하나의 함수만 처리할 수 있습니다. 하지만, 자바스크립트에서는 이벤트 루프라는 것을 통해 동시성을 지원합니다. 이벤트 루프는 콜 스택에서 실행중인지 확인하고, Event queue의 작업이 있는지 확인해 콜스택이 비어있다면 이벤트큐 내의 작업이 콜스택으로 이동되어서 실행합니다.

 

 

 

 

6. 프로토타입과 상속에 대해서 설명해주세요.

 

 

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거합니다. 즉, 생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메소드를 프로토타입에 미리 구현해놓음으로써 다시 구현하는 것이 아닌 부모 객체인 프로토타입의 자산을 공유하여 사용할 수 있습니다. __proto__접근자 프로퍼티로 자신의 프로토타입, 즉, prototype 내부슬롯에 접근할 수 있습니다.

 

프로토타입체인이란? 객체의 프로퍼티에 접근하려고 할 때 객체에 접근하려는 프로퍼티가 없으면, __proto__ 접근자 프로퍼티가 가르키는 링크를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색합니다. 프로토타입의 최상위 객체는 Object.prototype 입니다. 이 객체의 프로퍼트와 메소드는 모든 객체에게 상속됩니다.

 

prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킵니다.

 

▽ 프로토타입과 상속에 관해서 더보기

[JS] 프로토타입과 상속

 

 

 

 

7. 자바스크립트에서 This는 몇 가지로 추론될 수 있나요?

 

 

this는 함수 호출 방식에 따라 동적으로 결정됩니다. this 바인딩을 통해 this가 어떤 값과 연결되는 지 확인해볼 수 있습니다. 바인딩이랑 this의 호출 방식에 따라 this가 특정 '객체'에 연결되는 것입니다. this 바인딩은 1. 일반 함수 내부 2. 메소드 내부 3. 생성자 함수 내부 4. Call, Apply, Bind를 통한 '호출 방식'으로 나눠서 살펴볼 수 있습니다.

 

일반함수의 this와 화살표 함수의 this는 어떻게 다른가요? 자바스크립트의 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언이 되었던 this는 전역객체를 가르킵니다. 따라서, 일반함수의 this는 window(전역)을 가르키며, 화살표 함수의 this는 언제나 상위스코프의 this를 가리킵니다.

 

use strict 모드에서의 this는? 일반함수에서의 this는 undefined가 바인딩됩니다.

 

 

1. 일반 함수 호출시 this는 전역 객체에 바인딩

 

console.log(this === window); // true

a = 30;
console.log(window.a); // 30

function x() {
	return this;
}

x() === window; // true

 

2. 메소드 호출시 this는 호출한 객체에 바인딩

 

let john = {
	firstName: "John",
    lastName: "Doe",
    driveCar() {
    	console.log(this.firstName + "drives a car.");
        }
	}
john.driveCar(); // John drives a car

 

3. 생성자 함수로 호출시 생성자 함수가 생성할 객체에 바인딩

 

function person() {
	this.firstName = "John",
    this.lastName = "Doe",
    this.start = function() {
    	console.log(this.firstName + "drives a car.");
        }
	}
let person1 = new person();

console.log(person1); // { firstName: 'John', lastName: 'Doe', start: [function] }

 

4. Call, Apply, Bind 메소드 사용시 메소드에 첫번째 인수로 전달하는 객체에 바인딩

• call을 사용하면 함수를 실행하고 첫 번째 인자로 전달하는 값에 this를 바인딩합니다.
• apply을 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩합니다. call과의 차이점이라면 인자를 배열의 형태로 전달한다는 것입니다. 이때, 인자로 배열 자체가 전달하는 것이 아니라 배열의 요소들이 값으로 전달됩니다.
• bind는 함수의 첫 번째 인자에 this를 바인딩한다는 점은 같지만, 함수를 호출하는 것이 아닌 바인딩된 새로운 함수를 리턴합니다.

 

Call, Apply, Bind 함수에 대해 설명해주세요. this를 바인딩하기 위한 방법입니다. Call은 this를 바인딩하면서 함수를 호출하는 것, 두번째 인자를 apply와 다르게 하나씩 넘깁니다. Apply는 this를 바인딩하면서 함수를 호출하는 데, 두번째 인자가 배열입니다. Bind는 함수를 호출하는 것이 아닌 this가 바인딩된 새로운 함수를 리턴합니다.

 

 

 

 

8. 크롬 정도의 브라우저를 제외하고는 ES6 스펙에 대한 지원이 완벽하지 않은데, 해결방법은 무엇인가요?

 

 

Babel을 사용하여 ES6 이상의 문법의 코드를 브라우저가 이해할 수 있게 ES5 이하의 문법으로 변환합니다.

 

Babel이란 무엇인가요? 바벨은 트랜스파일러입니다. 컴파일은 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것을 말하는데, 트랜스파일러는 하나의 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 말합니다.

 

 

 

 

---

 

 

 

 

▪️ 알고 있으면 좋은 용어와 개념들

 

 

디바운싱(Debouncing)과 쓰로틀링(Throttling)

 

'개발자 아저씨들 힘을 모아'라는 블로그 글에 정리된 내용을 가져왔습니다.

 

• 디바운싱(Debouncing): 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막 혹은 처음에 처리된 함수를 처리하는 방식으로 사용합니다.
• 쓰로틀링(Throttling): 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트를 무시하는 방식을 뜻합니다. 즉, delay 시간동안 호출된 함수는 무시하는 케이스입니다.

 

 

 

 

GET과 POST의 차이를 아시나요?

 

Get과 Posts는 HTTP Method 중 가장 많이 쓰이는 Method가 아닐까 싶습니다. 

 

• Get은 클라이언트에서 서버로 정보를 요청하기 위해 사용되는 메소드입니다.
• Post는 리소스를 생성/업데이트하기 위해 서버에 데이터를 보내는데 사용합니다.

 

 

 

 

 

JavaScript 번들러

https://wormwlrm.github.io/

 

• Webpack이란 무엇인가요? 

 

Webpack은 모듈 번들러로 파일 확장자에 맞는 로더에게 위임해서 하나로 묶어 최종 배포용 파일을 만들어줍니다.

 

 

 

 

프로세스와 스레드의 차이는 무엇인가요?

 

프로세스는 운영체제로부터 자원을 할당받는 작업의 단위이고, 스레드는 프로세스가 할당받은 자원을 이용하는 실행 단위입니다. 멀티 프로세싱보다 멀티스레딩을 하는 이유는 운영체제로부터 자원을 할당하는 프로세싱 작업을 많이 하는 것보다 스레딩을 여러개 하는 것이 훨씬 시스템 자원을 효율적으로 관리할 수 있습니다.

 

 

 

 

---