프론트앤드 기술면접 TOP65-(9)

86. API 비동기 처리방법

처리 방법으로는 콜백, 프라미스, async/await 방식이 있습니다.

1. 콜백(Callback)

함수의 인자로 다른 함수를 전달하여, 비동기 작업이 완료된 후 호출되는 방식입니다.

• 장점 : 간단하게 구현할 수 있다.
• 단점 : 콜백 지옥을 경험 할 수 있다..
  

function fetchData(url, callback) {
    setTimeout(() => {
        // 비동기 작업 완료 후 콜백 호출
        const data = { message: "데이터 수신" };
        callback(data);
    }, 1000);
}

fetchData("http://example.com", (data) => {
    console.log(data.message); // "데이터 수신"
});

2. 프라미스(Promise)

비동기 작업의 완료 또는 실패를 나타내는 객채이다. then()과 catch() 메서드를 사용하여 결과를 처리합니다.

• 장점: 가독성이 향상되고, 에러 처리가 쉬워진다.
• 단점: 여전히 여러 개의 then이 중첩되면 가독성이 떨어질 수 있다.

fetch(url) // URL에서 데이터를 비동기적으로 가져옵니다.
  .then(response => response.json()) // 응답을 JSON 형태로 변환합니다.
  .then(data => {
    // 데이터 처리
    console.log(data); // 받은 데이터를 처리하는 부분
  })
  .catch(error => {
    // 에러 처리
    console.error('에러 발생:', error);
  });

3. async/await

프라미스를 기반으로 한 문법으로, 비동기 코드를 동기처럼 작성할 수 있게 해줍니다. async 함수 내에서 await를 사용하여 프라미스가 해결될 떄까지 기다립니다.

• 장점: 코드가 더 깔끔하고 가독성이 높아진다.
• 단점 : await는 비동기 작업이 완료될 때까지 기다리므로, 성능에 영향을 줄 수 있다.

async function fetchData() {
  try {
    const response = await fetch(url); // URL에서 데이터를 비동기적으로 가져옵니다.
    const data = await response.json(); // 응답을 JSON 형태로 변환합니다.
    // 데이터 처리
    console.log(data); // 받은 데이터를 처리하는 부분
  } catch (error) {
    // 에러 처리
    console.error('에러 발생:', error);
  }
}

87. TCP 3-way Handshake

TCP(전송 제어 프로토콜)는 연결 지향 프로토콜로, 데이터 전송 전에 연결을 확립하기 위해 3-way handshake 과정을 거칩니다. 이 과정은 다음과 같이 이루어집니다.

1. SYN: 클라이언트가 서버에 연결 요청을 위해 SYN 패킷을 보냅니다. 이 패킷은 "연결을 시작하겠다"는 신호입니다.

2. SYN-ACK: 서버는 클라이언트의 SYN패킷을 수신하고, 연결 요청을 수락하는 응답으로 SYN-ACK패킷을 반환합니다. 이 패킷은 '연결을 요청 받았고, 나도 연결할 준비가 되었다"는 의미입니다.

3. ACK: 클라이언트는 서버의 SYN-ACK 패킷을 수신하고, 연결이 확립되었음을 확인하는 ACK 패킷을 보냅니다. 이로써 연결이 완료된다.

👉 TCP 3-way handshake는 클라이언트와 서버 간의 연결을 확립하기 위한 과정으로, SYN, SYN-ACK, ACK의 3단계로 이루어집니다. 이 과정을 통해 안정적인 데이터 전송이 가능해집니다.