JSON 데이터 이해하기

JSON은 여러 개의 데이터를 쉽게 저장하고 관리하는 방법입니다. 데이터베이스 없이도 데이터를 관리할 수 있어요!

JSON이 뭔가요?

간단히 말해: 데이터를 정리해서 저장하는 텍스트 파일입니다.

언제 사용하나요?

직원 명단을 보여줄 때
제품 목록을 표시할 때
블로그 글 목록을 만들 때
여러 개의 비슷한 정보를 관리할 때

왜 좋은가요?

데이터베이스 설정 필요 없음
파일만 만들면 끝
읽기 쉬움
수정하기 쉬움

JSON의 생김새

한 사람의 정보

{
  "이름": "김철수",
  "나이": 30,
  "부서": "개발팀"
}

여러 사람의 정보

[
  {
    "이름": "김철수",
    "나이": 30,
    "부서": "개발팀"
  },
  {
    "이름": "이영희",
    "나이": 28,
    "부서": "디자인팀"
  },
  {
    "이름": "박민수",
    "나이": 32,
    "부서": "마케팅팀"
  }
]

기본 규칙 (간단!)

1. 큰따옴표 사용하기

✅ 올바른 예:
{"이름": "김철수"}

❌ 틀린 예:
{'이름': '김철수'}
{이름: "김철수"}

2. 쉼표로 구분하기

✅ 올바른 예:
{
  "이름": "김철수",
  "나이": 30
}

❌ 틀린 예 (쉼표 없음):
{
  "이름": "김철수"
  "나이": 30
}

3. 마지막 항목 뒤에는 쉼표 없음

✅ 올바른 예:
{
  "이름": "김철수",
  "나이": 30
}

❌ 틀린 예 (마지막 쉼표):
{
  "이름": "김철수",
  "나이": 30,
}

AI에게 JSON 만들어달라고 하기

직원 명단 만들기

Cursor에게 요청:

employees.json 파일을 만들어줘.

직원 5명의 정보:
- 이름
- 부서
- 직책
- 이메일

JSON 형식으로.

제품 목록 만들기

Cursor에게 요청:

products.json 파일을 만들어줘.

제품 10개:
- 제품명
- 가격
- 설명 (짧게)
- 이미지 URL (플레이스홀더 사용)
- 카테고리

JSON 형식으로.

메뉴 만들기

Cursor에게 요청:

카페 메뉴 JSON 파일 만들어줘.

메뉴 8개:
- 메뉴명
- 가격
- 카테고리 (커피/음료/디저트)
- 설명

menu.json 파일로 저장해줘.

실전 예제

제품 목록

[
  {
    "id": 1,
    "제품명": "무선 마우스",
    "가격": 35000,
    "이미지": "https://via.placeholder.com/200",
    "카테고리": "전자기기"
  },
  {
    "id": 2,
    "제품명": "키보드",
    "가격": 89000,
    "이미지": "https://via.placeholder.com/200",
    "카테고리": "전자기기"
  },
  {
    "id": 3,
    "제품명": "노트북 거치대",
    "가격": 25000,
    "이미지": "https://via.placeholder.com/200",
    "카테고리": "액세서리"
  }
]

팀원 소개

[
  {
    "이름": "김철수",
    "직책": "팀장",
    "소개": "10년차 개발자입니다.",
    "이메일": "kim@company.com",
    "프로필사진": "https://via.placeholder.com/150"
  },
  {
    "이름": "이영희",
    "직책": "디자이너",
    "소개": "사용자 경험을 중요하게 생각합니다.",
    "이메일": "lee@company.com",
    "프로필사진": "https://via.placeholder.com/150"
  }
]

JSON 파일을 웹페이지에 표시하기

1단계: JSON 파일 만들기

AI에게 요청:

team.json 파일 만들어줘.
팀원 3명 정보 (이름, 직책, 소개)

2단계: 웹페이지에 표시하기

AI에게 요청:

team.json 파일을 읽어서 웹페이지에 카드 형태로 표시해줘.

각 카드:
- 이름 (큰 글씨)
- 직책
- 소개

3개가 가로로 배치되게.
HTML, CSS, JavaScript 모두 만들어줘.

JSON 오류 확인하기

온라인 도구 사용

JSON이 제대로 작성되었는지 확인:

JSONLint 접속
JSON 코드 복사해서 붙여넣기
“Validate JSON” 버튼 클릭
오류가 있으면 어디가 틀렸는지 알려줌

AI에게 확인 요청

Cursor에게 요청:

이 JSON 파일이 올바른지 확인해줘.
오류가 있으면 고쳐줘.

[JSON 코드 붙여넣기]

자주 하는 실수와 해결

실수 1: 쉼표 빠뜨리기

에러가 나면 AI에게:

이 JSON 파일에서 에러가 나.
고쳐줘.

[파일 내용 붙여넣기]

실수 2: 작은따옴표 사용

AI에게 요청:

이 JSON이 작동하지 않아.
뭐가 문제인지 찾아서 고쳐줘.

실수 3: 마지막 쉼표

AI가 자동으로 찾아서 고쳐줍니다!

실습해보기

나만의 JSON 만들기

좋아하는 영화 3개를 JSON으로 만들어보세요:

Cursor에게 요청:

movies.json 파일 만들어줘.

내가 좋아하는 영화 3개:
1. 인터스텔라
2. 어벤져스
3. 기생충

각 영화의 정보:
- 제목
- 개봉년도
- 간단한 설명 (한 줄)

팁

1. 복잡하면 AI에게 맡기기

이런 JSON 파일이 필요해:
[하고 싶은 것 설명]

만들어줘.

2. 수정도 AI에게

이 JSON 파일에서:
- 김철수의 부서를 "기획팀"으로 바꿔줘
- 새로운 사람 추가해줘 (박민수, 영업팀, 과장)

3. 예쁘게 정리하기

이 JSON 파일을 보기 좋게 정리해줘.

다음 단계

JSON으로 데이터를 만드는 방법을 배웠습니다. 이제 실제로 웹페이지를 만들어봅시다!