Colin's Blog
자바스크립트에서 JSON 형식을 이용한 데이터 통신 방법

JSON은 JavaScript Object Notation의 약자로, 데이터를 표현하고 전송하기 위한 경량화된 데이터 교환 형식입니다. 자바스크립트에서 JSON 형식을 사용하여 데이터를 통신하는 방법에 대해 알아보겠습니다.

1. JSON.stringify()

JSON.stringify() 함수는 JavaScript 객체나 배열을 JSON 문자열로 변환합니다. 이를 통해 객체나 배열을 전송 가능한 형태로 변환할 수 있습니다.

let data = { name: "John", age: 30 };
let jsonString = JSON.stringify(data);
console.log(jsonString);

위의 예시에서 data 객체를 JSON.stringify() 함수를 사용하여 문자열로 변환하였습니다. 변환된 jsonString은 다음과 같은 결과를 출력할 것입니다.

{"name":"John","age":30}

2. JSON.parse()

JSON.parse() 함수는 JSON 문자열을 JavaScript 객체로 변환합니다. 이를 통해 전송받은 JSON 데이터를 다시 JavaScript에서 사용 가능한 형태로 변환할 수 있습니다.

let jsonString = '{"name":"John","age":30}';
let data = JSON.parse(jsonString);
console.log(data.name); // 출력 결과: John

위의 예시에서 jsonString이라는 JSON 문자열을 JSON.parse() 함수를 사용하여 JavaScript 객체로 변환한 후, 해당 객체의 속성에 접근하여 값을 출력하였습니다.

3. XMLHttpRequest를 이용한 JSON 데이터 통신

XMLHttpRequest를 이용하여 서버로부터 JSON 데이터를 요청하고, 받아온 데이터를 JSON 형태로 다루는 방법을 알아보겠습니다.

let request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com/data', true);
request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
        let data = JSON.parse(request.responseText);
        console.log(data);
    } else {
        console.error('Error:', request.status);
    }
};
request.onerror = function() {
    console.error('Network Error');
};
request.send();

위의 예시에서 XMLHttpRequest를 이용하여 GET 메서드로 https://api.example.com/data 주소에 데이터를 요청합니다. 요청이 성공적으로 완료되면 onload 이벤트 핸들러가 실행되며, 요청이 성공적으로 완료되어 응답 데이터를 받아온 경우 JSON.parse() 함수를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다.

4. Fetch API를 이용한 JSON 데이터 통신

Fetch API를 이용하여 서버로부터 JSON 데이터를 요청하고, 받아온 데이터를 JSON 형태로 다루는 방법을 알아보겠습니다.

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

위의 예시에서 fetch를 사용하여 GET 메서드로 https://api.example.com/data 주소에 데이터를 요청합니다. response.json() 메서드를 사용하여 응답 데이터를 JSON 형태로 변환한 후 결과를 출력합니다. 요청이 실패한 경우 catch 블록에서 에러를 처리합니다.

JSON 형식을 이용한 데이터 통신은 자바스크립트에서 일반적으로 사용되는 방법 중 하나입니다. JSON.stringify()와 JSON.parse() 함수를 사용하여 JSON 데이터를 다룰 수 있으며, XMLHttpRequest 또는 Fetch API를 이용하여 데이터를 요청하고 받아올 수 있습니다. 이를 활용하여 웹 애플리케이션에서 서버와의 데이터 통신을 간편하게 처리할 수 있습니다.

© 2018 Colin. All rights reserved.