24.07.26 day34 자바스크립트의 메모리 관리, AJAX

자바스크립트의 메모리 관리는 주로 자동화된 가비지 컬렉션(garbage collection)을 통해 이루어진다.

여기서 가비지 컬렉션은 자바스크립트 엔진이 더 이상 참조되지 않는 객체를 자동으로 메모리에서 해제하여 메모리 누수를 방지하는 과정이며, 주요 알고리즘은 참조 카운팅(Reference Counting)과 마크 앤 스윕(Mark-and-Sweep)이 있다.

자바스크립트의 메모리 관리를 이해하려면 몇 가지 주요 개념을 알아야 한다.

1. 메모리 할당

변수를 선언하고 값을 할당하면 메모리가 할당된다.

let number = 123; // 숫자 타입의 메모리 할당
let string = "Moonmisae"; // 문자열 타입의 메모리 할당
let obj = { key: "value" }; // 객체 타입의 메모리 할당

2. 메모리 사용

• 기본 데이터 타입: 숫자, 문자열, 불린 등은 고정된 크기를 가지며 스택(stack)에 저장된다.
• 참조 데이터 타입: 객체, 배열 등은 힙(heap)에 저장되며, 변수는 힙에 있는 데이터를 가리키는 참조를 저장한다.

let arr = [1, 2, 3]; // 배열은 힙에 저장되고 arr은 배열을 참조
let person = { name: "moon", age: 27 }; // 객체는 힙에 저장되고 person은 객체를 참조

3. 가비지 컬렉션

자바스크립트 엔진의 가비지 컬렉터는 더 이상 사용되지 않는 메모리를 자동으로 해제한다.

 

가비지 컬렉션의 주요 알고리즘

참조 카운팅 (Reference Counting)

• 각 객체에 대한 참조의 수를 추적한다.
• 참조 수가 0이 되면 해당 객체는 메모리에서 해제된다.
• 단점: 순환 참조(circular reference) 문제를 일으킬 수 있다.

function f() {
    let o1 = {};
    let o2 = {};
    o1.a = o2; // o1은 o2를 참조
    o2.a = o1; // o2는 o1을 참조
    // 순환 참조로 인해 가비지 컬렉션이 발생하지 않음
}

 

마크 앤 스윕 (Mark-and-Sweep)

• 루트(root) 객체에서 시작하여 도달 가능한 모든 객체를 "마크"한다.
• 마크되지 않은 객체는 "스윕" 단계에서 메모리에서 해제된다.
• 대부분의 현대 자바스크립트 엔진은 이 알고리즘을 사용한다.

let obj = { a: 1 };
obj = null; // obj가 null로 설정되면 이전 객체는 더 이상 참조되지 않으므로 가비지 컬렉션 대상

 

메모리 누수(Memory Leak)

가비지 컬렉션이 자동으로 수행되지만, 메모리 누수가 발생할 수 있다.

• 전역 변수: 전역 변수는 애플리케이션이 종료될 때까지 존재하므로 메모리 누수를 일으킬 수 있다.

var globalVar = "I am a global variable";

• 타이머 및 콜백: 사용 후 명시적으로 해제되지 않은 타이머 및 이벤트 리스너는 메모리 누수를 일으킬 수 있다.

setInterval(function() {
    // some code
}, 1000); // 타이머를 명시적으로 해제하지 않으면 메모리 누수 발생 가능

• 클로저: 클로저를 사용하여 참조가 남아 있는 경우 메모리 누수가 발생할 수 있다.

function outer() {
    let innerVar = "I am an inner variable";
    return function() {
        console.log(innerVar);
    };
}
let closure = outer();
// closure는 innerVar에 대한 참조를 유지

자바스크립트의 메모리 관리는 자동으로 이루어지긴 하지만, 메모리 누수 상황을 이해하고 예방하는 것이 중요하다.이를 통해 애플리케이션의 성능을 최적화하고 안정성을 높일 수 있다.

---

AJAX(Asynchronous JavaScript and XML)

 

AJAX는 웹 페이지를 전체적으로 새로 고침하지 않고도 서버와 비동기적으로 통신하여 데이터를 주고받을 수 있는 기술이며, 이를 통해 웹 애플리케이션의 사용자 경험을 향상시키고, 더 빠르고 동적인 인터페이스를 제공할 수 있다.

주요 개념

1. 비동기적 통신: AJAX는 비동기적 방식으로 서버와 통신하므로, 서버 응답을 기다리는 동안에도 웹 페이지의 다른 작업을 계속 수행할 수 있다.
2. XMLHttpRequest 객체: AJAX 요청을 만들기 위해 자바스크립트에서 사용하는 객체인데, 최신 웹 애플리케이션에서는 fetch API도 많이 사용된다.
3. 다양한 데이터 형식: AJAX는 XML뿐만 아니라 JSON, HTML, 텍스트 등의 다양한 데이터 형식을 지원한다.

사용 예제

XMLHttpRequest(GET 방식)

// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();

// 요청 초기화
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

// 요청 상태 변화에 따른 콜백 함수 설정
xhr.onreadystatechange = function() {
    // readyState가 4(완료)이고 status가 200(성공)일 때
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 서버 응답 처리
        console.log(JSON.parse(xhr.responseText));
    }
};

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

 

fetch API(POST 방식)

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1
    })
})
.then(response => {
    // 응답이 성공적인지 확인
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    // 응답을 JSON으로 변환
    return response.json();
})
.then(data => {
    // 데이터 처리
    console.log(data);
})
.catch(error => {
    // 에러 처리
    console.error('There has been a problem with your fetch operation:', error);
});

주요 용도

• 데이터 로드 및 업데이트: 페이지를 새로 고침하지 않고 데이터를 동적으로 로드하거나 업데이트한다.
• 양식 제출: 폼 데이터를 서버로 전송하고 결과를 받아 처리한다.
• 자동 완성 기능: 사용자가 입력할 때마다 서버로부터 데이터를 받아 자동 완성 목록을 표시한다.
• 실시간 업데이트: 주기적으로 서버에 요청을 보내 데이터를 갱신하여 실시간 정보를 제공한다.

그러나 AJAX는 자바스크립트에서 사용하기 좋은 비동기 통신이고 최신의 React 프레임워크에서는 axios를 사용하여 비동기 통신을 처리하는 경우가 더 간편하고 좋기 때문에 다들 axios를 사용한다.

그래도 자바스크립트를 학습하며 AJAX를 통한 비동기 통신을 학습하면 axios를 사용할 때 더 잘 사용할 수 있기 때문에 사용해보는 것도 좋다.