Today I Learned (기술 면접)

질문 1)async, await, promise 차이점을 말씀해주세요✅

대답 1)

promise와 async/await 모두 자바스크립에서 비동기 코드 처리에 사용된다.
async 함수는 비동기 작업을 수행하고, await 키워드는 비동기 작업이 완료될 때까지 기다리며, promise는 비동기 작업의 결과를 나타낸다.
또, promise.then을 사용하는 것보다 async/await를 사용하기 간편하며 어떤 지점에서 에러가 발생했는지 쉽게 찾을 수 있다.

Promise란?

• 자바스크립트에서 비동기 처리에 사용되는 객체이다.
  내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해하면 좋다.

promise에는 Pending(대기), Fulfilled(이행), Rejected(실패) 3가지 상태가 있다.

• 비동기 처리가 완료 되지 않았다면 Pending, 완료 되었다면 Fulfilled, 실패하거나 오류가 발생하였다면 Rejected 상태를 갖는다.

Promise 사용 예시

const condition = true;
const promise = new Promise((resolve, reject) => {
  if (condition) {
    resolve('resolved');
  } else {
    reject('rejected');
  }
});

promise
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.error(error);
  });

• 값이 true이면 resolve를 호출하여 then()을 통해 콘솔 로그로 값을 받을 수 있고 false일 경우 reject를 호출하여 catch를 통해 에러 값을 받는다.
• then()과 catch() 문의 체이닝을 통해 비동기 로직의 성공 여부에 따른 분기 처리가 가능하다.

async/await란?

• promise를 좀 더 편하게 사용할 수 있는 비동기 처리 문법이다.

• Promise의 단점은 .then()의 지옥을 맛볼 수 있다.

• await 키워드를 만나면 promise가 처리될 때까지 기다린다. 결과는 그 이후 반환된다.

// await는 async 함수 안에서만 동작합니다.
let value = await promise;

• await는 async 함수 안에서만 동작한다.

async/await 사용 예시

(async () => {
  const condition = true;
  const promise = new Promise((resolve, reject) => {
    if (condition) {
      resolve('resolved');
    } else {
      reject('rejected');
    }
  });

  try {
    const result = await promise;
    console.log(result);
  } catch (err) {
    console.error(err);
  }
})();

• async/await은 promise가 거부되면 마치 throw문을 작성한 것처럼 에러가 던져집니다.
• 실제 상황에선 promise가 거부 되기 전에 약간의 시간이 지체되는 경우가 있다. 이런 경우엔 await가 에러를 던지기 전에 지연이 발생한다.
• await가 던진 에러는 throw가 던진 에러를 잡을 때처럼 try..catch를 사용해 잡을 수 있다.

참고 사이트

질문 2)리액트 life cycle과 각 life cycle의 역할을 설명해주세요✅

대답 2)

라이프사이클은 컴포넌트 생명주기를 말하며, mount, update, unmount로 구분할 수 있다.
컴포넌트 생명주기는 컴포넌트가 생성되고, 사용되고, 소멸되기까지 과정을 말한다. 라이프사이클 과정에서 호출되는 메소드들이 있는데 componentDidMount()는 컴포넌트가 생성될때 한 번 호출 되며, componentDidUpdate는 컴포넌트의 속성 값 혹은 상태 값이 변경 되었을때, componentWillUnMount는 컴포넌트가 소멸될 때 호출된다. 또한 render 메소드는 초기 화면을 그려줄 때와 업데이트 시에 호출된다.