Week 5 · 데이터 통신과 동적 기능
Day 29 / 42
JSON — 데이터가 오가는 형식
지금까지는 가짜 데이터를 썼다면, 이제 진짜 데이터의 생김새를 배웁니다
10초 핵심 요약
- JSON은 어떤 프로그래밍 언어에서도 읽고 쓸 수 있는 텍스트 기반 데이터 교환 표준입니다.
{}는 객체, []는 배열입니다. data.posts[0].title처럼 점(.)으로 이어 접근합니다.- JSON 구조를 외울 필요는 없습니다. console.table()로 찍어보고 그때그때 확인하면 됩니다.
이번 주(Week 5) 미리 안내 — 집 짓기로 치면 Week 5는 배관과 전기를 넣는 단계입니다. 겉모습은 이미 갖췄지만, 오늘부터는 그 안에 실제로 물과 전기(데이터)가 흐르게 만듭니다. Day 29~35는 지금까지와 결이 다른 개념(JSON, 비동기, 서버 함수)이 매일 이어집니다. 하루 만에 완벽히 이해되지 않아도 정상입니다. 다음 날 내용이 오늘 개념을 다시 써먹으면서 자연스럽게 복습시켜주니, 막히면 그냥 표시해두고 넘어가세요.
01
JSON은 만국 공통 포장 상자
나라마다 다른 언어를 써도, 택배 상자 규격이 같으면 어디서든 열어볼 수 있습니다. JSON이 그 역할을 합니다. 서버가 무엇으로 만들어졌든, JSON으로 포장해서 보내면 JS를 쓰는 브라우저가 문제없이 열어봅니다.
우리 사이트의 /functions/api/*(로그인, 결제, 업로드 같은 동적 기능)도 요청에 응답할 때 이 JSON 형식으로 데이터를 돌려줍니다. 오늘 배우는 구조 읽는 법이 나중에 그대로 쓰입니다.
02
구조 읽는 법
{
"posts": [
{ "title": "오늘의 글", "date": "2026-07-14" },
{ "title": "어제 쓴 글", "date": "2026-07-13" }
]
}
{}는 이름표가 붙은 상자(객체), []는 번호가 붙은 줄(배열)입니다. 첫 글의 제목을 꺼내려면 data.posts[0].title이라고 씁니다. "posts라는 줄에서 0번째 상자의 title을 꺼내라"는 뜻으로 읽으면 됩니다.
JSON 작성 규칙 — JSON의 키(이름표)는 반드시 큰따옴표(")만 허용합니다. 작은따옴표(')를 쓰면 SyntaxError가 납니다.
03
forEach로 배열 순회하기
data.posts.forEach(post => {
console.log(post.title);
});
더미 JSON을 직접 5개 만들어 forEach로 제목만 뽑아 log를 찍어보세요. 그 다음 console.table(data.posts)도 찍어서 표로 보이는 모습과 비교해보세요.
04
Day 29 완료 체크리스트
더미 JSON을 직접 작성하고 dot 표기로 값을 꺼내봤다.
forEach와 console.table을 각각 실행해 결과를 비교했다.
스스로 설명해보기 — JSON에서 {}는 객체, []는 배열이라고 구분하는 이유를 설명할 수 있나요?
오늘의 용어
JSON
중괄호와 키-값 쌍으로 이루어진, 언어 무관 데이터 교환 표준 포맷
forEach
배열의 각 항목마다 정해둔 코드를 반복 실행하는 JS 함수