JSON과 데이터 구조 (JSON & Data Structures)
JSON은 데이터를 주고받을 때 가장 널리 쓰이는 텍스트 형식이고, 데이터 구조는 정보를 담는 그릇의 모양입니다. AI에게 원하는 결과물의 형태를 알려줄 때 핵심이 되는 개념입니다.
같은 말:JSON제이슨배열Array객체Object데이터 구조
목차
🤔 혹시 이런 경험 있나요?
AI에게 "사용자 정보를 저장하는 기능 만들어줘"라고 했더니 코드가 나왔는데, 중간에 { }, [ ], "key": "value" 같은 것들이 가득합니다. 또는 API 응답을 보니 알 수 없는 중괄호 덩어리가 쏟아집니다. 에러 메시지에는 "Unexpected token in JSON"이라고 나옵니다. 이런 상황을 이해하려면, 프로그래밍에서 데이터를 담는 방법인 JSON과 데이터 구조를 알아야 합니다.
📦 데이터 구조란?
데이터 구조(Data Structure)는 정보를 담는 그릇의 모양입니다.
실생활에서도 정보를 담는 방식이 다양합니다.
- 목록: 장보기 리스트: 순서대로 나열
- 사전: 영어 사전: 단어(키)로 뜻(값)을 찾기
- 표: 엑셀 시트: 행과 열로 구조화
프로그래밍에서도 똑같습니다. 어떤 그릇에 담느냐에 따라 데이터를 다루는 방식이 달라집니다.
🧱 프로그래밍의 기본 데이터 구조
바이브코딩에서 반드시 알아야 할 데이터 구조는 딱 세 가지입니다.
1. 변수: 이름표 붙은 상자
하나의 값을 저장하는 가장 단순한 구조입니다.
const name = "홍승협" // 문자열 (텍스트)
const age = 30 // 숫자
const isAdmin = true // 불리언 (참/거짓)2. 배열 (Array): 번호가 매겨진 목록
여러 개의 값을 순서대로 나열한 것입니다. 대괄호 [ ]로 감쌉니다.
const fruits = ["사과", "바나나", "딸기"]
// [0] [1] [2] ← 순서 번호(인덱스)는 0부터 시작
fruits[0] // "사과"
fruits[2] // "딸기"언제 쓸까요? 태그 목록, 게시글 목록, 장바구니 상품 등 "여러 개를 순서대로 나열"할 때 사용합니다.
3. 객체 (Object): 이름표가 붙은 서랍장
값에 이름(키)을 붙여서 저장하는 구조입니다. 중괄호 { }로 감쌉니다.
const user = {
name: "홍승협",
email: "hong@example.com",
age: 30
}
user.name // "홍승협"
user.email // "hong@example.com"언제 쓸까요? 사용자 정보, 설정 값, API 응답 등 "속성별로 구분되는 하나의 덩어리"를 표현할 때 사용합니다.
🔗 배열 + 객체 = 실전 데이터
하나의 JSON 안에 키, 값, 배열, 객체가 함께 조합되어 실전 데이터를 이룹니다.
실제 프로젝트에서는 배열과 객체를 조합해서 사용합니다.
// 게시글 목록: 객체의 배열
const posts = [
{
id: 1,
title: "바이브코딩 시작하기",
tags: ["AI", "코딩"],
isPublished: true
},
{
id: 2,
title: "터미널 기초",
tags: ["바이브코딩", "CLI"],
isPublished: false
}
]이 구조를 읽을 수 있으면, AI가 작성하는 코드의 데이터 흐름을 따라갈 수 있습니다. posts[0].title은 "바이브코딩 시작하기"이고, posts[1].tags[0]은 "바이브코딩"입니다.
본문 개념을 설명하는 학습용 예시입니다. 실제 서비스 화면이 아닙니다.
📄 JSON이란?
JSON(JavaScript Object Notation)은 위에서 본 객체와 배열 형식을 텍스트로 표현한 데이터 교환 형식입니다.
프로그래밍 언어마다 데이터를 표현하는 문법이 다릅니다. 하지만 서로 다른 시스템이 데이터를 주고받으려면 공통 형식이 필요합니다. 그 공통 형식이 JSON입니다.
{
"name": "홍승협",
"age": 30,
"skills": ["마케팅", "데이터분석", "바이브코딩"],
"isAdmin": true
}JavaScript 객체와 비슷하게 생겼지만, JSON만의 규칙이 있습니다.
| 규칙 | JavaScript 객체 | JSON |
|---|---|---|
| 키 따옴표 | 없어도 됨 | 반드시 큰따옴표 |
| 문자열 따옴표 | 작은따옴표 가능 | 큰따옴표만 허용 |
| 마지막 쉼표 | 허용됨 | 허용 안 됨 |
| 주석 | 가능 | 불가능 |
이 규칙을 어기면 "Unexpected token in JSON" 에러가 발생합니다.
🌍 JSON은 어디에서 쓰일까요?
바이브코딩을 하면 JSON을 만나지 않는 날이 없습니다.
1. API 통신
서버와 브라우저가 데이터를 주고받을 때 JSON을 사용합니다.
브라우저 → 서버: "1번 사용자 정보 줘"
서버 → 브라우저: { "id": 1, "name": "홍승협" } ← JSON2. 설정 파일
프로젝트 설정의 상당수가 JSON 형식입니다.
package.json → npm 패키지 설정
tsconfig.json → TypeScript 설정
.eslintrc.json → 코드 스타일 규칙3. 데이터 저장
간단한 데이터를 파일로 저장할 때 JSON을 사용합니다.
scripts/data/my-post.json → 블로그 글 데이터
config/settings.json → 앱 설정4. AI와의 소통
AI에게 "JSON 형식으로 응답해줘"라고 하면 구조화된 데이터를 받을 수 있습니다.
프롬프트: "과일 3개의 이름과 가격을 JSON 배열로 알려줘"
AI 응답:
[
{ "name": "사과", "price": 1500 },
{ "name": "바나나", "price": 3000 },
{ "name": "딸기", "price": 5000 }
]🔧 JSON 다루기: 자주 쓰는 두 가지 변환
// 객체 → JSON 문자열 (보낼 때)
const data = { name: "홍길동", age: 30 }
const jsonString = JSON.stringify(data)
// '{"name":"홍길동","age":30}'
// JSON 문자열 → 객체 (받을 때)
const parsed = JSON.parse(jsonString)
// { name: "홍길동", age: 30 }보낼 때는 stringify로 문자열로 바꾸고, 받을 때는 parse로 다시 객체로 복원합니다.
JSON.stringify는 데이터를 JSON 텍스트로 변환하고, JSON.parse는 JSON 텍스트를 다시 데이터로 복원합니다. API 통신에서 이 두 함수가 항상 등장합니다.
⚠️ 바이브코딩할 때 흔한 JSON 실수
1. 마지막 쉼표 (Trailing Comma)
{
"name": "홍길동",
"age": 30, ← 이 쉼표 때문에 에러!
}JSON에서는 마지막 항목 뒤에 쉼표를 넣으면 안 됩니다.
2. 작은따옴표 사용
{ 'name': '홍길동' } ← 에러! JSON은 큰따옴표만 허용
{ "name": "홍길동" } ← 올바른 형식3. undefined 사용
{ "data": undefined } ← 에러! JSON에 undefined 없음
{ "data": null } ← null은 허용AI가 생성한 JSON에서 에러가 나면, 이 세 가지를 먼저 확인하세요.
💡 AI에게 데이터 구조를 잘 요청하는 방법
AI에게 데이터 형식을 명확히 알려주면 원하는 결과를 훨씬 정확하게 받을 수 있습니다.
나쁜 예시:
"사용자 정보 저장하는 거 만들어줘"
좋은 예시:
"사용자 정보를 이런 JSON 구조로 저장하고 싶어:
{ "name": "string", "email": "string", "age": "number", "tags": ["string"] }이 구조를 받아서 DB에 저장하는 API를 만들어줘"
원하는 데이터 구조를 JSON으로 보여주면 AI가 정확한 타입 정의, API 라우트, DB 스키마를 한 번에 만들어줍니다.
📋 3줄 요약
-
데이터 구조는 정보를 담는 그릇의 모양이고 하나의 값을 담는 변수와 순서대로 나열하는 배열, 이름을 붙여 담는 객체 셋이 기본입니다.
-
JSON은 이 객체와 배열을 텍스트로 적은 데이터 교환 형식이라 프로그램끼리 값을 주고받을 때 표준으로 쓰입니다.
-
JSON은 자바스크립트 객체와 달리 키를 반드시 큰따옴표로 감싸야 해서 Unexpected token 오류는 대개 이 규칙을 어긴 데서 납니다.
JSON을 주고받는 정식 통로는 REST API 클래스에서 이어집니다.
참고 자료
제대로 이해했는지 한 문제로 확인해 볼까요?
답을 고르면 바로 풀이가 나와요.
다음 JSON 중 올바른 형식은 무엇일까요?
