JAVASCRIPT threaded, ajax
스레드(thread)란?
▶ 스레드(thread)란 컴퓨터 프로세스 내에서 실행되는 작업의 단위를 의미합니다.
일반적으로 멀티 스레드 언어에서는 여러 개의 스레드가 동시에 실행되며, 각 스레드는 별도의 작업을 수행하는데 이렇게 하면 여러 작업을 동시에 처리할 수 있어 시스템의 성능을 향상시킬 수 있습니다.
하지만 JavaScript는 단일 스레드 언어이기 때문에 한 번에 하나의 작업만을 처리할 수 있는데 이는 JavaScript가 브라우저나 Node.js와 같은 환경에서 단일 스레드로 동작하기 때문입니다.
만약 단일 스레드로 동시에 처리하고 싶을 땐?
▶ 만약 단일 스레드인 JavaScript로 멀티 스레드처럼 동시에 여러 개를 처리하고 싶을 땐 비동기적인 방법을 사용해야 합니다.
즉, 비동기적인 함수를 사용하여 작업을 백그라운드에서 처리하고, 작업이 완료되면 콜백 함수를 호출하여 결과를 처리하게 되면 단일 스레드에서도 동시에 여러 작업을 처리할 수 있습니다.
ajax란?
▶ AJAX는 “Asynchronous JavaScript and XML”의 약자로, 비동기적으로 서버와 브라우저 간에 데이터를 주고받는 기술을 의미합니다.
이를 통해 웹 페이지를 새로고침하지 않고도 동적으로 데이터를 업데이트하거나 서버로부터 데이터를 받아올 수 있고, 아래와 같은 특징이 있습니다.
- 비동기적으로 데이터 송수신
- AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 서버와 데이터를 주고받을 수 있습니다. 이는 사용자 경험을 향상시키고 페이지의 응답성을 높입니다.
페이지 새로고침 없이도 사용자의 입력에 따라 동적으로 데이터를 업데이트하거나 서버로부터 추가 정보를 받아와 화면에 표시할 수 있습니다.
- AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 서버와 데이터를 주고받을 수 있습니다. 이는 사용자 경험을 향상시키고 페이지의 응답성을 높입니다.
- XMLHttpRequest 객체
- AJAX를 구현하기 위해 가장 기본적으로 사용되는 객체는 XMLHttpRequest 객체입니다. 이 객체를 사용하여 서버와의 비동기 통신을 수행합니다.
최근에는 Fetch API나 라이브러리(jQuery의 $.ajax 등)를 사용하여 AJAX 요청을 더 쉽게 처리할 수 있습니다.
- AJAX를 구현하기 위해 가장 기본적으로 사용되는 객체는 XMLHttpRequest 객체입니다. 이 객체를 사용하여 서버와의 비동기 통신을 수행합니다.
- 서버로 데이터 요청
- AJAX를 사용하면 클라이언트(브라우저)에서 서버로 데이터를 요청할 수 있습니다. 이때 요청은 비동기적으로 이루어지므로 페이지의 다른 부분이나 사용자 인터랙션에 영향을 주지 않습니다.
요청을 보낼 때는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 선택하여 데이터를 전달하며, 서버로부터 받은 데이터를 콜백 함수를 통해 처리합니다.
- AJAX를 사용하면 클라이언트(브라우저)에서 서버로 데이터를 요청할 수 있습니다. 이때 요청은 비동기적으로 이루어지므로 페이지의 다른 부분이나 사용자 인터랙션에 영향을 주지 않습니다.
- 데이터의 비동기적 수신
- 서버로부터 데이터를 비동기적으로 수신하면, 클라이언트는 이 데이터를 콜백 함수나 프로미스 등을 통해 처리합니다. 주로 JSON 형식으로 데이터를 주고받습니다.
받은 데이터를 가지고 동적으로 웹 페이지를 업데이트하거나 사용자에게 보여줄 수 있습니다.
- 서버로부터 데이터를 비동기적으로 수신하면, 클라이언트는 이 데이터를 콜백 함수나 프로미스 등을 통해 처리합니다. 주로 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에 대해 알아봤는데요,
오늘 정리한 내용도 면접을 준비할 때 나올 수 있는 질문인만큼 미리미리 숙지해서 알아두면 좋겠죠?
그럼 다음엔 또 다른 면접 정보들을 가져와보도록 하겠습니다 😁!