최종 업데이트 07:21
소개 검색
SEOUL AI PRESS

AI와 기술을, 사실부터

강좌 강좌

JSON 입문: 웹 서비스가 데이터를 주고받는 텍스트 형식 읽기

MDN Web Docs

JSON은 웹에서 서버와 브라우저가 데이터를 주고받을 때 쓰는 텍스트 기반 형식입니다. 이 강좌는 JSON이 무엇이고 어떻게 값을 꺼내 쓰는지 하나의 예시로 따라가며 배웁니다.

이 강좌를 마치면 JSON이 무엇인지 한 문장으로 설명하고, 예시 JSON에서 원하는 값을 이름이나 순서로 찾아내며, JSON에서 허용되지 않는 표기를 구분할 수 있습니다. HTML과 CSS 기초, 그리고 자바스크립트(웹 페이지를 움직이게 하는 프로그래밍 언어)의 기본을 조금 알면 따라오기 쉽지만, 몰라도 개념은 이해할 수 있습니다.

한 문장으로 이해하기

JSON은 ‘JavaScript Object Notation(자바스크립트 객체 표기법)‘의 약자로, 구조화된 데이터를 텍스트(문자열)로 표현하는 표준 형식입니다. 여기서 ‘구조화된 데이터’란 이름과 값이 짝을 이루어 정리된 데이터를 뜻합니다. 겉모습은 자바스크립트에서 객체를 적는 방식과 매우 닮았지만, JSON 자체는 자바스크립트와 상관없이 독립적으로 쓸 수 있습니다.

왜 필요한가

JSON은 구조화된 데이터를 네트워크로 전송할 때 사용할 수 있는 텍스트 형식이라, 웹 서비스에서 데이터를 주고받을 때 흔히 쓰입니다. 예를 들어 서버가 브라우저로 데이터를 보내 화면에 표시하게 하거나, 반대로 브라우저가 서버로 데이터를 보낼 때 사용합니다. 또한 많은 프로그래밍 환경이 JSON을 읽고(파싱) 만들어내는 기능을 제공합니다. JSON은 확장자가 .json인 별도의 텍스트 파일로도 저장할 수 있습니다.

어떻게 이루어지는가

JSON을 실제로 다루는 과정은 다음 단계로 이해할 수 있습니다.

  1. JSON 객체에서는 이름(키)과 값을 쌍으로 묶으며, 키는 큰따옴표로 감싼 문자열이어야 합니다.
  2. 값에는 문자열, 숫자, true, false, null과 객체, 배열만 담을 수 있습니다.
  3. 여러 값을 순서대로 나열할 때는 대괄호로 감싼 배열을 씁니다.
  4. 네트워크로 받은 JSON 텍스트를 프로그램이 쓸 수 있는 객체로 바꾸는 일을 ‘파싱’(역직렬화)이라 합니다.
  5. 파싱한 뒤에는 점(.)과 대괄호([]) 표기로 원하는 값을 이름과 순서로 꺼냅니다.
  6. 반대로 프로그램의 객체를 네트워크로 보내려면 다시 텍스트로 바꾸는데, 이를 ‘직렬화’라 합니다.

하나의 예시로 따라가기

개념을 확인하기 위한 가상 예시를 하나 만들어 보겠습니다. 어느 동아리 정보를 담은 JSON이 있고, clubName(동아리 이름)에는 “코딩동아리”, foundedYear(설립 연도)에는 2020이 들어 있다고 합시다. 그리고 members라는 이름 아래에는 여러 회원 객체가 배열로 담겨 있고, 각 회원 객체에는 name(이름)과 skills(할 줄 아는 것 목록) 같은 값이 들어 있습니다.

이 JSON을 파싱해 myClub이라는 이름에 담았다고 합시다. 동아리 이름을 꺼내려면 myClub.clubName 처럼 점 표기로 접근합니다. 두 번째 회원의 두 번째 기술을 꺼내려면 myClub.members[1].skills[1] 라고 씁니다. 여기서 members는 배열이므로 [1]은 두 번째 객체를 뜻하고(순서는 0부터 셈), 그 객체의 skills 배열에서 [1]은 두 번째 기술을 가리킵니다. 핵심은 파싱을 마치면 JSON을 특별하게 다룰 것 없이 보통 객체처럼 값을 꺼내 쓴다는 점입니다.

언제 쓰고 언제 쓰지 않는가

JSON은 프로그램 사이에 구조화된 데이터를 주고받거나 저장할 때 알맞습니다. 다만 문법 제약이 있어 아무 표기나 담을 수는 없습니다. 문자열은 작은따옴표가 아니라 큰따옴표로 감싸야 하고, 숫자는 십진 표기로 적어야 합니다. 함수나 메서드, Date·Set·Map 같은 특수한 객체, 그리고 undefined·NaN·Infinity 값은 담을 수 없습니다. 객체나 배열 끝에 남는 쉼표(후행 쉼표)를 두어서도 안 되고, 주석도 허용되지 않습니다. 쉼표나 콜론 하나만 잘못 놓여도 JSON 전체가 무효가 되어 읽기에 실패할 수 있으니, JSONLint 같은 도구로 유효한 JSON인지 검증할 수 있습니다.

핵심 정리와 확인문제

JSON은 구조화된 데이터를 텍스트로 표현한 형식이며, 프로그램은 이를 파싱해 이름과 순서로 값을 꺼내 씁니다. 담을 수 있는 값과 표기에는 정해진 규칙이 있어, 이를 어기면 무효가 됩니다.

확인문제

  1. JSON은 무엇을 무엇으로 표현하는 형식인가요?
  2. 파싱한 myClub에서 첫 번째 회원의 이름(name)을 꺼내려면 어떻게 접근하나요?
  3. 다음 중 JSON에 담을 수 없는 것은 무엇인가요? (문자열, 숫자, 함수, true)

정답·해설

  1. 정답: JSON은 구조화된 데이터를 텍스트(문자열)로 표현하는 형식입니다. 그래서 네트워크로 데이터를 주고받기에 알맞습니다.
  2. 정답: myClub.members[0].name 으로 접근합니다. members는 배열이므로 [0]이 첫 번째 객체이고, 그 객체의 name을 점 표기로 꺼냅니다.
  3. 정답: 함수입니다. JSON은 문자열·숫자·true·false·null과 객체·배열만 담을 수 있고 함수는 담을 수 없습니다.

참고자료