기술 면접: 동기 / 비동기, Promise, 콜백 지옥, async / await

동기 비동기 차이

동기 Synchronous

동기는 요청과 결과가 동시에 일어납니다. 요청을 하면 시간이 얼마나 걸리든 요청한 자리에서 결과가 주어져야 합니다. 동기방식은 직관적이고 순서에 맞춰 진행되는 장점이 있지만, 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있습니다.

비동기 Asynchronous

비동기 처리는 요청과 결과가 동시에 일어나지 않고, 응답을 즉시 처리하지 않아도 되므로 대기 시간 동안 다른 작업을 처리할 수 있습니다. 이는 자원을 효율적으로 활용할 수 있게 해주는 장점이 있지만, 동기 방식보다 복잡하고 구현이 어려울 수 있습니다.

블록/논블록은 기술적으로 명확히 구분

동기/비동기는 블록/논블록과 다르게 기술적으로 구분되지 않으며, 추상적인 구분 즉, 행위에 대한 이야기

---

Promise에 대한 개념을 설명해 주세요.

Promise는 자바스크립트 비동기 처리 패턴 중 하나로, 비동기적으로 처리되는 작업의 결과를 나타내는 객체입니다. 기존의 사용하던 콜백 방식의 약점을 보완하여 나온 패턴으로 가독성을 높이고 콜백지옥을 피할 수 있으며 비동기 처리 시점을 명확히 표현할 수 있습니다.
Promise는 세 가지 상태(state)를 가질 수 있습니다. 비동기 작업이 아직 수행되지 않은 상태인 pending, 비동기 작업이 성공적으로 완료된 fulfilled 상태, 비동기 작업이 실패한 rejected 상태가 있습니다.
Promise를 생성할 때는 Promise 생성자 함수를 호출하면 됩니다. Promise 생성자 함수는 비동기 작업을 수행하고, 작업이 완료되면 Promise 객체를 반환합니다.

---

콜백 지옥(Callback Hell)이란 무엇이며, 어떻게 해결할 수 있나요?

콜백 지옥이란 비동기 처리를 위해 연속적으로 콜백 함수를 사용할 때, 들여 쓰기 수준이 매우 깊어지는 문제입니다.
콜백지옥은 콜백함수의 중첩이 깊어질수록 코드를 이해하기 어렵게 만들고, 디버깅이나 유지보수를 어렵게 만들어서 생산성을 저하시키는 문제가 있습니다.
콜백 지옥을 해결하는 방법에는 Promise 나 async/await을 사용하는 방법이 있습니다.

 

 

---

async/await에 대해 설명해 주세요.

async/await는 ES8에서 도입된 자바스크립트의 비동기 처리 패턴 중 하나입니다. 비동기 작업을 동기적인 코드처럼 보이게 하여 가독성과 유지보수성을 향상하는 방법입니다.

async 함수는 함수 앞에 async 키워드를 붙여 선언합니다. 이 함수는 Promise를 반환하며, 함수 내부에서 await 키워드를 사용하여 Promise가 처리될 때까지 기다리게 됩니다. 이때, async 함수는 Promise를 기다리는 동안 다른 작업을 수행할 수 있습니다.

async/await는 Promise를 보다 직관적이고 간결하게 사용할 수 있도록 해주며, then()과 catch() 메서드를 사용하지 않아도 되므로 가독성이 향상됩니다. 또한, try-catch 블록을 사용하여 에러 처리를 보다 간편하게 할 수 있습니다. 

await 키워드는 async 함수 내부에서 Promise 객체가 처리될 때까지 기다리는 용도로 사용됩니다. Promise 객체가 Fulfilled 상태가 되면, 그 결과 값을 반환하고 함수의 실행을 재개합니다. 만약 Promise 객체가 Rejected 상태가 되면, 에러를 throw 하고 해당 에러를 catch 블록에서 처리할 수 있습니다.

 

---

답변하지 못한 질문

 

자바스크립트가 싱글스레드를 갖고 있음에도 어떻게 비동기 처리를 하나요?

 

https://meetup.nhncloud.com/posts/89

 

 

---

추가로 공부할 질문

 

Promise는 콜백을 이용한 비동기 처리 패턴의 한계 중 하나인 에러처리의 곤란함을 극복한 문법입니다. callback을 통한 비동기 처리는 try catch문에서 에러를 캐치하지 못한다는 한계가 있습니다. Promise에서 try catch 문을 이용하여 비동기 함수의 에러를 캐치하는 것이 가능할까요? 가능하다면 or 불가능하다면 이유는 무엇인가요?

 

 

function readFile(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf8', (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
}

try {
  readFile('example.txt')
    .then(data => {
      console.log(data);
    })
    .catch(err => {
      console.error(err);
    });
} catch (err) {
  console.error(err);
}

 

위 코드에서 readFile() 함수가 반환하는 Promise 객체의 then() 메서드와 catch() 메서드 모두에서 try-catch 문을 사용하여 에러를 캐치할 수 있습니다. 하지만 try-catch 문은 Promise 객체를 반환하는 함수 자체에서 사용하는 것은 에러를 캐치할 수 없습니다. 따라서, Promise를 반환하는 함수를 사용할 때는 then() 메서드와 catch() 메서드를 사용하여 에러를 캐치해야 합니다.

 

---

 

async의 await 문법은 await 된 코드의 실행이 완료될 때까지 다음 코드를 실행하지 않고 기다리는 것 같아 보입니다. 이와 같은 async await 문법은 동기, 비동기 / 블로킹, 논블로킹 중 어떤 방식으로 동작한다고 생각하시나요?

 

1. 동기 / 블로킹
2. 동기 / 논블로킹
3. 비동기 / 블로킹
4. 비동기 / 논블로킹

 

option : 왜 n번 방식으로 동작하는지 알고 있나요?

 

 

아래가 맞는건진 확실하진 않음..

 // 비동기 & 블로킹
function delay(time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// 비동기 & 논블로킹
async function asyncFunc() {
  console.log("asyncFunc start"); // 비동기 & 논블로킹  
  await delay(1000); // 비동기 & 논블로킹
  console.log("asyncFunc end"); // 비동기 & 논블로킹
}

// 동기 & 논블로킹 / 비동기 & 논블로킹
console.log("before asyncFunc"); // 동기 & 논블로킹 
asyncFunc(); // 비동기 & 논블로킹 
console.log("after asyncFunc"); // 동기 & 논블로킹

 

1.  console.log("before asyncFunc");: 비동기 함수 호출 전, 일반적인 동기적 코드 실행. 즉, before asyncFunc 출력
   
   
2.  asyncFunc();: async/await 문법을 이용하여 비동기 함수 호출. asyncFunc 함수가 실행되는 동안 다음 코드가 실행될 수 있음.
   
   
3.  console.log("after asyncFunc");: asyncFunc 호출 후 즉시 출력됨. asyncFunc 함수의 처리가 끝날 때까지 기다리지 않음.
   
   
4.  console.log("asyncFunc start");: asyncFunc 함수 내의 첫 번째 console.log() 문이 실행됨.
   
   
5.  await delay(1000);: delay(1000) 함수가 반환하는 Promise 객체가 처리될 때까지 asyncFunc 함수 실행 일시 중지.
   
   
6.  1초 후, delay(1000) 함수가 반환하는 Promise 객체가 처리됨.
   
   
7.  console.log("asyncFunc end");: await 문 이후의 console.log() 문이 실행됨.

 

 

// 출력 결과
before asyncFunc
asyncFunc start
after asyncFunc
// (async 1초 대기)
asyncFunc end

 

 

코드를 어떻게 짜느냐에 따라 달라지지 않을까? 아직 잘 모르겠다

 

 

 

---

오늘 첫 기술 면접 스터디에서 면접자로 참여했다🫠😂심장을 망치로 쾅쾅 찍는 느낌으로 면접을 본 거 같다.

굉장히 많이 떨었고 녹화된 영상을 보니까 실수도 많이 하고 말을 너무 끊어서 한 것 같다.

다음에 다시 면접자로 참여할 때는 말을 좀 더 유연하게 해야 할 것 같고 실수도 줄여야 할 것 같다. 

 

• 블록/논블록의 제어권에 관한 설명을 더 자세히 했으면 좋았을 것 같다.
• async/await 설명을 한 번에 하지 못 했다.

 

 

벌써 다음 면접이 무섭다... 살려줘