Post

JAVASCRIPT threaded, ajax

스레드(thread)란?

▶ 스레드(thread)란 컴퓨터 프로세스 내에서 실행되는 작업의 단위를 의미합니다.
일반적으로 멀티 스레드 언어에서는 여러 개의 스레드가 동시에 실행되며, 각 스레드는 별도의 작업을 수행하는데 이렇게 하면 여러 작업을 동시에 처리할 수 있어 시스템의 성능을 향상시킬 수 있습니다.
하지만 JavaScript는 단일 스레드 언어이기 때문에 한 번에 하나의 작업만을 처리할 수 있는데 이는 JavaScript가 브라우저나 Node.js와 같은 환경에서 단일 스레드로 동작하기 때문입니다.


만약 단일 스레드로 동시에 처리하고 싶을 땐?

▶ 만약 단일 스레드인 JavaScript로 멀티 스레드처럼 동시에 여러 개를 처리하고 싶을 땐 비동기적인 방법을 사용해야 합니다.
즉, 비동기적인 함수를 사용하여 작업을 백그라운드에서 처리하고, 작업이 완료되면 콜백 함수를 호출하여 결과를 처리하게 되면 단일 스레드에서도 동시에 여러 작업을 처리할 수 있습니다.

ajax란?

▶ AJAX는 “Asynchronous JavaScript and XML”의 약자로, 비동기적으로 서버와 브라우저 간에 데이터를 주고받는 기술을 의미합니다.
이를 통해 웹 페이지를 새로고침하지 않고도 동적으로 데이터를 업데이트하거나 서버로부터 데이터를 받아올 수 있고, 아래와 같은 특징이 있습니다.

  1. 비동기적으로 데이터 송수신
    • AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 서버와 데이터를 주고받을 수 있습니다. 이는 사용자 경험을 향상시키고 페이지의 응답성을 높입니다.
      페이지 새로고침 없이도 사용자의 입력에 따라 동적으로 데이터를 업데이트하거나 서버로부터 추가 정보를 받아와 화면에 표시할 수 있습니다.
  2. XMLHttpRequest 객체
    • AJAX를 구현하기 위해 가장 기본적으로 사용되는 객체는 XMLHttpRequest 객체입니다. 이 객체를 사용하여 서버와의 비동기 통신을 수행합니다.
      최근에는 Fetch API나 라이브러리(jQuery의 $.ajax 등)를 사용하여 AJAX 요청을 더 쉽게 처리할 수 있습니다.
  3. 서버로 데이터 요청
    • AJAX를 사용하면 클라이언트(브라우저)에서 서버로 데이터를 요청할 수 있습니다. 이때 요청은 비동기적으로 이루어지므로 페이지의 다른 부분이나 사용자 인터랙션에 영향을 주지 않습니다.
      요청을 보낼 때는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 선택하여 데이터를 전달하며, 서버로부터 받은 데이터를 콜백 함수를 통해 처리합니다.
  4. 데이터의 비동기적 수신
    • 서버로부터 데이터를 비동기적으로 수신하면, 클라이언트는 이 데이터를 콜백 함수나 프로미스 등을 통해 처리합니다. 주로 JSON 형식으로 데이터를 주고받습니다.
      받은 데이터를 가지고 동적으로 웹 페이지를 업데이트하거나 사용자에게 보여줄 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();

// 요청 설정
xhr.open('GET', 'https://api.example.com/data', true);

// 요청 완료 시 실행할 콜백 함수
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  } else {
    console.error('Request failed with status:', xhr.status);
  }
};

// 요청 전송
xhr.send();

위의 예시는 ajax를 사용하는 간단한 예시로 이러한 방식으로 사용하면 서버와 비동기적으로 데이터를 주고받을 수 있습니다.
최근에는 Fetch API나 라이브러리(jQuery, Axios 등)를 사용하여 AJAX 요청을 더 쉽게 처리하는 것이 일반적이라고 합니다.


이렇게 오늘은 threaded, ajax에 대해 알아봤는데요,
오늘 정리한 내용도 면접을 준비할 때 나올 수 있는 질문인만큼 미리미리 숙지해서 알아두면 좋겠죠?
그럼 다음엔 또 다른 면접 정보들을 가져와보도록 하겠습니다 😁!

This post is licensed under CC BY 4.0 by the author.