[기술면접] javascript

KoEunseo·2023년 3월 2일
JavaScriptjs기술면접
0

interview

목록 보기
10/11

1. 실행 컨텍스트가 무엇인가요?

실행 컨텍스트(Execution Context)는 JavaScript 코드가 실행될 때 생성되는 환경을 말합니다. 즉, 코드가 실행될 때 해당 코드의 변수, 함수, 객체 등이 저장되는 공간이라고 할 수 있습니다.

각 실행 컨텍스트는 크게 3가지로 구성됩니다.

  1. Variable Environment(변수 환경)
    현재 컨텍스트 내의 식별자(identifier, 변수, 함수 이름 등)들이 저장되는 공간입니다.
    변수의 선언, 함수의 정의 등이 여기서 처리됩니다.
    자바스크립트 엔진은 변수를 참조할 때, 현재 실행되는 컨텍스트의 변수 환경에서 식별자를 찾습니다.

  2. Lexical Environment(어휘 환경)
    현재 실행 컨텍스트의 외부 환경(상위 스코프)에 대한 정보를 저장합니다.
    스코프 체인(scope chain)을 형성하며, 변수를 참조할 때 변수 환경과 함께 사용됩니다.

  3. This binding(this 바인딩)
    함수 실행 시 this 키워드가 참조하는 객체를 저장합니다.
    실행 컨텍스트는 코드의 실행과 함께 생성되며, 스택(Stack) 구조로 관리됩니다. 함수 호출 시 새로운 실행 컨텍스트가 스택에 쌓이고, 함수 실행이 끝나면 해당 컨텍스트는 스택에서 제거됩니다. 이를 통해 코드 실행 시 실행 컨텍스트가 차례로 생성되고 제거되며, 코드의 실행 흐름을 관리합니다.

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

호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 스코프 상단으로 옮겨지는 현상을 말합니다. 이는 코드 실행 전에 변수와 함수를 먼저 처리하고 초기화하는 동작입니다.

변수의 경우, 선언은 호이스팅되지만, 초기화는 그렇지 않습니다. 즉, 변수의 선언은 해당 스코프의 맨 위로 옮겨지지만, 할당은 그대로 남아있게 됩니다. 만약 초기화되지 않은 변수에 접근하면, undefined가 반환됩니다.

함수의 경우, 함수 선언식(Function Declaration)의 경우 함수 전체가 스코프 맨 위로 옮겨지고, 함수 표현식(Function Expression)의 경우에는 변수 선언과 마찬가지로 선언부만 스코프 맨 위로 옮겨지게 됩니다.

예를 들어 아래 코드에서 변수 a와 함수 b는 호이스팅되며, 변수 a는 undefined로 초기화되고 함수 b는 전체가 스코프 맨 위로 옮겨진 후, 코드 실행이 시작됩니다.

console.log(a); // undefined
b(); // 'hello'

var a = 'hello';

function b() {
  console.log('hello');
}

호이스팅은 코드의 가독성과 이해를 어렵게 만들 수 있으므로, 변수와 함수를 스코프 상단에 선언하고 사용하는 것이 좋습니다. 또한, let, const, class 등의 ES6에서 도입된 변수 선언 방식은 호이스팅되지 않으므로, var보다 예측 가능한 동작을 할 수 있습니다.

+ 클로저에 대해 설명해보세요.

클로저는 반환된 내부함수가 자신이 선언되었을 때의 환경인 스코프를 기억해 스코프 밖에서 호출되어도 그 환경 에 접근할 수 있는 함수입니다.
함수 내부에 있는 변수는 외부에서 접근할 수 없지만, 클로저를 통해 해당 함수를 외부에서 호출하면, 내부 변수에 접근할 수 있습니다.
클로저는 자바스크립트에서 매우 중요한 개념 중 하나로, 변수의 스코프(scope)를 유지하면서 데이터를 숨기고, 함수와 상태를 가지는 객체를 만들 수 있습니다. 이러한 특징으로 인해, 모듈 패턴, 비동기 처리, 메모이제이션 등 다양한 분야에서 사용됩니다.

3. 화살표 함수와 일반함수의 차이를 설명해보세요.

화살표 함수(Arrow Function)는 ES6에서 도입된 새로운 함수 표현식입니다. 일반 함수와 비교했을 때 몇 가지 차이점이 있습니다.

문법
화살표 함수는 다음과 같은 문법으로 정의합니다.

(param1, param2, ...) => { statements }

this 바인딩
화살표 함수는 함수를 선언할 때의 this를 그대로 사용합니다. 일반 함수에서는 함수가 실행될 때 this가 동적으로 결정됩니다. 하지만 화살표 함수에서는 함수가 정의될 때의 this를 사용하므로, 실행 컨텍스트에 따른 this 오류를 방지할 수 있습니다.

const obj = {
  x: 1,
  getX: function() {
    const inner = () => {
      console.log(this.x);
    };
    inner();
  }
};

obj.getX(); // 1

arguments 객체
화살표 함수는 arguments 객체를 지원하지 않습니다. 따라서 화살표 함수 내부에서 인자를 처리할 때, rest parameter 문법을 사용하거나 인자를 배열로 전달해야 합니다.

const sum = (...args) => {
  return args.reduce((acc, cur) => acc + cur, 0);
};

console.log(sum(1, 2, 3)); // 6

생성자 함수로 사용 불가
화살표 함수는 생성자 함수로 사용할 수 없습니다. 생성자 함수는 객체를 생성하기 위해 new 연산자와 함께 호출되는 함수입니다. 하지만 화살표 함수는 this를 바인딩하지 않으므로, new 연산자와 함께 호출하면 오류가 발생합니다.

따라서, 화살표 함수는 주로 콜백 함수 등 간단한 함수를 정의할 때 사용하며, 생성자 함수나 메서드로 사용하는 경우에는 일반 함수를 사용하는 것이 좋습니다.

4. this에 대해 아는대로 설명해보세요.

this는 자바스크립트에서 실행 컨텍스트(Execution Context) 내에서 현재 객체를 가리키는 참조 변수입니다. this는 함수가 호출될 때 동적으로 결정되며, 호출하는 방법과 위치에 따라 this가 가리키는 객체가 달라집니다.

일반적으로, this는 다음과 같은 방법으로 결정됩니다.

전역 공간에서의 this
전역 공간에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window 객체가 전역 객체이고, Node.js 환경에서는 global 객체가 전역 객체입니다.

함수 호출에서의 this
함수 호출에서 this는 호출한 객체를 가리킵니다. 호출한 객체가 없는 경우에는 전역 객체를 가리킵니다. 함수 호출 방법에 따라 this가 달라집니다.

일반 함수 호출에서의 this: this는 전역 객체(window 또는 global)를 가리킵니다.

메서드 호출에서의 this: this는 메서드를 호출한 객체를 가리킵니다.

const obj = {
  x: 1,
  getX() {
    console.log(this.x);
  }
};

obj.getX(); // 1

생성자 함수 호출에서의 this: this는 새로 생성된 객체를 가리킵니다.

이벤트 핸들러에서의 this
이벤트 핸들러에서 this는 이벤트가 발생한 DOM 요소를 가리킵니다.

call, apply, bind 메서드에서의 this
call, apply, bind 메서드를 사용하여 함수를 호출할 때, this를 직접 지정할 수 있습니다.

call 메서드: this를 지정하고, 인자를 각각 전달합니다.

function myFunction() {
  console.log(this);
}

const obj = { x: 1 };
myFunction.call(obj); // obj

apply 메서드: this를 지정하고, 인자를 배열로 전달합니다.

function myFunction(x, y) {
  console.log(this.x + x + y);
}

const obj = { x: 1 };
myFunction.apply(obj, [2, 3]); // 6

bind 메서드: this를 지정하고, 새로운 함수를 반환합니다.

function myFunction(x, y) {
  console.log(this.x + x + y);
}

const obj = { x: 1 };
const newFunction = myFunction.bind(obj, 2);
newFunction(3); // 6

5. call( ), apply( ), bind( )의 차이점을 말해주세요.

JavaScript에서 call(), apply(), bind()는 함수를 호출할 때 this 값을 지정하는 방법을 제공합니다. 이들 메서드의 차이점은 다음과 같습니다.

call()
call() 메서드는 함수를 호출하면서 this를 지정할 수 있습니다. 또한, 인수를 개별적으로 전달할 수 있습니다. 즉, 함수를 호출할 때 this 값과 인수를 개별적으로 지정할 수 있습니다.
예시:

function greeting() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'John' };
greeting.call(person); // 출력 결과: "Hello, John!"

apply()
apply() 메서드는 call()과 유사하지만, 인수를 배열로 전달한다는 차이점이 있습니다. 배열 안에 인수를 넣어 전달할 수 있습니다.
예시:

function greeting(message) {
  console.log(`${message}, ${this.name}!`);
}

const person = { name: 'John' };
greeting.apply(person, ['Hello']); // 출력 결과: "Hello, John!"

bind()
bind() 메서드는 함수를 호출하지 않고 this 값을 지정할 수 있습니다. 즉, 새로운 함수를 반환하며, 이 새로운 함수는 지정된 this 값을 가집니다. 이후 호출시에 새로운 함수를 호출하여 this 값을 사용합니다.
예시:

function greeting(message) {
  console.log(`${message}, ${this.name}!`);
}

const person = { name: 'John' };
const sayHello = greeting.bind(person, 'Hello');
sayHello(); // 출력 결과: "Hello, John!"

따라서, call(), apply(), bind() 모두 함수를 호출하면서 this 값을 지정할 수 있는 유용한 메서드입니다. 이들을 잘 활용하면 코드의 가독성과 유지 보수성을 높일 수 있습니다.

6. 자바스크립트 비동기 처리(callback, promise, async/await)에 대해 설명해주세요

JavaScript에서 비동기 처리는 네트워크 요청, 파일 읽기/쓰기, 타이머 등과 같이 시간이 걸리는 작업을 처리할 때 매우 중요한 개념입니다. 자바스크립트에서 비동기 처리를 할 때 사용되는 방법으로는 콜백(callback), 프로미스(promise), async/await 등이 있습니다.

콜백(callback)
콜백(callback)은 함수의 인수로 전달되는 함수입니다. 콜백은 다른 함수가 실행을 마친 후에 실행되는 함수로, 비동기적으로 처리해야 하는 작업이 끝났을 때 결과값을 반환하거나 다른 작업을 수행할 수 있습니다. 콜백 함수는 보통 함수의 마지막 인수로 전달되며, 함수의 실행이 끝나면 콜백 함수가 호출됩니다.

예시:

function getData(callback) {
  setTimeout(function() {
    callback('Data received!');
  }, 1000);
}
getData(function(data) {
  console.log(data);
});

프로미스(promise)
프로미스(promise)는 ES6에서 추가된 개념으로, 비동기 작업이 완료되면 결과를 반환하는 객체입니다. 프로미스는 세 가지 상태(Pending, Fulfilled, Rejected) 중 하나를 가지며, 비동기 작업이 완료되면 상태가 변경됩니다.

예시:

function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data received!');
    }, 1000);
  });
}
getData().then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log(error);
});

async/await
async/await는 ES8에서 추가된 개념으로, async 함수와 await 키워드를 사용하여 비동기 작업을 처리합니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 async 함수 내에서만 사용할 수 있습니다. await 키워드를 사용하면 프로미스가 처리될 때까지 기다린 후에 결과를 반환합니다.

예시:

function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data received!');
    }, 1000);
  });
}
async function getDataAsync() {
  const data = await getData();
  console.log(data);
}
getDataAsync();

이러한 비동기 처리 방법들은 JavaScript에서 매우 중요한 개념입니다. 각각의 방법이 각자의 장단점을 가지고 있으며, 상황에 따라 적절한 방법을 선택하여 사용하는 것이 좋습니다.

7. promise와 async/await의 차이점을 설명해주세요.

Promise와 async/await는 둘 다 자바스크립트 비동기 처리를 위한 방법입니다. Promise는 ES6에서 도입된 개념이고, async/await는 ES8에서 추가된 개념입니다. Promise와 async/await의 가장 큰 차이점은 코드의 가독성과 적용 범위입니다.

코드 가독성
Promise는 then()과 catch() 함수를 사용하여 비동기 처리 결과를 처리하며, 이는 비동기 처리 과정을 이해하기 어렵게 만들 수 있습니다. 그에 반해 async/await는 동기 코드와 유사하게 작성할 수 있어 가독성이 높습니다.

  • Promise:
getData().then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log(error);
});
  • async/await:
async function getDataAsync() {
  try {
    const data = await getData();
    console.log(data);
  } catch(error) {
    console.log(error);
  }
}

적용 범위
Promise는 콜백 함수를 대체하여 비동기 처리를 할 수 있도록 해주는 범용적인 방법입니다. 그에 반해 async/await는 async 함수 내에서만 사용할 수 있으며, 비동기 처리가 필요한 함수를 async 함수로 감싸주어야 합니다.

  • Promise:
function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data received!');
    }, 1000);
  });
}
  • async/await:
async function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data received!');
    }, 1000);
  });
}

따라서 Promise와 async/await는 각각의 상황에 맞게 적용할 수 있는 방법입니다. Promise는 범용적이며 ES6 이전 환경에서도 사용 가능합니다. async/await는 가독성이 높고 동기 코드와 유사하게 작성할 수 있으며, ES8 이상 환경에서만 사용 가능합니다.

8. 이벤트 루프가 무엇인가요?

자바스크립트는 단일 스레드 기반의 언어이기 때문에, 하나의 작업이 끝날 때까지 다음 작업을 수행할 수 없습니다. 이러한 문제를 해결하기 위해 자바스크립트는 이벤트 루프(Event Loop)를 사용합니다.

이벤트 루프는 자바스크립트의 실행 순서를 제어하는 메커니즘입니다. 이벤트 루프는 두 가지의 주요한 역할을 수행합니다.

  • Call Stack
    자바스크립트는 함수를 호출할 때마다 호출 스택(Call Stack)에 쌓아놓습니다. 호출 스택은 실행 중인 함수의 컨텍스트를 저장하는 스택입니다. 이벤트 루프는 호출 스택을 모니터링하며, 스택이 비워지면 대기 중인 작업을 가져와서 실행합니다.

  • Task Queue
    자바스크립트는 비동기 작업을 수행할 때, 작업을 태스크 큐(Task Queue)에 넣습니다. 태스크 큐는 실행 순서를 기다리는 작업을 저장하는 큐입니다. 예를 들어 setTimeout 함수로 지정한 작업이 실행되기 위해서는 일정 시간이 지난 후 해당 작업이 태스크 큐에 추가되고, 호출 스택이 비워졌을 때 이벤트 루프가 해당 작업을 실행합니다.

이벤트 루프는 호출 스택이 비워질 때마다 태스크 큐에서 작업을 꺼내와서 호출 스택에 추가합니다. 이렇게 하면 자바스크립트는 비동기 작업을 수행하면서도 호출 스택이 차단되지 않고 다른 작업을 수행할 수 있습니다.

요약하자면, 이벤트 루프는 호출 스택과 태스크 큐를 모니터링하며, 호출 스택이 비워지면 대기 중인 작업을 가져와서 실행합니다. 이러한 방식으로 자바스크립트는 단일 스레드에서 비동기 작업을 수행할 수 있습니다.

9. 마이크로태스크 큐와 태스크 큐의 차이점을 아시나요?

마이크로태스크 큐와 태스크 큐는 둘 다 자바스크립트 비동기 처리 메커니즘에서 사용되는 큐(queue)이지만, 실행 우선순위와 처리 시점에서 차이가 있습니다.

태스크 큐(Task Queue)는 자바스크립트 엔진이 처리해야 할 콜백(callback)들을 저장하는 큐입니다. 대표적으로 setTimeout, setInterval, XMLHttpRequest, fetch 등의 비동기 함수에서 등록한 콜백 함수가 태스크 큐에 저장됩니다. 태스크 큐는 마이크로태스크 큐보다 우선순위가 낮습니다.

마이크로태스크 큐(Microtask Queue)는 태스크 큐보다 우선순위가 높은 작업들을 저장하는 큐입니다. Promise에서의 then, catch, finally와 같은 콜백 함수, MutationObserver에서 등록한 콜백 함수, queueMicrotask 함수에서 등록한 콜백 함수 등이 마이크로태스크 큐에 저장됩니다. 마이크로태스크 큐는 다른 마이크로태스크 큐를 호출하는 함수를 실행하는 경우에도 실행됩니다.

이벤트 루프는 호출 스택이 비어있을 때 태스크 큐에서 작업을 꺼내와서 처리합니다. 만약 태스크 큐에 처리할 작업이 없다면, 이벤트 루프는 마이크로태스크 큐를 확인하여 마이크로태스크 큐에 작업이 있다면 처리합니다. 이렇게 마이크로태스크 큐의 작업이 먼저 처리되고, 태스크 큐의 작업이 처리됩니다.

따라서, 마이크로태스크 큐와 태스크 큐는 비슷한 역할을 하지만 우선순위와 처리 시점에서 차이가 있으며, 이벤트 루프에서 실행될 때 처리 순서에도 차이가 있습니다.

10. Promise와 setTimeout 우선 순위에 대해 말해주세요.

Promise 콜백 함수는 마이크로태스크 큐에 등록되며, setTimeout 콜백 함수는 태스크 큐에 등록됩니다. 마이크로태스크 큐는 태스크 큐보다 우선순위가 높으므로, 마이크로태스크 큐에 등록된 Promise 콜백 함수는 태스크 큐에 등록된 setTimeout 콜백 함수보다 먼저 처리됩니다.

따라서, Promise와 setTimeout이 동시에 실행되는 경우, Promise 콜백 함수가 먼저 실행되고, setTimeout 콜백 함수는 그 다음에 실행됩니다. 다만, 이벤트 루프가 실행되는 환경마다 동작 방식이 다를 수 있으므로, 항상 이러한 우선순위를 기대할 수 있는 것은 아닙니다.

11. 이벤트 버블링과 캡쳐링이란 무엇인가요?

이벤트 버블링과 캡쳐링은 DOM에서 이벤트가 전파되는 방식을 나타내는 용어입니다.

이벤트 캡쳐링은 이벤트가 상위 요소에서 하위 요소로 전파되는 방식을 말합니다. 이벤트 캡쳐링 단계에서는 상위 요소부터 하위 요소까지 차례대로 이벤트가 전파됩니다.

이벤트 버블링은 이벤트가 하위 요소에서 상위 요소로 전파되는 방식을 말합니다. 이벤트 버블링 단계에서는 하위 요소에서 상위 요소까지 차례대로 이벤트가 전파됩니다.

즉, 예를 들어, div 요소 안에 button 요소가 있을 때, button을 클릭하면 이벤트 캡쳐링 단계에서는 div에서 button으로 이벤트가 전파되고, 이벤트 버블링 단계에서는 button에서 div로 이벤트가 전파됩니다. 이벤트 버블링이 일반적인 전파 방식이며, 이벤트 캡쳐링은 거의 사용되지 않습니다.

하지만, 이벤트 전파 도중에 이벤트를 멈추거나 취소할 수 있는 방법이 있습니다. 예를 들어, 이벤트 캡쳐링 단계에서 이벤트를 취소하면, 이벤트 버블링 단계에서는 이벤트가 전파되지 않습니다. 이벤트 캡쳐링과 이벤트 버블링을 이용하여 이벤트 전파 도중에 원하는 처리를 할 수 있습니다.

12. event.target과 event.currentTarget의 차이점을 말해주세요.

이벤트 핸들러 함수에서 사용되는 event 객체에는 target과 currentTarget 프로퍼티가 있습니다.

target은 이벤트가 발생한 요소를 나타내며, 이벤트 버블링 단계에서 이벤트를 발생시킨 요소와 일치합니다. 예를 들어, div 요소 안에 button 요소가 있을 때, button을 클릭하면 target은 button 요소가 됩니다.

currentTarget은 이벤트 핸들러가 등록된 요소를 나타내며, 이벤트가 전파되는 도중에 현재 이벤트가 처리되고 있는 요소를 나타냅니다. 이벤트 핸들러가 등록된 요소와 target이 일치하지 않을 수 있습니다. 예를 들어, div 요소 안에 button 요소가 있을 때, button을 클릭하면 currentTarget은 div 요소가 됩니다.

따라서, 이벤트 핸들러 함수에서 target을 이용하여 이벤트가 발생한 요소를 처리하고, currentTarget을 이용하여 이벤트 핸들러가 등록된 요소를 처리할 수 있습니다. 이벤트 버블링 단계에서 이벤트가 처리되는 요소가 달라질 수 있기 때문에 target과 currentTarget은 다를 수 있습니다.

13. var, let, const의 차이점을 말해주세요.

var, let, const는 모두 변수를 선언하는 키워드입니다.

var는 변수를 함수 스코프 또는 전역 스코프에서 선언할 때 사용됩니다. var로 선언된 변수는 변수의 재선언이 가능하며, 선언하기 전에 사용해도 에러가 발생하지 않습니다. 또한, 변수의 스코프는 함수 스코프이므로 함수 내에서 선언한 변수는 함수 내에서만 유효합니다.

let과 const는 블록 스코프를 가지므로 중괄호({})로 둘러싸인 코드 블록 내에서만 유효합니다. let과 const의 차이점은 변수의 재할당 가능 여부입니다. let으로 선언된 변수는 재할당이 가능하지만, const로 선언된 변수는 재할당이 불가능합니다. 따라서, const로 선언된 변수는 상수를 선언할 때 사용됩니다.

또한, let과 const는 선언하기 전에 사용할 수 없으며, TDZ(Temporal Dead Zone)이 발생합니다. TDZ는 변수가 선언되기 전까지 변수에 접근할 수 없는 현상을 말합니다. 이는 var로 선언된 변수에서는 발생하지 않습니다.

따라서, 변수의 유효 범위와 재할당 가능 여부를 고려하여 적절한 키워드(var, let, const)를 선택하여 사용해야 합니다.

14. 자바스크립트의 원시타입에 대해 설명해주세요.

숫자(Number): 숫자 데이터 타입으로 정수와 부동소수점 숫자를 모두 포함합니다.

문자열(String): 문자 데이터 타입으로 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 표현할 수 있습니다.

불리언(Boolean): 참(True) 또는 거짓(False) 값을 가지는 데이터 타입입니다.

null: null은 값이 없음을 나타내는 특별한 데이터 타입입니다.

undefined: undefined는 값이 할당되지 않았거나 선언되지 않은 변수를 나타내는 특별한 데이터 타입입니다.

심볼(Symbol): 유일한 값으로, 주로 객체의 프로퍼티 이름으로 사용됩니다.

원시 타입은 값 자체가 변수에 직접 저장되며, 변수에 할당된 값은 변경되지 않습니다. 따라서, 원시 타입의 값은 불변성(immutable)을 가집니다. 이와는 반대로, 객체 타입은 값이 변수에 저장되는 것이 아니라 메모리 상의 위치를 참조하므로 변수에 할당된 값이 변경될 수 있습니다.

15. ES6 문법에 대해 아는대로 설명해주세요.

ES6는 ECMAScript 2015로도 알려진 JavaScript 언어의 표준 버전 중 하나입니다.

let, const: 블록 레벨 스코프를 가지는 변수 선언 방법

화살표 함수(Arrow function): 함수 표현식을 더 간결하게 작성할 수 있도록 한 문법

템플릿 리터럴(Template literal): 백틱(`)으로 감싸진 문자열에서 변수나 표현식을 쉽게 삽입할 수 있는 문법

구조 분해 할당(Destructuring assignment): 객체나 배열에서 필요한 값만 추출하여 변수에 할당하는 문법

클래스(Class): 객체지향 프로그래밍을 더욱 쉽게 구현할 수 있도록 하는 문법

모듈(Module): 파일 단위로 코드를 분리하여 작성할 수 있도록 하고, 다른 파일에서 해당 파일의 기능을 불러와 사용할 수 있는 문법

Promise: 비동기 작업을 더 쉽게 다룰 수 있도록 하는 문법

async/await: Promise를 더욱 쉽게 사용할 수 있는 문법으로, 비동기 코드를 동기식 코드처럼 작성할 수 있도록 하는 문법

나머지 매개변수(Rest parameter)와 전개 연산자(Spread operator): 가변 인자 함수를 구현하거나 배열/객체를 쉽게 다룰 수 있는 문법

Set과 Map: 중복을 허용하지 않는 값의 집합(Set)과 키-값 쌍으로 이루어진 자료형(Map)을 제공하는 문법

심볼(Symbol): 유일한 값으로, 주로 객체의 프로퍼티 이름으로 사용됩니다.

16. forEach( )와 Map( )의 차이가 무엇인가요?

forEach()와 Map()은 모두 배열을 순회하면서 각각의 요소에 대해 처리하는 메서드입니다. 하지만 두 메서드는 몇 가지 차이점이 있습니다.

반환값의 차이점:
forEach()는 아무런 값을 반환하지 않습니다.
Map()은 새로운 배열을 반환합니다.

사용 용도의 차이점:
forEach()는 단순히 각 요소를 순회하며 작업할 때 사용합니다.
Map()은 각 요소를 순회하면서 새로운 배열을 반환하는데 사용합니다. 이를 통해 기존 배열의 요소를 변경하지 않고 새로운 배열을 만들 수 있습니다.

콜백 함수 인자의 차이점:
forEach()의 콜백 함수는 세 개의 인자를 받습니다. 각각 순회 중인 요소, 해당 요소의 인덱스, 그리고 전체 배열입니다. 그러나 이 중에서 인덱스와 전체 배열은 선택적이며, 사용하지 않을 경우 생략할 수 있습니다.
Map()의 콜백 함수는 두 개의 인자를 받습니다. 각각 순회 중인 요소와 해당 요소의 인덱스입니다. 전체 배열은 사용할 수 없습니다.
따라서, forEach()와 Map()의 사용 용도를 잘 구분하여 사용해야 합니다. forEach()는 요소를 순회하며 작업을 수행하고, Map()은 기존 배열을 변경하지 않고 새로운 배열을 반환하기 위해 사용됩니다.

17. Sass/Scss/css-in-js 차이점을 말해주세요.

언어:
Sass/Scss는 CSS 전처리기로서, 새로운 문법과 기능을 CSS 위에 추가하여 사용합니다.
CSS-in-JS는 JavaScript를 이용하여 CSS를 생성하는 방법으로, CSS를 작성하는 대신 JavaScript 객체를 사용합니다.

스타일링 방법:
Sass/Scss는 CSS에 비해 변수, 함수, 중첩 등의 기능을 활용하여 효율적인 스타일링이 가능합니다.
CSS-in-JS는 JavaScript를 이용하여 스타일링을 하기 때문에, 동적인 스타일링과 스타일과 컴포넌트를 결합하여 사용할 수 있습니다.

파일 형태:
Sass/Scss는 별도의 전처리기가 필요하며, Sass 파일을 CSS 파일로 컴파일하여 사용합니다.
CSS-in-JS는 JavaScript 파일 안에서 스타일을 관리하므로, 별도의 CSS 파일이 필요하지 않습니다.

따라서, Sass/Scss와 CSS-in-JS는 각각 다른 방식으로 CSS 코드를 관리하며, 사용 목적과 상황에 따라 적합한 방법을 선택해야 합니다. Sass/Scss는 전통적인 CSS 작성 방식에 비해 강력한 기능을 제공하고, CSS-in-JS는 동적이고 유연한 스타일링 방식을 제공합니다.

18. AJAX에 대해 설명해주세요.

AJAX(Asynchronous JavaScript and XML)는 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있도록 하는 웹 개발 기법입니다. 이를 통해 페이지 이동 없이도 서버로부터 데이터를 가져와 브라우저에 동적으로 반영할 수 있습니다.

기존에는 웹 페이지를 요청할 때마다 새로운 페이지를 로딩하고, 화면 전체를 다시 그려야 했습니다. 이는 페이지 이동이 많은 웹 사이트에서 사용자 경험을 저해하는 요인이 될 수 있습니다. AJAX는 이를 해결하기 위해, 브라우저와 서버가 비동기적으로 데이터를 교환하여 페이지 전체를 다시 로딩하지 않고도 부분적인 데이터만 갱신할 수 있도록 합니다.

AJAX는 JavaScript, XML, HTML 등의 기술을 사용하여 구현할 수 있으며, 최근에는 JSON과 같은 다른 데이터 형식을 사용하는 경우가 많습니다. AJAX를 이용하여 브라우저와 서버 간에 데이터를 비동기적으로 교환할 수 있으며, 이를 통해 더욱 효율적인 웹 개발을 할 수 있습니다.

19. HTML이 렌더링 중에 자바스크립트가 실행되면 렌더링이 멈추는 이유를 설명해주세요.

HTML이 렌더링되는 동안 JavaScript 코드가 실행되면 브라우저는 HTML 파싱을 중지하고, JavaScript 코드를 실행하기 위해 파싱을 중단합니다. 이 때문에 브라우저는 JavaScript 코드 실행이 끝나기 전까지 HTML 파싱을 계속할 수 없으며, 화면이 멈추어 보일 수 있습니다. 이를 "렌더링 블로킹"이라고 합니다.

JavaScript 코드가 렌더링을 차단하는 것은, 브라우저가 JavaScript 코드를 실행할 때 single-threaded로 작동하기 때문입니다. 즉, 브라우저에서 하나의 스레드(thread)만 사용하며, JavaScript 코드 실행 외에 다른 작업을 수행할 수 없습니다. 이 때문에 브라우저는 HTML 파싱과 같은 다른 작업을 수행할 수 없고, 렌더링이 블로킹되게 됩니다.

이러한 렌더링 블로킹을 최소화하려면, JavaScript 코드를 최적화하고, 비동기적으로 실행하도록 코드를 작성하는 것이 좋습니다. 또한, JavaScript를 이용하여 DOM을 조작할 때, 여러 개의 DOM 조작을 묶어서 실행하는 등의 최적화 방법도 있습니다.

20. package.json에서 dependencies와 devDependencies의 차이점을 말해주세요.

dependencies와 devDependencies는 둘 다 package.json 파일에서 사용되는 프로퍼티로, npm 패키지를 관리하는 데 사용됩니다.

dependencies는 애플리케이션의 실행에 필요한 패키지를 지정합니다. 즉, 애플리케이션이 실행될 때 필요한 패키지로, 예를 들어 React나 lodash와 같은 패키지가 이에 해당됩니다. 이러한 패키지는 애플리케이션의 소스 코드에서 직접 import 또는 require하여 사용합니다.

반면, devDependencies는 개발 단계에서만 필요한 패키지를 지정합니다. 예를 들어, 테스트 라이브러리, 빌드 도구, 코드 스타일 검사 도구 등이 이에 해당됩니다. 이러한 패키지는 애플리케이션 코드에서 직접 사용하지 않고, 개발 도구 또는 테스트 코드에서만 사용됩니다.

dependencies와 devDependencies의 가장 큰 차이점은, 애플리케이션을 배포할 때 dependencies만 포함되고, devDependencies는 배포되지 않는다는 것입니다. 즉, 애플리케이션을 실행할 때 필요한 패키지만 포함되어 용량을 줄이고, 의존성 관리를 보다 간편하게 할 수 있습니다.

profile
KoEunseo
주니어 플러터 개발자의 고군분투기
이전 포스트

[기술면접] CS

다음 포스트

[react] useState와 useEffect,

0개의 댓글