프론트엔드 기술 면접 - 2

지은·2023년 3월 20일

FE 면접

목록 보기

2/4

1. this의 용법을 아는대로 설명해주세요.

this는 함수를 호출하는 방법에 따라 값이 달라집니다.

메소드 호출에서 this는 해당 메소드를 호출하는 객체를 참조합니다.

일반적인 함수 호출에서 this는 전역 객체(window)를 참조합니다.

생성자 함수에서 this는 새롭게 생성된 인스턴스 객체를 참조합니다.
그래서 bind 메소드를 이용하면 함수가 어떻게 호출되었는지와 상관없이 this 값을 고정시킬 수 있습니다.

2.브라우저 저장소에 대해서 차이점을 설명해주세요.

브라우저 저장소에는 Local Storage, Session Storage, Cookie 세 가지가 있습니다.

먼저 데이터를 보관하는 기간에 차이가 있습니다.
로컬 스토리지는 데이터를 영구적으로 저장하는 데 사용되고, 세션 스토리지는 브라우저의 세션이 유지되는 동안만 데이터가 유지되기 때문에, 사용자가 브라우저 창을 닫거나 탭을 종료하면 데이터가 삭제됩니다. 쿠키는 만료 기간을 설정하여 유효 기간을 설정할 수 있으며, 유효기간을 설정하지 않으면 영구적으로 저장될 수 있습니다.

저장 용량에도 차이가 있습니다.
로컬 스토리지와 세션 스토리지는 최소 5MB 이상의 저장 용량을 제공하는 반면 쿠키는 4KB 이하의 작은 데이터만 저장할 수 있습니다.

3. Restful API에 대해서 아는대로 설명해주세요.

REST API는 HTTP 요청 메소드(GET, POST, PUT, PATCH, DELETE, OPTION 등)을 사용하여 데이터를 요청하고 응답하는 API를 말합니다.

HTTP 요청 메소드에 대해서 자세히 설명해주세요.

GET 메소드는 서버로부터 자원을 조회할 때 사용하며, 요청하는 자원은 URI에 명시됩니다.
POST는 서버에 새로운 자원을 생성합니다. 요청하는 데이터는 HTTP 요청 본문(body)에 담겨 전송됩니다.
PUT은 서버의 자원을 갱신하는 메소드이고, PATCH는 서버의 자원을 일부만 갱신하는 메소드입니다. PUT과 달리 PATCH는 변경하고 싶은 필드만 전송하면 됩니다.
DELETE는 서버의 자원을 삭제할 수 있는 메소드입니다. DELETE는 요청 본문에 데이터를 전송하지 않고, URI에 지정된 리소스만 삭제합니다.
OPTIONS는 서버에서 지원하는 HTTP 메소드와 헤더를 조회할 수 있습니다

PUT과 PATCH의 차이점에 대해 설명해주세요.

둘 다 리소스를 업데이트하는 데 사용됩니다. 하지만 전체 리소스를 새로운 값으로 교체하고 싶을 때는 PUT 메소드를 사용하고, 리소스의 일부만 업데이트하고 싶을 때는 PATCH 메소드를 사용합니다.

4. JavaScript는 어떤 언어인가요?

JavaScript는 싱글 스레드 언어입니다. 이는 JavaScript 엔진이 한 번에 하나의 작업만 처리할 수 있다는 것을 의미합니다. 그래서 어떤 작업이 실행중이라면 다음 작업은 실행 중인 작업이 끝날 때까지 대기해야 합니다.

하지만 실제 사용시에는 멀티 스레드처럼 사용하는데 어떻게 동작하나요?

JavaScript가 싱글 스레드 언어지만 멀티 스레드처럼 동작할 수 있는 이유는 JavaScript가 구동되는 환경인 웹 브라우저의 Web API와 콜백 큐, 이벤트 루프 덕분입니다.

이벤트 루프는 콜 스택과 콜백 큐를 통해 비동기적인 작업을 처리하는데, 콜 스택에는 현재 실행중인 함수들이 쌓이고, 콜백 큐에는 비동기 작업들이 대기합니다. 이벤트 루프는 이벤트 루프는 콜 스택과 콜백 큐를 모니터링하다가, 콜 스택에 있는 작업들이 모두 처리되어 콜 스택이 완전히 비게 되면 콜백 큐에서 작업을 꺼내 처리합니다.
이러한 방식으로 이벤트 루프를 통해 JavaScript는 멀티 스레드처럼 동작할 수 있습니다.

비동기적으로 실행되는 코드를 동기적으로 실행되게 하는 방법이 있나요?

콜백 함수, Promise, async/await 세 가지 방법을 사용할 수 있습니다.

콜백 함수는 비동기 함수가 실행된 후에 호출되는 함수로, 비동기 함수의 결과를 콜백 함수에서 처리하도록 구현할 수 있습니다.
하지만 비동기 작업이 연속적으로 발생하면 콜백 함수가 중첩되어 복잡도가 높아지는 콜백 지옥이 발생할 수 있습니다.
Promise는 콜백 지옥을 대체하기 위해 등장한 객체로, 비동기 작업을 연속적으로 처리할 때, then 메소드를 사용하여 체이닝 형태로 작성할 수 있습니다. 이를 통해 코드의 가독성을 높일 수 있습니다.
또한 catch 메소드를 사용하여 에러 처리를 하거나 finally 메소드를 사용하여 작업이 완료됐을 때 항상 실행할 로직을 작성할 수도 있습니다.
async/await은 프로미스를 문법적으로 개선한 것으로 Promise를 then 메소드로 체이닝하는 방식이 아니라 비동기 코드를 동기적인 코드처럼 작성할 수 있게 합니다. 따라서 코드를 더 간결하고 읽기 쉽게 작성할 수 있습니다.

세 가지 방법 모두 비동기 함수를 동기적으로 처리할 수 있지만, 코드의 가독성과 유지보수성을 고려하여 가장 적합한 방법을 선택해야 합니다.

// callback
funciton fetchData(callback) {
  fetch(url)
    .then(response => response.json())
    .then(data => callback(data)) // 비동기 함수의 결과를 콜백 함수에서 처리
}

// async/await
function fetchData() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

const result = fetchData();

5. Event Loop에 대해 알고 계신가요?

이벤트 루프는 콜 스택과 콜백 큐를 통해 비동기 작업을 처리하여, 싱글 스레드 언어인 JavaScript가 멀티 스레드처럼 동작할 수 있도록 합니다.
콜 스택은 현재 실행중인 함수가 쌓이고, 콜백 큐에는 비동기 작업들이 대기합니다. 이벤트 루프는 콜 스택과 콜백 큐를 모니터링하다가, 콜 스택이 완전히 비게 되면 콜백 큐에서 작업을 꺼내 처리합니다.
이러한 방식으로 이벤트 루프를 통해 JavaScript는 싱글 스레드언어임에도 멀티 스레드처럼 동작할 수 있습니다.