What is JSON? A Complete Beginner's Guide
JSON์ด๋ ๋ฌด์์ธ๊ฐ?
**JSON(JavaScript Object Notation)**์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ๊ตํํ๊ธฐ ์ํ ๊ฒฝ๋ ํ ์คํธ ํ์์ ๋๋ค. ์ด๋ฆ์ โJavaScriptโ๊ฐ ๋ค์ด๊ฐ ์์ง๋ง, ์ฌ์ค ์ธ์ด์ ๊ด๊ณ์์ด ์ด๋์๋ ์ฌ์ฉํ ์ ์๋ ๋ฒ์ฉ ํ์์ ๋๋ค. Python, Java, PHP, Go, Ruby โ ๋ชจ๋ ์ฃผ์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ JSON์ ์ฝ๊ณ ์ธ ์ ์์ต๋๋ค.
JSON์ 2000๋ ๋ ์ด๋ฐ ๋๊ธ๋ฌ์ค ํฌ๋กํฌ๋(Douglas Crockford)๊ฐ ์ ์ํ์ผ๋ฉฐ, ์ง๊ธ์ ์น API, ์ค์ ํ์ผ, ๋ฐ์ดํฐ๋ฒ ์ด์ค ์๋ต ๋ฑ ๊ฑฐ์ ๋ชจ๋ ๊ณณ์์ ํ์ค์ฒ๋ผ ์ฌ์ฉ๋ฉ๋๋ค.
JSON ๊ธฐ๋ณธ ๋ฌธ๋ฒ
JSON์ ๋ ๊ฐ์ง ๊ตฌ์กฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํฉ๋๋ค.
- ๊ฐ์ฒด(Object): ํค-๊ฐ ์์ ์งํฉ. ์ค๊ดํธ
{}๋ก ๊ฐ์๋๋ค. - ๋ฐฐ์ด(Array): ์์๊ฐ ์๋ ๊ฐ์ ๋ชฉ๋ก. ๋๊ดํธ
[]๋ก ๊ฐ์๋๋ค.
์ง์ํ๋ ๋ฐ์ดํฐ ํ์
| ํ์ | ์์ |
|---|---|
| ๋ฌธ์์ด(String) | "hello" |
| ์ซ์(Number) | 42, 3.14 |
| ๋ถ๋ฆฌ์ธ(Boolean) | true, false |
| null | null |
| ๊ฐ์ฒด(Object) | { "key": "value" } |
| ๋ฐฐ์ด(Array) | [1, 2, 3] |
๊ธฐ๋ณธ ์์
{
"name": "ํ๊ธธ๋",
"age": 30,
"isStudent": false,
"hobbies": ["๋
์", "์ฝ๋ฉ", "๋ฑ์ฐ"],
"address": {
"city": "์์ธ",
"zipCode": "03000"
},
"profileImage": null
}
์ด ์์์ฒ๋ผ JSON์ ์ฌ๋๋ ์ฝ๊ธฐ ์ฝ๊ณ , ์ปดํจํฐ๋ ํ์ฑํ๊ธฐ ์ฌ์ด ๊ตฌ์กฐ์ ๋๋ค.
JSON์ ์ด๋์ ์ฌ์ฉ๋๋์?
1. ์น API ์๋ต
๊ฐ์ฅ ํํ ์ฌ์ฉ์ฒ์ ๋๋ค. ์๋ฅผ ๋ค์ด ๋ ์จ ์ฑ์ด ์๋ฒ์ ํ์ฌ ๋ ์จ๋ฅผ ์์ฒญํ๋ฉด, ์๋ฒ๋ ๋ค์๊ณผ ๊ฐ์ JSON์ ๋๋ ค์ค๋๋ค.
{
"location": "Seoul",
"temperature": 18,
"condition": "๋ง์",
"humidity": 55
}
2. ์ค์ ํ์ผ
package.json, tsconfig.json, .eslintrc.json ๋ฑ ๊ฐ๋ฐ ๋๊ตฌ ์ค์ ํ์ผ์ ๋๋ฆฌ ์ฐ์
๋๋ค.
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"start": "node index.js",
"test": "jest"
}
}
3. ๋ฐ์ดํฐ ์ ์ฅ ๋ฐ ์ ์ก
์๋ฒ์ ํด๋ผ์ด์ธํธ ๊ฐ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ๋, ํน์ ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ๋๋ JSON ํ์์ ์ฌ์ฉํฉ๋๋ค.
JSON ๋ฌธ๋ฒ ๊ท์น โ ๋ฐ๋์ ์ง์ผ์ผ ํ ๊ฒ๋ค
JSON์ ์๊ฒฉํ ๋ฌธ๋ฒ์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ๊ท์น์ ์ด๊ธฐ๋ฉด ํ์ฑ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
๊ท์น 1: ํค๋ ๋ฐ๋์ ํฐ๋ฐ์ดํ๋ก ๊ฐ์ธ์ผ ํ๋ค
// ์๋ชป๋ ์ (์์๋ฐ์ดํ ์ฌ์ฉ)
{ 'name': 'ํ๊ธธ๋' }
// ์ฌ๋ฐ๋ฅธ ์
{ "name": "ํ๊ธธ๋" }
๊ท์น 2: ๋ง์ง๋ง ํญ๋ชฉ ๋ค์ ์ผํ๋ฅผ ๋ถ์ด์ง ์๋๋ค (trailing comma ๊ธ์ง)
// ์๋ชป๋ ์
{
"a": 1,
"b": 2, โ ์ด ์ผํ๊ฐ ์ค๋ฅ๋ฅผ ์ผ์ผํด
}
// ์ฌ๋ฐ๋ฅธ ์
{
"a": 1,
"b": 2
}
๊ท์น 3: ์ฃผ์์ ์ฌ์ฉํ ์ ์๋ค
JSON์ // ๋ /* */ ์ฃผ์์ ์ง์ํ์ง ์์ต๋๋ค. ์ฃผ์์ด ํ์ํ๋ค๋ฉด JSON5๋ JSONC ํ์์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
๊ท์น 4: ๋ฌธ์์ด์ ๋ฐ๋์ ํฐ๋ฐ์ดํ
์์๋ฐ์ดํ(')๋ ๋ฐฑํฑ(`)์ JSON์์ ์ ํจํ์ง ์์ต๋๋ค. ํญ์ ํฐ๋ฐ์ดํ(")๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
์์ฃผ ํ๋ ์ค์์ ํด๊ฒฐ ๋ฐฉ๋ฒ
์ค์ 1: ํน์๋ฌธ์ ์ด์ค์ผ์ดํ ๋๋ฝ
๋ฌธ์์ด ์์ ํฐ๋ฐ์ดํ๋ ๋ฐฑ์ฌ๋์๊ฐ ์๋ค๋ฉด ์ด์ค์ผ์ดํํด์ผ ํฉ๋๋ค.
{
"message": "๊ทธ๊ฐ ๋งํ๋ค, \"์๋
ํ์ธ์\"",
"path": "C:\\Users\\hong\\Documents"
}
์ค์ 2: undefined ์ฌ์ฉ
JavaScript์์ undefined๋ JSON์ผ๋ก ์ง๋ ฌํํ ์ ์์ต๋๋ค. ๊ฐ์ด ์์์ ํํํ ๋๋ null์ ์ฌ์ฉํ์ธ์.
์ค์ 3: ์ซ์๋ฅผ ๋ฌธ์์ด๋ก ์ ์ฅ
// ๋์ ์ โ ๋์ค์ ๊ณ์ฐํ ๋ ํ์
๋ณํ ํ์
{ "price": "1000" }
// ์ข์ ์
{ "price": 1000 }
JSON ์ ํจ์ฑ ๊ฒ์ฌ ๋ฐฉ๋ฒ
์์ฑํ JSON์ด ์ฌ๋ฐ๋ฅธ์ง ํ์ธํ๋ ค๋ฉด:
- ์จ๋ผ์ธ JSON ํฌ๋งคํฐ/๊ฒ์ฆ๊ธฐ ์ฌ์ฉ โ ์ด ์ฌ์ดํธ์ JSON ํฌ๋งคํฐ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์ฆ์ ํ์ธํ ์ ์์ต๋๋ค.
- ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ โ ์ฝ์์์
JSON.parse('...')๋ฅผ ์คํํด๋ณด์ธ์. ์ค๋ฅ๊ฐ ์์ผ๋ฉด ์ ํจํ JSON์ ๋๋ค. - ์ฝ๋ ์๋ํฐ ํ๋ฌ๊ทธ์ธ โ VS Code์๋ JSON ์ ํจ์ฑ ๊ฒ์ฌ๊ฐ ๋ด์ฅ๋์ด ์์ต๋๋ค.
JSON vs XML โ ๋ฌด์์ด ๋ค๋ฅผ๊น?
๊ณผ๊ฑฐ์๋ XML์ด ๋ฐ์ดํฐ ๊ตํ์ ํ์ค์ด์์ต๋๋ค. ํ์ง๋ง JSON์ด ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ๋ ์ ํธ๋ฉ๋๋ค.
| ๋น๊ต ํญ๋ชฉ | JSON | XML |
|---|---|---|
| ๊ฐ๋ ์ฑ | ๋์ | ๋ณดํต |
| ํ์ผ ํฌ๊ธฐ | ์์ | ํผ |
| ํ์ฑ ์๋ | ๋น ๋ฆ | ๋๋ฆผ |
| ์ฃผ์ ์ง์ | ์์ | ์์ |
| ์คํค๋ง ๊ฒ์ฆ | JSON Schema | XSD |
๋๋ถ๋ถ์ ํ๋ REST API๋ JSON์ ์ฌ์ฉํฉ๋๋ค. XML์ SOAP ํ๋กํ ์ฝ์ด๋ ๋ ๊ฑฐ์ ์์คํ ์์ ์ฌ์ ํ ์ฌ์ฉ๋ฉ๋๋ค.
๋ง๋ฌด๋ฆฌ
JSON์ ํ๋ ์น ๊ฐ๋ฐ์์ ๋น ์ง ์ ์๋ ํต์ฌ ๊ธฐ์ ์ ๋๋ค. ๋ฌธ๋ฒ์ด ๋จ์ํ๊ณ ์ฌ๋์ด ์ฝ๊ธฐ ํธํ๋ฉฐ, ๋ชจ๋ ์ธ์ด์์ ์ง์ํ๊ธฐ ๋๋ฌธ์ ๋ฐ์ดํฐ ๊ตํ์ ์ฌ์ค์ ํ์ค์ด ๋์์ต๋๋ค.
JSON์ ๋ค๋ฃจ๋ค ๋ณต์กํ๊ฒ ์ค์ฒฉ๋ ๊ตฌ์กฐ๋ฅผ ๋ณด๊ธฐ ์ข๊ฒ ์ ๋ฆฌํ๊ณ ์ถ๋ค๋ฉด, JSON ํฌ๋งคํฐ ๋๊ตฌ๋ฅผ ์ฌ์ฉํด๋ณด์ธ์. ํ ๋ฒ์ ํด๋ฆญ์ผ๋ก ๋ค์ฌ์ฐ๊ธฐ์ ์์ ๊ฐ์กฐ๋ก JSON์ ํจ์ฌ ์ฝ๊ธฐ ์ฝ๊ฒ ๋ง๋ค์ด์ค๋๋ค.