1. this란 무엇인가?

키워드

• 현재 실행중인 함수를 참조하는 방식
• 일반 함수는 window 객체 참조
• 생성자 함수는 new 연산자를 통해서 생성하고 참조
• 메서드, 화살표 함수, 이벤트 핸들러 등

답변

• this는 객체 내부에서 해당 객체를 참조하는 방법입니다.
• 일반 함수는 내부에서 참조해도 window 객체를 참조하는 것이고,
• 객체 안에 있는 메서드나 이벤트 핸들러를 통해서 내부에서 참조하면 해당 객체를 참조합니다.
• 클래스 내부의 생성자 함수를 참조하는 것은 new 연산자를 통해 객체를 생성하고 난 후 가능합니다.

2. 브라우저 저장소의 차이점

키워드

• LocalStorage, SessionStorage, Cookie
• LocalStorage는 영구적으로 데이터 저장, 5MB 정도 용량 가짐
• SessionStorage는 세션 동안만 데이터 저장, 5MB 정도 용량 가짐
• Cookie는 설정된 만료일까지 데이터를 유지, 4KB 정도 용량 가짐

답변

• 일단, LocalStorage, SessionStorage, Cookie라는 3개의 저장소가 있습니다.
• 로컬스토리지는 영구적으로 데이터 저장할 때 쓰고, 5MB 정도 용량을 가집니다.
• 세션스토리지는 브라우저는 닫을 때까지 데이터 저장할 때 쓰고, 5MB 정도 용량을 가집니다.
• 쿠키는 설정된 만료일까지 데이터를 유지하고, 4KB 정도 용량을 가집니다.

3. JavaScript는 어떤 언어일까?

키워드

• 웹 페이지의 동적인 기능을 담당하는 프로그래밍 언어
• 변수에 타입을 지정하지 않고 값을 할당 할 수 있음
• 싱글 스레드 : 한 번에 하나의 작업만 처리
• 비동기 : 특정 작업의 완료를 기다리지 않고 다음 코드를 실행하여 다른 작업을 수행

답변

• 자바스크립트는 웹 페이지의 동적인 기능을 담당하는 언어입니다.
• 변수에 타입을 지정하지 않고 값을 할당 할 수 있고
• 클라이언트, 서버, 모바일 애플리케이션까지 사용됩니다.
• 싱글 스레드 언어라서, 하나의 스레드에 하나의 작업만 처리합니다
• 하지만 작업 처리에 따른 블록킹이 되지 않기 때문에, 비동기로 작동합니다
• 그래서 비동기처리를 통해서 작업을 수행해야하는 경우가 있습니다.

4. Promise를 통해서 비동기 처리 해보세요.

// Promise 생성
const fetchData = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  setTimeout(() => {
    const data = 'Hello, World!';
    // 비동기 작업이 성공한 경우 resolve 호출
    resolve(data);
    // 비동기 작업이 실패한 경우 reject 호출
    // reject('Error occurred'); // 예외 상황을 시뮬레이션하기 위해 주석 처리
  }, 2000);
});

// Promise 사용
fetchData
  .then((result) => {
    console.log('Success:', result);
  })
  .catch((error) => {
    console.log('Error:', error);
  });

5. 이벤트 루프에 대해서 말해보세요.

키워드

• 자바스크립트 비동기 작업 중에서 사용되는 감시 장치
• 콜스택이 비어있는지 확인하고, 비어있으면 콜백큐에 있는 작업을 콜스택으로 옮김

답변

• 이벤트 루프는 비동기 작업 중에서 콜백큐랑 콜스택을 감시하는 장치입니다.
• 콜스택이 비어있으면, 콜백큐에 있는 여러 함수 및 객체들을 콜 스택으로 보내줍니다.

6. 마이크로태스크 큐, 태스크 큐에 대해서 말해보세요.

키워드

• 마이크로태스크 큐는 Promise 함수가 들어가는 곳
• 태스크 큐는 setTimeout과 같은 타이머 합수가 들어가는 곳
• 우선 순위는 마이크로태스크가 더 높음

답변

• 마이크로태스크 큐와 태스크 큐는 비동기로 진행될 때, 콜백 큐 안에 있는 큐들 중 하나 입니다.
• 마이크로태스크 큐에는 Promise 실행 함수가 들어가고, 태스크 큐는 타이머 실행 함수가 들어갑니다
• 그리고 함수가 실행되는 우선순위는 마이크로태스크, 타이머 순으로 진행됩니다.

7. 자바스크립트 보다 타입스크립트를 쓴 이유는?

키워드

• 자바스크립트 기반
• 타입 확인으로 가독성 올라감

답변

• 타입스크립트는 일단 자바스크립트 기반 언어이기 때문에 호환성이 높습니다.
• 그리고 타입을 지정하기 때문에 타입에러와 같은 번거로운 문제가 발생하지 않습니다.
• 그래서 코드의 가독성이 좋고 유지보수에 조금 더 도움이 됩니다.