JavaScript JSON 완벽 가이드: 기본 개념부터 실전 활용법까지

JSON은 JavaScript Object Notation의 약자로, 데이터를 저장하는 방식 중 하나입니다. JSON 객체에서는 각 값이 '키(key)'라고 불리는 라벨에 매핑됩니다. JSON 객체는 문자열, 숫자, 심지어 다른 JSON 값까지 어떤 데이터 타입이든 저장할 수 있습니다.

JSON은 데이터를 저장하고 공유할 수 있게 해주는 표준 파일 형식입니다. JavaScript, Python, PHP 등 주요 프로그래밍 언어들은 모두 JSON 데이터를 읽고 조작하는 기능을 지원합니다.

이 가이드에서는 JavaScript에서 JSON을 사용하는 방법을 살펴봅니다. JSON 형식의 기본 개념부터 시작해, JSON 객체와 JavaScript 객체가 어떻게 다른지까지 자세히 알아보겠습니다.

JSON이란 무엇인가?

JSON은 데이터를 저장하고 공유하는 방식으로, JavaScript 객체 문법을 기반으로 만들어졌습니다. 차이점이 있다면 JSON은 완전히 텍스트 기반이라는 것이며, 반면 일반 객체는 그렇지 않다는 점입니다.

JSON은 JavaScript 프로그래밍 언어의 원리를 바탕으로 하지만, PHP, Java, Ruby 등 다양한 다른 언어에서도 널리 사용되고 있습니다.

JSON 데이터는 파일로 저장하거나 프로그램 내의 값으로 보관할 수 있습니다. 예를 들어, 프로그램에 mtg_cards.json이라는 파일이 있고, 이 파일에 매직 더 게더링(Magic the Gathering) 카드 목록이 저장되어 있다고 가정해 봅시다. 이 데이터를 mtg_cards라는 JavaScript 변수에 담을 수 있습니다.

다음은 JSON으로 저장된 데이터의 구조 예시입니다:

{
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

JSON은 '키-값 쌍(key-value pair)'이라는 구조를 사용해 데이터를 저장합니다. 키-값 쌍은 다음과 같은 구조를 따릅니다: “키”: “값”

위 예시에서 card_name이 키의 한 예입니다. 값은 항상 콜론(:) 오른쪽에 위치합니다. JSON에서는 키 이름을 반드시 문자열로 작성해야 하지만, 값은 불린(boolean)이나 정수(integer) 등 어떤 데이터 타입이든 될 수 있습니다.

JSON은 API를 통해 데이터를 주고받을 때도 자주 사용됩니다. 예를 들어 Airtable이나 Fitbit 같은 API를 사용한다면, 데이터를 전송하고 읽을 때 JSON 형식을 다뤄야 합니다.

JavaScript에서 JSON 데이터에 접근하는 방법

JavaScript에서 JSON 데이터에 접근하려면 대괄호 표기법(square bracket notation) 또는 점 표기법(dot notation)을 사용할 수 있습니다. 대괄호 표기법은 배열에서 값을 가져오는 방식과 비슷하지만, 인덱스 번호 대신 원하는 값의 키 이름을 지정한다는 점이 다릅니다.

앞서 살펴본 데이터를 JSON 객체 형태로 변환한 예시를 보겠습니다:

var black_lotus = {
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

이 예제에서는 JSON 객체를 black_lotus라는 변수에 할당했습니다. 이제 Black Lotus 카드의 타입을 확인하고 싶다고 가정해 봅시다. 참고로 Black Lotus는 트레이딩 카드 게임 매직 더 게더링에서 금지된(banned) 카드입니다.

대괄호 표기법(Square Brackets)

대괄호 표기법을 사용하면 Black Lotus 카드의 타입을 조회할 수 있습니다.

이 표기법을 사용하려면 먼저 값을 가져올 객체의 이름을 지정하고, 그다음 해당 값과 연결된 키 이름을 지정합니다. 이때 키 이름은 반드시 큰따옴표로 감싼 뒤 대괄호로 묶어야 합니다.

다음 코드는 Black Lotus의 카드 타입 정보를 가져옵니다:

console.log(black_lotus["card_type"])

코드 실행 결과는 Mono Artifact입니다. 키 이름을 큰따옴표로 감싸고 대괄호로 묶은 뒤, black_lotus 변수 뒤에 붙여줌으로써 card_type이라는 이름으로 저장된 데이터에 접근한 것입니다.

점 표기법(Dot Notation)

점 표기법은 객체 이름 뒤에 점(.)을 찍고, 접근하고자 하는 값의 키 이름을 지정하는 방식입니다.

점 표기법으로 Black Lotus의 카드 타입에 접근하려면 다음 코드를 사용할 수 있습니다:

console.log(black_lotus.card_type)

코드 실행 결과는 “Mono Artifact”입니다.

객체 이름(“black_lotus”)을 지정한 뒤, 접근하려는 값을 가진 키(“card_type”)를 점으로 연결해 지정한 것입니다.

JSON 변환하기

객체를 다룰 때는 객체를 JSON 문자열로 변환하거나, 그 반대로 변환해야 하는 경우가 자주 있습니다. 특히 웹 서버 간에 데이터를 전송할 때 흔히 사용되는 방식입니다.

JSON은 JavaScript 같은 기술 환경에서 훨씬 다루기 쉽습니다. 일반 문자열에서 모든 값을 추출하는 것은 매우 어려운 작업이기 때문입니다.

즉, 서버로 데이터를 보내기 위해서는 먼저 객체를 문자열로 변환해야 하고, 받은 후에는 다시 객체로 변환해야 데이터를 객체처럼 다룰 수 있습니다.

객체를 JSON 문자열로 변환하려면 JSON.stringify() 함수를 사용합니다. 앞서 만든 Black Lotus 객체를 문자열로 변환해 보겠습니다:

var black_lotus = {
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

var string_black_lotus = JSON.stringify(black_lotus)

console.log(string_black_lotus)

이 코드는 다음과 같은 JSON 텍스트를 반환합니다:

"{"card_name":"Black Lotus","status":"banned","card_type":"Mono Artifact","mana":"0"}"

보시다시피 JSON 데이터가 문자열 형태로 출력되었습니다. 이제 JSON.parse() 메서드를 사용하면 이 문자열을 다시 JSON 객체로 변환할 수 있습니다:

var black_lotus_object = JSON.parse(string_black_lotus)

console.log(black_lotus_object)

이 코드의 실행 결과는 다음과 같습니다:

{
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

데이터가 다시 객체 형태로 돌아온 것을 확인할 수 있습니다.

JSON vs 자바스크립트 객체

JSON 표기법은 JavaScript 객체를 기반으로 만들어졌습니다.

하지만 JSON은 여러 프로그래밍 언어에서 지원되도록 설계되었기 때문에 JavaScript 객체와 완전히 동일하지는 않습니다. 예를 들어 JSON은 PHP와 Python에서도 지원되며, JSON을 지원하는 각 언어마다 고유한 구현 방식을 가지고 있습니다.

가장 눈에 띄는 차이점은 키의 처리 방식입니다. JavaScript 객체의 키는 따옴표 없이 작성할 수 있지만, JSON 데이터의 키는 반드시 따옴표로 감싸야 합니다.

JSON 파일을 열어보면 모든 키가 따옴표로 감싸져 있는 것을 볼 수 있습니다. 반면 JavaScript 객체에서는 키가 따옴표 없이 작성된 경우도 많습니다.

그럼에도 불구하고 JSON과 JavaScript 객체는 모두 키-값 구조로 데이터를 저장한다는 공통점을 가지고 있습니다.

마무리

JavaScript는 JSON 형식으로 데이터를 저장하는 것을 지원합니다. JSON, 즉 JavaScript Object Notation은 관련된 데이터를 하나의 객체에 담는 방식이며, 객체 내의 각 값은 키라고 불리는 고유한 라벨을 가집니다.

이제 여러분은 프로처럼 JavaScript에서 JSON을 활용할 수 있는 기본기를 갖추게 되었습니다!

JavaScript에 대해 더 배우고 싶으신가요? JavaScript 학습 가이드를 확인해 보세요. JavaScript를 효과적으로 배우는 핵심 팁과 초급·중급 개발자를 위한 학습 리소스 목록을 만나볼 수 있습니다.