타이머와 비동기 프로그래밍

1. 동기와 비동기 처리의 차이점을 설명해주세요.

동기는 '직렬적'으로 작동하는 방식으로 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 어떠한 작업를 처리할 동안 나머지 작업들은 대기한다.
비동기는 '병렬적'으로 작동하는 방식이다. 요청을 보낸 후 결과를 기다리지 않고 다음 작업이 동작하는 방식이다. 비동기 요청시 응답 후 처리할 '콜백 함수'를 함께 알려주는데 태스크가 완료되었을 때, '콜백 함수'가 호출된다. 비동기 처리를 예로 Web API, Ajax, setTimeout 등이 있다.
일반적으로 대규모나 병렬 작업에는 비동기 처리가 유용하며, 사용자 경험을 향상시키기 위해서도 비동기 방식이 자주 사용된다.

2. 이벤트 루프의 동작 방식을 마이크로태스크, 매크로태스크를 포함하여 설명하세요.

사진 출처 https://ko.javascript.info/event-loop

• 이벤트 루프의 동작 단계:

1. 매크로 태스크 큐에서 가장 오래된 태스크를 꺼내서 실행시킨다.
   2. 마이크로 태스크 큐에 있는 모든 태스크를 실행시킨다.
      이 작업은 마이크로태스크 큐가 빌 때까지 이어지고 태스크는 오래된 순서대로 처리됩니다.
   3. 렌더링할 것이 있으면 처리합니다.
   4. 매크로태스크 큐가 비어있으면 새로운 매크로태스크가 나타날 때까지 기다립니다.
   5. 1번으로 돌아간다.

참고)

• 실행 스택 (Call Stack): 현재 실행 중인 작업 또는 함수의 호출 스택
• 매크로태스크 큐 (Macrotask Queue): 매크로태스크(대표적으로 타이머나 이벤트 핸들러)가 대기하고 있는 큐
• 마이크로태스크 큐 (Microtask Queue): 마이크로태스크(대표적으로 프로미스 처리나 MutationObserver 콜백)가 대기하고 있는 큐

3. 비동기 코드에서 발생할 수 있는 문제 중 하나는 무엇이며, 그 문제를 어떻게 해결할 수 있을까요?

콜백 지옥(Callback Hell)이라 부르는 현상을 일으킬 수 있다. 콜백 지옥은 비동기 작업을 중첩된 콜백 함수로 처리할 때 코드의 가독성과 유지보수성이 저하되는 현상을 나타냅니다.
콜백 지옥을 해결하기 위해서는 프로미스를 사용합니다. 중첩된 콜백 대신 .then() 메서드를 체이닝하여 비동기 코드를 관리합니다. 또 Async/Await를 사용해 비동기 코드를 동기적인 스타일로 작성 합니다.
+) 비동기 코드 관리를 단순화하는 여러 라이브러리와 프레임워크 사용 (예를 들어, Node.js에서는 async.js와 같은 라이브러리), 자바스크립트 모듈화
+) 비동기 코드에서 발생할 수 있는 주요 문제 중 하나는 "경쟁 상태(Race Condition)"입니다. 경쟁 상태는 둘 이상의 비동기 작업이 동일한 리소스에 동시에 액세스하려고 시도할 때 발생하는 문제입니다. 이러한 상황에서 예측할 수 없는 결과가 발생할 수 있으며, 프로그램의 안정성과 신뢰성을 저해할 수 있습니다.

4. 디바운스와 스로틀의 차이점에 대해 설명해주세요.

• 디바운스는 연속적인 이벤트 중 마지막 이벤트를 기준으로 일정 시간 동안 대기한 후 한 번만 실행되는 기술입니다. 주로 검색창 자동 완성과 같이 입력을 기다린 후 결과를 보여주는 경우에 사용됩니다.
• 스로틀은 일정 주기로 이벤트를 실행하도록 하는 기술로, 입력이 들어올 때 일정 시간 간격으로 이벤트를 실행합니다. 주로 스크롤 이벤트와 같이 빈번한 이벤트의 처리율을 제한하기 위해 사용됩니다.

5. 블로킹과 논블로킹은 제어권의 관점에서 어떻게 다른가요?

• 블로킹은 한 작업이 다음 작업을 시작하기 위해 다른 작업의 완료를 기다리는 동작을 의미합니다. 블로킹 작업이 진행 중인 경우, 다른 작업은 대기 상태에 머무르고, 프로그램 제어권은 블로킹 작업에 의해 점유됩니다.(주로 동기적(synchronous) 작업에서 나타나며, I/O 작업(파일 읽기, 네트워크 요청)이나 긴 계산 작업 등에서 발생합니다.)
• 논블로킹은 한 작업이 다른 작업을 시작하거나 진행하면서 대기하지 않고 진행하는 동작을 의미합니다. 논블로킹 작업은 제어권을 다른 작업에 넘기며, 작업이 완료될 때까지 기다리지 않습니다. (주로 비동기적(asynchronous) 작업에서 사용되며, 이벤트 핸들링, 비동기 I/O 작업, 타이머 기반 작업에서 나타납니다.)
• 제어권 관점에서, 블로킹은 현재 작업이 완료되기를 기다리며 제어권을 점유하고 있어 다른 작업이 실행되지 않습니다. 이로 인해 전체 시스템이 지연될 수 있습니다. 반면, 논블로킹은 현재 작업이 다른 작업에게 제어권을 넘기고 계속 진행하므로, 다른 작업이 실행될 기회를 얻을 수 있습니다. 이는 시스템의 반응성을 향상시키고 멀티태스킹을 가능하게 합니다.

Ajax

1. Ajax에 대해서 설명해주세요.

• Ajax(Asynchronous JavaScript and XML)는 Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 이를 통해 웹 애플리케이션의 사용자 경험을 향상시키고, 웹 페이지의 동적성을 높일 수 있습니다. 서버는 HTML, XML, JSON등을 반환하는데, Ajax을 위한 데이터 형식은 JSON(JavaScript Object Notation)을 사용하는 것이 일반적입니다.
  +) 초창기에는 XMLHttpRequest 객체를 이용해서 요청하는 방식으로 처리하곤 했지만 코드가 복잡하고 가독성이 좋지 않다는 단점이 있었습니다. 그래서 최근에는 fetch 함수와 then, catch 메소드 등과 함께 체이닝으로 작성하는 것이 일반적입니다. 물론 axios와 같은 외부 라이브러리를 사용하기도 합니다.
  참고 https://velog.io/@gonasooc/AJAX%EC%97%90-%EB%8C%80%ED%95%B4-%EC%84%A4%EB%AA%85%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94

2. ajax, fetch, axios의 차이를 핵심 위주로 설명하세요

• Ajax는 XMLHttpRequest 객체를 사용하여 데이터를 비동기적으로 요청하고 응답을 처리하는 방법입니다. 주로 브라우저 내부의 네이티브 JavaScript로 Ajax를 구현하며, 콜백 함수를 사용하여 비동기 응답을 처리합니다. Ajax는 오래된 기술이며, 복잡한 작업을 수행하려면 많은 코드를 작성해야 합니다. 따라서 가독성과 유지보수성이 떨어질 수 있습니다.
• Fetch API는 웹 표준으로, 네이티브 JavaScript로 제공되는 최신 데이터 가져오기 및 전송을 위한 인터페이스입니다. Fetch는 Promise 기반으로 동작하며, 비동기 요청을 쉽게 생성하고 응답을 처리할 수 있습니다. Fetch API를 사용하면 XMLHttpRequest에 비해 더 단순하고 간결한 코드로 데이터 통신을 구현할 수 있습니다. 그러나 오래된 브라우저에서는 지원되지 않을 수 있습니다.
• Axios는 HTTP 클라이언트 라이브러리로, JavaScript 및 Node.js 환경에서 사용할 수 있으며, 브라우저와 서버 간의 데이터 통신을 단순화하고 개선하기 위해 설계되었습니다. Axios는 Promise 기반으로 동작하며, 브라우저 및 Node.js 환경에서 사용할 수 있으며, 여러 브라우저에서 안전하게 사용할 수 있습니다. Axios는 풍부한 기능과 편의성을 제공하며, 요청과 응답을 중앙 집중적으로 관리할 수 있으므로 많은 개발자에게 선호되는 HTTP 클라이언트 라이브러리입니다.

3. XMLHttpRequest와 Fetch API의 차이점은 무엇인가요?

• XMLHttpRequest는 오래된 기술로, 초기 웹 개발 단계에서 사용되었고 이 API는 복잡한 디자인과 브라우저 간의 차이로 인해 사용성이 낮았습니다. 또한 콜백 함수를 사용하여 비동기 응답을 처리하는 방식이 가독성을 낮추었습니다. Fetch API는 XMLHttpRequest에 비해 간결하고 더 직관적으로 설계되었습니다. Promise 기반으로 동작하며, 비동기 요청을 보내고 응답을 처리하는 방법이 훨씬 간단합니다. 이로 인해 코드의 가독성과 유지보수성이 향상됩니다.
• XMLHttpRequest는 크로스 오리진 요청(CORS)을 처리하기 위해 별도의 설정 및 헤더를 필요로 합니다. Fetch API는 CORS를 더 쉽게 처리할 수 있도록 설계되어 있습니다. 브라우저가 CORS 요청을 자동으로 처리하므로 사용자가 별도로 설정을 할 필요가 줄어듭니다.
• 요약 정리) XMLHttpRequest는 콜백 기반의 비동기 코드를 작성해야 했기 때문에 코드가 복잡해지고 디버깅이 어려웠지만 Fetch API는 XMLHttpRequest에 비해 더 간결하고 사용성이 높으며, Promise를 기반으로 하여 비동기 코드를 관리하기 용이합니다. 이러한 이점으로 인해 Fetch API가 현대 웹 개발에서 더 많이 사용되고 있습니다.

4. Ajax의 장단점에 대해 설명해주세요.

• 장점:
  Ajax는 비동기적으로 데이터를 교환하므로, 웹 페이지의 다른 부분은 블로킹되지 않고 계속 작동할 수 있습니다. 이는 사용자 경험을 향상시키고, 웹 페이지의 동적성을 높입니다.
  웹 페이지를 다시 로드하지 않고도 서버에서 데이터를 가져올 수 있으므로, 사용자가 더 빠른 응답을 받을 수 있습니다. Ajax를 사용하면 사용자 입력에 대한 실시간 검증이 가능하며, 자동 완성, 동적 콘텐츠 로딩 및 실시간 업데이트와 같은 편리한 기능을 구현할 수 있습니다.
  다른 웹 서비스 및 API와 통합하여 데이터를 가져오거나 제공할 수 있으며, 웹 애플리케이션의 기능을 확장할 수 있습니다.
• 단점:
  Ajax를 사용할 때, 보안 측면에서 주의가 필요합니다. Cross-Site Scripting(XSS) 및 Cross-Site Request Forgery(CSRF)와 같은 공격에 노출될 수 있습니다.
  일부 구형 브라우저에서 Ajax를 지원하지 않거나 제한적으로 지원할 수 있으므로, 크로스 브라우저 호환성을 유지하는 데 어려움이 있을 수 있습니다.
  Ajax로 생성된 콘텐츠는 초기에는 검색 엔진 최적화(SEO)에 어려움을 줄 수 있으며, 더 많은 노력이 필요할 수 있습니다.
  복잡한 Ajax 코드의 디버깅은 어려울 수 있으며, 콜백 함수와 비동기 처리로 인한 코드 흐름 관리가 어려울 수 있습니다.
  과도한 Ajax 요청이 서버에 부하를 줄 수 있으므로, 적절한 서버 리소스 관리가 필요합니다.
  콜백 지옥: 여러 개의 중첩된 콜백 함수로 인해 코드의 가독성이 떨어질 수 있으며, 이러한 중첩을 관리하기 어려울 수 있습니다.

5. JSON과 XML의 차이점에 대해 설명해 주세요.

• JSON은 JavaScript 객체와 배열의 구조를 따르며, 텍스트 기반의 작은 용량을 가지는 데이터 형식입니다. 데이터는 이름-값 쌍의 집합으로 표현됩니다. JSON은 종료 태그를 사용하지 않습니다.
• XML은 태그로 둘러싸인 요소(element)들의 계층 구조를 사용합니다. 각 요소는 시작 태그와 끝 태그로 구분됩니다. 데이터와 문서 구조를 함께 정의하는 데 사용됩니다.

프로미스

1. 프로미스의 3가지 상태 정보(pending, fulfilled, rejected)에 대해서 설명해주세요.

프로미스는 비동기 작업의 상태를 표현하는데 세 가지 주요 상태를 가집니다. "대기 중(Pending)"은 초기 상태로, 작업이 아직 완료되지 않았거나 거부되지 않았을 때 나타납니다. "이행됨(Fulfilled)"은 작업이 성공적으로 완료되고 결과가 사용 가능한 상태를 나타내며, "거부됨(Rejected)"은 작업이 실패한 상태를 의미합니다. 대기 중에서 이행됨 또는 거부됨 상태로 전환됩니다.

2. async/await과 promise의 차이점을 핵심 위주로 설명하세요

async/await과 Promise는 비동기 코드를 관리하는 방법 중 하나로, async/await은 Promise를 더 간결하게 작성할 수 있도록 하는 JavaScript의 기능입니다. 주요 차이점은 다음과 같습니다. async/await는 코드를 동기식으로 작성하고, 예외 처리가 간단하며 가독성이 높습니다. 반면, Promise는 더 낮은 수준의 비동기 코드를 작성하는 데 사용되며, then/catch를 사용하여 비동기 작업을 처리합니다.

3. Promise란 무엇인가요?

프로미스는 JavaScript에서 비동기 작업을 처리하기 위한 객체입니다. 프로미스는 세 가지 상태(pending, fulfilled, rejected) 중 하나를 가지며, 비동기 작업의 결과를 나타냅니다. 프로미스는 성공 또는 실패한 작업에 대한 처리 방법을 제공하며, 더 간결한 비동기 코드를 작성할 수 있도록 도와줍니다.

4. 콜백과 프로미스의 차이점은 무엇인가요?

콜백은 비동기 코드를 다루는 방법 중 하나로, 함수를 다른 함수의 인수로 전달하여 비동기 작업이 완료되면 호출되도록 합니다. 프로미스는 콜백 지옥(callback hell)과 같은 콜백 중첩을 방지하고 비동기 코드를 관리하기 위해 더 강력한 도구입니다. 프로미스는 세 가지 상태와 then/catch 메서드를 사용하여 비동기 작업의 성공과 실패를 처리할 수 있습니다.

5. Promise 체이닝(Promise chaining)은 어떤 것이며 어떤 이점이 있나요?

• Promise 체이닝은 여러 프로미스를 연결하여 비동기 작업을 순차적으로 또는 병렬로 실행하는 기술입니다. 이를 통해 비동기 코드를 구조화하고 관리할 수 있으며, 여러 단계의 비동기 작업을 간결하게 표현할 수 있습니다.

• 비동기 코드를 연속적으로 작성하므로 코드의 구조가 더 명확해집니다.
• 콜백 지옥(callback hell)을 피하고 더 읽기 쉬운 코드를 작성할 수 있습니다.
• 각 .then() 블록에서 오류 처리를 수행할 수 있으며, 각각의 작업은 자체적으로 오류를 처리하거나 전파할 수 있습니다.
• 여러 개의 Promise를 병렬로 실행하고, 모든 작업이 완료될 때까지 기다리지 않고 필요한 순서대로 처리할 수 있습니다.
• 각각의 Promise는 재사용 가능하며, 여러 곳에서 같은 작업을 다시 사용할 수 있습니다.