프론트엔드 면접 질문 - (1)

💻 CS

📍 객체지향 프로그래밍에 대해 설명해주세요.

객체지향프로그래밍(OOP, Object Oriented Programming)은 컴퓨터 프로그래밍 패러다임 중 하나로, 데이터를 추상화시켜 상태(attribute)와 행위(Method)를 가진 객체로 만들고 그 객체들 간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법입니다.

장점 : 코드 재사용 및 유지보수 용이, 대형 프로젝트에 적합

단점 : 처리속도 느림, 설계 시 많은 시간이 필요, 객체가 많을 시 용량이 커짐

• 객체지향의 특성

1. 캡슐화 : 변수와 함수를 하나의 단위로 묶는 것, 정보 은닉

2. 상속화 : 이미 정의된 상위 클래스의 모든 속성과 연산을 하위 클래스가 물려받는 것

3. 추상화 : 객체들의 공통적인 특징을 도출하는 것

4. 다형성 : 하나의 변수 또는 함수가 상황에 따라 다른 의미로 해석될 수 있는 것.

📍 프로세스와 스레드의 차이에 대해 설명해주세요.

• Process : 운영체제로부터 자원을 할당받은 작업의 단위
• Thread : 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위

하나의 프로세스에서 스레드들은 각각 stack영역만 따로 할당받고 code, data, heap 영역은 공유합니다.

📍 멀티 프로세스와 멀티 스레드의 차이에 대해 설명해 주세요.

Multi-Process : 하나의 프로그램을 여러 개의 프로세스로 구성하여 각 프로세스가 하나의 작업(task)을 처리하는 것

• 장점 : 하나의 자식 프로세스에서 문제가 발생해도 영향이 전파되지 않음

• 단점 : 잦은 Context Switching으로 인한 오버헤드가 발생할 수 있고, 프로세스 사이 통신이 어려움(IPC)

Multi-Thread : 프로그램을 여러 개의 스레드로 구성하고 각 스레드가 하나의 작업(task)을 처리하는 것

• 장점 : 시스템 자원 효율성 증가, 처리 비용 감소, 자원 공유

• 단점 : 하나의 스레드에 문제가 생기면 전체 프로세스에 영향이 감, 자원 공유로 인한 동기화 문제, 디버깅이 까다로움

📍 Stack과 Queue의 차이에 대해 설명해주세요.

[Stack]

• 후입선출(LIFO, Last In First Out)

• 삽입 연산은 Push, 삭제연산은 Pop

예시 : 접시, 브라우저 뒤로 가기, 실행취소(ctrl+z)

[Queue]

• 선입선출(FIFO, First In First Out)

• 삽입 연산은 Enqueue, 삭제연산은 Dequeue

예시 : 은행업무, 놀이기구 대기줄

📍 List, Map, Set의 차이점을 설명해주세요.

[List]

• 순서와 중복이 있는 자료구조

• 인덱스로 원소에 접근이 가능

• 크기가 가변적

[Map]

• key와 value를 같이 저장할 수 있는 자료구조

• key에 대한 중복이 없으며 순서를 보장하지 않음

• value의 중복은 허용됨

• 검색 속도 빠름

[Set]

• 순서가 없고, 중복된 데이터를 허용하지 않는 자료구조

• 검색 속도 빠름

• 중복되지 않은 데이터를 구할 때 유용

📍 라이브러리와 프레임워크의 차이점을 설명해주세요.

라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도권이 누구 또는 어디에 있는가에 있습니다.

프레임워크는 전체적인 흐름을 자체적으로 가지고 있으며, 프로그래머는 그 안에 필요한 코드를 작성합니다.(제어의 역전, IOC)

반면, 라이브러리는 프로그래머가 흐름에 대해 제어를 하며 필요한 상황에 가져다 쓸 수 있습니다.

🎁 JavaScript

📍 Sync와 Async의 차이점을 설명해주세요.

Sync는 요청을 보내고 해당 요청에 대한 응답을 기다리는 것을 의미하고, Async는 요청에 대한 응답을 기다리지 않고 다음 동작을 수행하는 것을 의미합니다.

예시로 alert와 같은 작업은 블로킹이고 setTimeout, fetch와 같은 작업들은 논블로킹입니다.

📍 Blocking과 Non-Blocking의 차이를 설명해 주세요.

블로킹과 논블로킹은 작업을 수행할 때 제어권이 누구한테 있는지에 따라 구분됩니다.

블로킹은 한 작업이 완료될 때까지 다음 작업을 수행하지 않는 것을 의미합니다.

논블로킹은 한 작업이 완료되지 않아도 다음 작업을 수행할 수 있는 것을 의미합니다.

📍 콜백함수에 대해 설명해주세요.

[콜백함수]

• 다른 함수의 인자로써 이용되는 함수

• 어떤 이벤트에 의해 호출되는 함수

콜백함수는 다른 함수에 매개변수로 넘겨준 함수를 뜻합니다.

📍 콜백지옥의 의미와 콜백지옥을 해결하는 방법을 설명해주세요.

콜백 지옥은 익명 함수에 콜백 함수를 전달하는 과정에서 콜백 내에서 함수 호출이 반복되어 코드의 들여쓰기 수준이 지나치게 깊어지는 현상을 말합니다.

이는 주로 이벤트 처리나 서버 통신과 같은 비동기 작업을 제어하는 데 사용되지만, 이러한 방식은 코드의 가독성을 저하시키고 유지보수를 어렵게 만듭니다.

• 해결 방법

1. 코딩 패턴으로 콜백 익명 함수를 각각의 함수로 분리

2. Promise 사용

3. Async + Await 사용

📍 Event Loop 에 대해 설명해주세요.

자바스크립트의 이벤트 루프는 단일 스레드에서 실행되는 비동기 작업을 처리하는 메커니즘입니다. 이벤트 루프는 Call stack, Micro task queue, Macro task queue로 구성됩니다.

Micro task queue에는 Promise, async/await 과 같은 작업들이 들어가고, Macro task queue에는 Web API (setInterval, setTimeout)와 같은 작업들이 들어갑니다.

이벤트 루프는 Call stack을 확인하고, Call stack이 비어있는 경우 Micro task queue의 작업을 Call stack으로 옮깁니다. 그리고 Micro task queue가 비어있는 경우, Macro task queue의 작업을 Call stack으로 옮기고 처리합니다.

📍 Promise와 Async, Await의 차이를 설명해주세요.

Async, Await 문법은 Promise를 더욱 쉽게 사용할 수 있도록 하는 ES8에서 도입된 비동기 처리 방식 문법입니다.

Async, Await을 사용할 경우 코드가 Promise를 사용한 코드보다 간결해지며 동기적인 코드흐름으로 개발이 가능하지만, 에러처리를 위해 try/catch문을 사용해야 합니다.

📍 map과 forEach의 차이를 설명해주세요.

map은 원본 배열을 변경하지 않고 새로운 배열을 생성합니다.

forEach는 반환 값이 없으며, 원본 배열을 직접 변경합니다.

📍 var, let, const의 차이를 설명해주세요.

[var]

• 중복 선언 가능

• 함수레벨 스코프

[let]

• 중복 선언 불가능

• 재할당 가능

• 블록레벨 스코프

[const]

• 중복 선언 불가능

• 재할당 불가능

• 블록레벨 스코프

📍 메서드 체이닝에 대해 설명해주세요.

자기 자신을 반환하는 함수를 연결하여 호출하는 것을 메서드 체이닝이라고 합니다.

코드가 간략해지는 장점이 있지만 에러 발생 시 어느 부분에서 에러가 발생했는지 알기 어렵다는 단점이 있습니다.

📍 일반 함수와 화살표 함수의 차이

[일반 함수]

• 함수 호출방식에 따라 this에 바인딩할 객체가 동적으로 결정됨

• new 키워드를 통해 constructor 함수로 사용 가능

• 함수 실행 시 암묵적으로 arguments 변수가 전달되어 사용 가능

[화살표 함수]

화살표 함수는 ES6부터 도입된 함수로 function 키워드 대신 화살표 =>를 사용해 좀 더 간략하게 함수를 정의할 수 있는 방식입니다.

• prototype property가 없기 때문에 new 키워드를 사용하여 constructor 함수로 사용할 수 없음

• arguments 객체를 생성하지 않음

• 화살표 함수의 this는 언제나 상위 스코프의 this(Lexical this)를 가리키며, this에 바인딩할 객체가 정적으로 결정됨

• 클로저(Closure)로 사용 가능

📍 this의 의미를 설명해주세요.

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이며, 함수의 호출 방식에 따라 특정 객체를 바인딩하게 됩니다.

1. 생성자 함수 내부에서 'this'는 생성자 함수가 생성할 인스턴스에 바인딩됩니다.

2. Call, Apply, 또는 Bind 메서드를 사용할 때는, 'this'는 함수에 첫 번째 인자로 전달된 객체에 바인딩됩니다.

3. 객체 내부의 메서드에서 호출될 때는 'this'는 해당 객체에 바인딩됩니다.

4. 위의 세 가지 경우를 제외한 일반 함수 호출에서는 'this'는 전역 객체에 바인딩됩니다.

5. 화살표 함수 내부에서 'this'를 사용할 경우, 'this'는 해당 화살표 함수가 선언된 상위 스코프의 'this'에 바인딩됩니다.

📍 함수 선언형과 함수 표현식의 차이를 설명해주세요.

함수 선언형(Function Declaration)의 경우 function 키워드를 사용하여 함수를 정의합니다. 함수 선연형은 호이스팅 되기 때문에 코드가 실행되기 전에 로드되고 선언하기 전에도 호출이 가능합니다.

함수 표현식(Function Expression)의 경우 변수에 함수를 할당하는 방식으로 함수를 정의합니다. 함수 표현식은 함수가 선언된 이후에만 호출이 가능하며, 함수가 할당된 변수가 접근 가능한 스코프 내에서만 호출할 수 있습니다.

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

호이스팅(Hoisting)은 변수 및 함수의 선언이 스코프 내의 최상단으로 끌어올려지는 것 같은 현상을 말하는데, 이는 자바스크립트 엔진이 코드 실행 전에 변수와 함수의 메모리 공간을 미리 할당해주기 때문입니다.

자바스크립트에서는 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당해 줍니다.

이로 인해 변수 및 함수 선언이 스코프의 최상단으로 끌어올려진 것 같은 현상이 발생하는데, 이를 호이스팅이라고 합니다.

주의할 점 : 함수 표현식은 호이스팅되지 않습니다. 함수 표현식은 변수에 함수를 할당하는 형태로, 변수의 할당 부분만 호이스팅됩니다.