본문으로 건너뛰기

JSON 데이터 형식 이해하기 📦

API를 배우다 보면 JSON이라는 단어를 자주 듣게 됩니다. JSON은 프로그램들이 데이터를 주고받을 때 사용하는 형식이에요. 아주 쉽게 설명해드릴게요!

JSON을 일상생활로 비유하면?​

JSON을 택배 상자 라벨로 비유해볼까요?

📦 택배 상자
┌──────────────────┐
│ 받는 사람: 홍길동    │
│ 주소: 서울시 강남구  │
│ 전화번호: 010-1234-5678 │
│ 물건: 책           │
└──────────────────┘

이 정보를 JSON으로 쓰면:

{
  "받는사람": "홍길동",
  "주소": "서울시 강남구",
  "전화번호": "010-1234-5678",
  "물건": "책"
}

JSON의 정식 이름​

JSON = JavaScript Object Notation

"자바스크립트 객체 표기법"이라는 뜻이지만, 모든 프로그래밍 언어에서 사용할 수 있어요!

JSON의 기본 규칙​

1. 중괄호 로 감싸요​

{
  "이름": "값"
}

2. 쌍따옴표 " "를 사용해요​

{
  "이름": "홍길동"
}

3. 콜론 : 으로 이름과 값을 연결해요​

{
  "나이": 25
}

4. 쉼표 , 로 여러 정보를 구분해요​

{
  "이름": "홍길동",
  "나이": 25,
  "직업": "개발자"
}

JSON 데이터 타입​

JSON에서 사용할 수 있는 값들:

1. 문자열 (String) ""​

{
  "이름": "홍길동",
  "도시": "서울"
}

2. 숫자 (Number)​

{
  "나이": 25,
  "키": 175.5,
  "온도": -5
}

3. 참/거짓 (Boolean)​

{
  "회원가입완료": true,
  "이메일인증": false
}

4. 배열 (Array) [ ]​

여러 개를 담을 때 사용:

{
  "취미": ["독서", "영화", "코딩"],
  "점수": [90, 85, 95]
}

5. 객체 (Object) ​

정보를 그룹으로 묶을 때:

{
  "사용자": {
    "이름": "홍길동",
    "나이": 25
  }
}

6. null​

값이 없을 때:

{
  "중간이름": null
}

실제 예시로 이해하기​

예시 1: 사용자 정보 👤​

{
  "이름": "홍길동",
  "나이": 25,
  "이메일": "hong@example.com",
  "회원": true,
  "주소": {
    "도시": "서울",
    "구": "강남구"
  },
  "취미": ["독서", "영화감상", "코딩"]
}

예시 2: 쇼핑몰 상품 🛍️​

{
  "상품명": "노트북",
  "가격": 1500000,
  "재고": 5,
  "할인중": true,
  "색상": ["실버", "그레이", "블랙"],
  "사양": {
    "CPU": "i7",
    "RAM": "16GB",
    "저장장치": "512GB SSD"
  }
}

예시 3: 날씨 정보 ☀️​

{
  "도시": "서울",
  "온도": 23,
  "날씨": "맑음",
  "습도": 60,
  "비올확률": 0,
  "주간예보": [
    {"요일": "월", "온도": 22},
    {"요일": "화", "온도": 24},
    {"요일": "수", "온도": 25}
  ]
}

JSON 배열 이해하기​

여러 개의 데이터를 담을 때는 대괄호 [ ]를 사용해요:

단순 배열​

["사과", "바나나", "오렌지"]

객체 배열​

[
  {
    "이름": "홍길동",
    "나이": 25
  },
  {
    "이름": "김철수",
    "나이": 30
  },
  {
    "이름": "이영희",
    "나이": 28
  }
]

JSON 읽는 법​

{
  "학생": {
    "이름": "홍길동",
    "점수": [90, 85, 95],
    "합격": true
  }
}

이렇게 읽으면 돼요:

  • "학생이라는 정보가 있고"
  • "그 안에 이름은 홍길동이고"
  • "점수는 90, 85, 95점이고"
  • "합격은 true(참)이야"

JSON vs 다른 형식​

JSON vs CSV​

CSV (엑셀 같은 표 형식):

이름,나이,도시
홍길동,25,서울
김철수,30,부산

JSON:

[
  {"이름": "홍길동", "나이": 25, "도시": "서울"},
  {"이름": "김철수", "나이": 30, "도시": "부산"}
]

JSON의 장점:

  • 복잡한 구조 표현 가능
  • 중첩된 데이터 쉽게 표현
  • API에서 표준으로 사용

실전 활용 예시​

API 응답 예시​

GitHub API에서 사용자 정보를 요청하면:

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  "location": "San Francisco",
  "public_repos": 344,
  "followers": 1000000,
  "following": 0
}

설정 파일 예시​

프로그램 설정을 JSON으로:

{
  "앱이름": "내 웹사이트",
  "버전": "1.0.0",
  "데이터베이스": {
    "호스트": "localhost",
    "포트": 3306,
    "사용자": "admin"
  },
  "기능": {
    "다크모드": true,
    "알림": true,
    "자동저장": false
  }
}

JSON 도구 사용하기​

우리 사이트의 도구들로 JSON을 다뤄보세요!

1. JSON 예쁘게 정리하기​

JSON Formatter - 복잡한 JSON을 보기 좋게!

2. JSON 데이터 탐색하기​

JSON Path Tester - JSON에서 원하는 데이터 찾기

3. JSON을 다른 형식으로 변환​

흔한 실수와 해결법​

❌ 실수 1: 쉼표 빼먹기​

{
  "이름": "홍길동"
  "나이": 25
}

✅ 올바른 방법:​

{
  "이름": "홍길동",
  "나이": 25
}

❌ 실수 2: 마지막에 쉼표 추가​

{
  "이름": "홍길동",
  "나이": 25,
}

✅ 올바른 방법:​

{
  "이름": "홍길동",
  "나이": 25
}

❌ 실수 3: 작은따옴표 사용​

{
  '이름': '홍길동'
}

✅ 올바른 방법:​

{
  "이름": "홍길동"
}

❌ 실수 4: 주석 작성​

{
  // 이것은 주석입니다
  "이름": "홍길동"
}

JSON에서는 주석을 쓸 수 없어요! ❌

JSON이 사용되는 곳​

1. API 통신 🌐​

대부분의 웹 API는 JSON으로 데이터를 주고받아요.

// API 요청
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))

2. 설정 파일 ⚙️​

  • package.json (Node.js)
  • tsconfig.json (TypeScript)
  • settings.json (VS Code)

3. 데이터 저장 💾​

NoSQL 데이터베이스 (MongoDB 등)는 JSON 형식으로 데이터를 저장해요.

4. 데이터 교환 📤📥​

서버와 클라이언트가 데이터를 주고받을 때.

자주 묻는 질문 (FAQ)​

Q1: JSON은 프로그래밍 언어인가요?​

A: 아니요! JSON은 데이터 형식입니다. 데이터를 표현하는 방법일 뿐이에요.

Q2: JSON은 자바스크립트에서만 사용하나요?​

A: 아니요! 거의 모든 프로그래밍 언어에서 사용할 수 있어요.

  • Python
  • Java
  • C++
  • PHP
  • Ruby 등등!

Q3: JSON과 XML의 차이는?​

A: XML은 예전에 많이 쓰였던 형식이에요. JSON이 더 간단하고 읽기 쉬워서 요즘은 JSON을 더 많이 써요.

XML:

<user>
  <name>홍길동</name>
  <age>25</age>
</user>

JSON:

{
  "name": "홍길동",
  "age": 25
}

Q4: JSON 파일 확장자는?​

A: .json 입니다.

data.json
config.json
users.json

JSON 유효성 검사​

JSON이 올바른 형식인지 확인하려면:

  1. JSON Formatter 사용
  2. 온라인 JSON 검증 도구 사용
  3. 브라우저 개발자 도구에서 확인

실습: 직접 JSON 만들어보기​

자신의 정보를 JSON으로 만들어보세요:

{
  "이름": "여러분의 이름",
  "나이": 여러분의 나이,
  "거주지": "여러분의 도시",
  "취미": [
    "취미1",
    "취미2",
    "취미3"
  ],
  "학생": true,
  "소개": {
    "좋아하는음식": "...",
    "좋아하는색": "..."
  }
}
팁

JSON Formatter에 붙여넣고 "Format" 버튼을 눌러보세요! 예쁘게 정리되고 문법 오류도 확인할 수 있어요.

다음 단계 🚀​

JSON을 이해했다면:

  1. ✅ JSON Formatter - JSON 예쁘게 정리하기
  2. ✅ JSON Path Tester - JSON 데이터 검색하기
  3. ✅ API Tester - JSON을 사용하는 API 테스트
  4. ✅ JSON to TypeScript - JSON을 코드로 변환

마무리​

JSON은 어렵지 않아요! 데이터를 정리하는 방법 중 하나예요.

기억할 포인트:

  • { } 중괄호로 시작하고 끝남
  • " " 쌍따옴표 사용
  • : 콜론으로 이름과 값 연결
  • , 쉼표로 항목 구분
  • 마지막 항목 뒤에는 쉼표 없음

이제 JSON을 읽고 쓸 수 있게 되셨나요? 🎉

API를 배우고 웹 개발을 하려면 JSON은 필수예요. 자주 보다 보면 금방 익숙해질 거예요!