▶ JavaScript Tutorial

JavaScript JavaScriptON

현재 JavaScript에는 JavaScriptON이라는 용어 또는 표준 기능은 존재하지 않습니다. 그러나 당신이 언급하려는 것이 **JSON (JavaScript Object Notation)**일 가능성이 높습니다. JSON은 JavaScript 객체 표기법을 사용하여 데이터를 구조화하고, 이를 다른 시스템 간에 전송하거나 저장할 때 주로 사용됩니다.

만약 JSON에 대해 알고 싶으시다면, 다음 내용이 도움이 될 것입니다. JSON과 관련된 개념과 사용법에 대해 자세히 설명하겠습니다.

JSON (JavaScript Object Notation): 개념과 사용법

JSON은 JavaScript Object Notation의 약자로, 텍스트 기반 데이터 교환 형식입니다. JSON은 사람이 읽기 쉽고, 기계가 분석하고 생성하기 쉬운 데이터 형식을 제공합니다. 서버와 클라이언트 간 데이터를 주고받거나, 파일로 데이터를 저장할 때 많이 사용됩니다.

1. JSON의 기본 개념

1.1. JSON 구조

JSON은 데이터를 키-값 쌍으로 구성된 객체 형태로 표현하며, 배열과 같은 복잡한 데이터 구조도 쉽게 표현할 수 있습니다.

객체는 **중괄호 {}*로 감싸며, 키-값 쌍은 **:*로 연결됩니다.
배열은 **대괄호 []*로 감싸며, 값은 쉼표로 구분됩니다.

1.2. JSON 예시

{
  "name": "Alice",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science", "History"],
  "address": {
    "city": "New York",
    "zipCode": "10001"
  }
}

위의 예시는 이름, 나이, 학생 여부와 같은 속성들을 포함하는 JSON 객체입니다. 중첩 객체(주소)와 배열(과목)도 포함되어 있습니다.

2. JavaScript에서 JSON 사용

JavaScript에서는 **JSON.parse()**와 JSON.stringify() 함수를 사용해 JSON 데이터를 JavaScript 객체로 변환하거나, 반대로 JavaScript 객체를 JSON 문자열로 변환할 수 있습니다.

2.1. `JSON.parse()`: JSON 문자열을 객체로 변환

서버로부터 JSON 형식의 문자열을 받은 후, 이를 JavaScript에서 객체로 변환할 때 사용합니다.

const jsonString = '{"name": "Alice", "age": 30, "isStudent": false}';
const obj = JSON.parse(jsonString);

console.log(obj.name);  // 출력: Alice
console.log(obj.age);   // 출력: 30

2.2. `JSON.stringify()`: 객체를 JSON 문자열로 변환

JavaScript 객체를 JSON 형식의 문자열로 변환할 때 사용합니다. 이 방식은 데이터를 서버에 전송하거나 파일로 저장할 때 유용합니다.

const person = {
    name: "Alice",
    age: 30,
    isStudent: false
};

const jsonString = JSON.stringify(person);
console.log(jsonString);
// 출력: {"name":"Alice","age":30,"isStudent":false}

3. JSON의 특징

3.1. 경량 데이터 형식

JSON은 데이터를 간결하게 표현할 수 있어 네트워크를 통해 전송하기 적합한 형식입니다. JSON은 많은 서버 API에서 데이터 교환 형식으로 널리 사용됩니다.

3.2. 언어 독립성

JSON은 JavaScript에서 파생된 형식이지만, 언어에 독립적입니다. 다양한 프로그래밍 언어(C, Java, Python 등)에서 JSON을 사용해 데이터를 읽고 쓸 수 있습니다.

4. JSON의 사용 사례

4.1. 서버와 클라이언트 간의 데이터 교환

JSON은 AJAX 요청을 통해 서버와 클라이언트 간에 데이터를 주고받을 때 자주 사용됩니다. 클라이언트는 서버로부터 JSON 데이터를 받아서 처리하고, 다시 서버로 데이터를 JSON 형식으로 전송합니다.

4.1.1. AJAX 예시

fetch('<https://api.example.com/data>')
    .then(response => response.json())
    .then(data => {
        console.log(data);  // JSON 데이터를 객체로 변환한 후 출력
    });

4.2. 구성 파일로 사용

JSON은 많은 시스템에서 설정 파일 형식으로 사용됩니다. 프로젝트의 구성이나 환경 설정을 JSON 파일로 관리하면, 시스템이 이를 읽어 처리할 수 있습니다.

{
  "name": "MyApp",
  "version": "1.0.0",
  "settings": {
    "theme": "dark",
    "language": "en"
  }
}

5. JSON의 한계

주석 미지원: JSON은 주석을 허용하지 않으므로, 주석을 추가할 수 없습니다. 구성 파일 등에 JSON을 사용할 경우, 설명을 포함하기 어렵습니다.
데이터 유형의 제한: JSON은 문자열, 숫자, 불리언, 배열, 객체, null 데이터 유형만 지원합니다. 날짜, 함수 등의 데이터는 직접적으로 표현할 수 없습니다.

5.1. 날짜 데이터 처리

JSON은 날짜 타입을 지원하지 않으므로, 날짜를 문자열로 처리한 후 이를 Date 객체로 변환해야 합니다.

const jsonString = '{"date": "2023-10-05T12:00:00Z"}';
const obj = JSON.parse(jsonString);
const date = new Date(obj.date);

console.log(date);  // 출력: Thu Oct 05 2023 12:00:00 GMT+0000 (UTC)

요약

*JSON(JavaScript Object Notation)**은 텍스트 기반의 데이터 표현 형식으로, 사람이 읽기 쉽고 기계가 분석하기 쉬운 데이터 구조를 제공합니다.
*JSON.parse()*를 통해 JSON 문자열을 JavaScript 객체로 변환할 수 있으며, **JSON.stringify()*를 통해 JavaScript 객체를 JSON 문자열로 변환할 수 있습니다.
JSON은 서버와 클라이언트 간 데이터 교환, 구성 파일 관리 등 다양한 상황에서 활용됩니다.
JSON은 주석을 허용하지 않으며, 날짜와 함수와 같은 특정 데이터 타입을 직접적으로 지원하지 않는 한계가 있습니다.

JSON은 JavaScript의 객체 표기법을 바탕으로 만들어졌지만, 오늘날 대부분의 프로그래밍 언어에서 데이터를 교환하는 표준 형식으로 널리 사용되고 있습니다.

코딩 스쿨 JavaScript