JavaScript에서 JSON 다루기 튜토리얼

소개

다양한 방법으로 JSON이 JavaScript에서 사용될 수 있습니다. 가장 기본적인 용도 중 하나는 데이터를 저장하는 것입니다. 또한 클라이언트 간, 서버 간, 또는 서버에서 클라이언트로 데이터를 전송하는 데 사용할 수도 있습니다. 다른 유용한 애플리케이션으로는 데이터를 구성 및 검증하고 데이터 구조를 생성하는 기능이 있습니다.

이 튜토리얼에서 우리는 JavaScript 프로그램에서 JSON을 사용하는 방법을 알아볼 것입니다. 이전에 JavaScript로 프로그래밍한 경험이 있다면 이 과정이 매우 직관적으로 느껴질 것입니다.

JSON이란 무엇인가요?

JSON은 JavaScript Object Notation의 약자입니다. 다양한 유형의 데이터를 공유할 수 있도록 설계된 형식입니다. JSON은 주로 JavaScript를 기본 프로그래밍 언어로 활용합니다. 또한 다음과 같은 다른 언어와도 호환됩니다: Python, PHP, Ruby, 그리고 Java. 읽기 쉽고 매우 가벼우며 많은 서식이 필요하지 않습니다. 다음 튜토리얼을 통해 이 형식의 일반적인 구문과 구조를 익힐 수 있습니다: JSON 데이터 공유 형식 개요.

JSON은 단독으로 사용되거나 다른 파일 형식 내에서 정의될 수 있습니다. 단독으로 사용될 때는 .json 확장자를 사용합니다. 다른 형식 내에 있을 때는 따옴표 안의 JSON 문자열로 나타나거나 변수에 할당된 객체로 나타납니다. 예를 들어, JSON은 .html 형식에서도 사용할 수 있습니다. 이 형식을 사용하면 서버와 브라우저 간에 비교적 쉽게 데이터를 전송할 수 있습니다.

JSON 형식은 텍스트 기반입니다. 키-값 데이터는 중괄호 안에 표시됩니다. 일반적인 .json 파일의 모습은 다음과 같습니다:

만약 .js 또는 .html 파일에 JSON 객체가 있다면 다음과 같이 변수로 나타납니다:

어떤 경우에는 이들이 모두 한 줄로 표시될 수도 있습니다. 이는 JavaScript 파일에서 JSON이 객체가 아닌 문자열로 렌더링될 때입니다:

JSON 객체를 문자열로 변환할 수 있습니다. 이는 빠른 데이터 전송을 수행하고자 할 때 유용합니다.

JSON 대 JavaScript 객체

앞서 언급했듯이 JSON은 모든 프로그래밍 언어와 호환됩니다. 하지만 JavaScript 객체는 JavaScript를 사용해서만 다룰 수 있습니다. JSON과 JavaScript의 구문은 유사합니다. 차이점은 JavaScript 객체는 따옴표 대신 문자열로 나타난다는 점입니다. 또한 JavaScript 객체는 함수를 값으로 사용할 수 있으므로 제한이 적습니다.

다음 예제에서는 사용자의 JavaScript 옵션을 보여줍니다. 사용자는 Sammy Shark이며 현재 온라인 상태입니다:

보시다시피, 다음과 같은 키 주변에는 따옴표가 없습니다: first_name, last_name, online, 또는 full_name. 또한 마지막 줄에 함수 값이 배치되어 있습니다. 문자열 형태로 데이터에 액세스하려면 다음과 같이 호출할 수 있습니다: user.first_name (점 표기법 사용). 대신 전체 이름을 원한다면 함수이므로 user.full_name()을 사용하게 됩니다.

How to Access JSON Data

이전 섹션에서 언급했듯이, 점 표기법을 사용하여 JavaScript에서 JSON 데이터에 액세스할 수 있습니다. 이름이 sammy:

값을 액세스하기 위한 점 표기법은 다음과 같습니다:

변수가 먼저 옵니다. 그 다음 점을 찍습니다. 마지막으로 액세스하려는 키를 언급합니다.

JavaScript에서 first_name 키의 값을 보여주는 alert를 만들고 싶다고 가정해 봅시다. 팝업창에 나타나게 하려면 다음과 같이 JavaScript alert() 함수를 사용합니다:

JSON에서 데이터에 접근하는 또 다른 방법은 대괄호 구문을 사용하는 것입니다. 키는 대괄호 안의 큰따옴표 안에 넣어야 합니다. 다음은 이전 예시의 계속입니다:

중첩된 배열 요소로 작업하는 경우는 어떨까요? 이 경우에는 배열 내 항목의 번호(인덱스)를 호출해야 합니다. 다음 예시를 살펴보겠습니다:

문자열 facebook에 접근하고 싶다고 가정해 봅시다. 다음은 번호를 사용하여 배열의 해당 항목에 접근하기 위해 점 표기법을 사용하는 방법입니다:

중첩된 각 요소마다 점을 추가로 더해야 한다는 점을 기억하세요.

JSON과 함께 사용되는 함수

다음으로, JSON과 함께 사용할 수 있는 몇 가지 함수를 살펴보겠습니다. JSON을 객체에서 문자열로, 혹은 문자열에서 객체로 변환할 수 있으면 데이터 전송과 저장이 매우 쉬워집니다. JSON을 두 가지 다른 방식으로 문자열화(stringify)하고 파싱(parse)하는 방법을 알아보겠습니다:

• JSON.stringify()

데이터를 가벼운 방식으로 전송하려는 경우 문자열을 사용하는 것이 더 좋습니다. 그렇기 때문에 클라이언트에서 서버로 데이터를 저장하고 전송하는 데 문자열이 사용됩니다. 다음 예시를 생각해 보세요. 한 기기에서 사용자의 설정 데이터를 수집하고 있다고 가정해 봅시다. 이 정보를 서버로 보내야 합니다. 이 목적으로 문자열을 사용하게 됩니다. 그런 다음 JSON.parse()을 사용하여 다시 변환한 후 읽고 작업할 수 있습니다.

여기서 강조할 함수는 JSON.stringify()입니다. 이 함수는 JSON 객체를 JSON 문자열로 변환합니다. 이 예시에서는 객체를 obj 변수에 할당할 것입니다. 그리고 JSON.stringify() 함수를 사용하여 변환할 것입니다. 이를 위해 obj를 함수에 전달한 다음, 다음과 같이 문자열을 s 변수에 할당합니다:

Calling the s 변수를 호출하면 JSON이 문자열로 반환됩니다:

• JSON.parse()

당연하게도, JSON.parse()은 반대의 기능을 수행합니다. 데이터 전송이 끝나면 작업을 위해 다시 JSON 객체로 변환해야 합니다. 한 가지 방법은 eval() 함수를 사용하는 것입니다. 하지만 이 방법은 그리 안전하지 않습니다. 그렇기 때문에 우리는 JSON.parse() 함수를 사용하는 것을 선호합니다.

이전 예시를 다시 한 번 생각해 보겠습니다. 문자열 s를 JSON.parse() 함수에 전달할 것입니다. 그런 다음 새 변수를 지정합니다:

이제 우리의 새 객체는 o입니다. 이는 obj와 동일할 것입니다. 다음과 같이 HTML 파일에서 JSON.parse()을 고려할 때 더 많은 통찰을 얻을 수 있습니다:

여기서 실제로 문자열 s을(를) 가져올 수 있는 객체로 변환한 것을 볼 수 있습니다. 따라서 JSON.parse()은 JSON 문자열을 객체로 변환하는 안전한 방법입니다.

결론

이 튜토리얼 전반에서 살펴보았듯이, JSON은 JavaScript에서 다양하게 구현됩니다. 거의 모든 프로그래밍 언어와 함께 사용할 수 있어 자연스러운 선택이 되므로 특히 유용합니다. 게다가 이는 시작에 불과합니다. JSON으로 할 수 있는 일은 훨씬 더 많습니다. 이미 API에서도 지원되고 있습니다.

JavaScript 프로그래밍에 도움이 되는 저희 블로그의 추가 리소스를 소개합니다:

• 다음 내용을 배워보세요: Javascript에서 프로토타입과 상속이 작동하는 방식.
• 자세히 알아보기: HTML에 JavaScript를 추가하는 방법.
• 자신만의 웹 애플리케이션을 구축 중이라면, 최적의 서버 설정을 선택하는 방법에 대한 가이드.

즐거운 코딩 되세요!