Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 책으론 원리만
- git flow start
- Mac
- 바닐라JS
- javascript30
- fetch pull 차이
- 클라이언트 컴포넌트
- 공부할 거 넘많다~
- CSS
- 개발일지
- Next.js
- HTML
- JavaScript
- TS
- git flow finish
- 서버 컴포넌트
- 실무는 공식문서로
- 차이점
- freecodecamp
- js
- AJAX
- 힘들었던 한주
- jQuery
- Main
- git
- api 라우트
- axios
- 끝까지 잘 마무리하기
- 다시 홧팅
- 백준
Archives
- Today
- Total
다다의 개발일지 6v6
데이터 교환에 많이 사용되는 JSON 형식에 대해서 알아보자 본문
JSON (JavaScript Object Notation) 이란?
JSON은 JavaScript 객체 표기법을 기반으로 만든 데이터 형식.
사람이 읽기 쉽고, 기계가 해석하기 쉬운 구조로 되어 있어서, 서버와 클라이언트 간 데이터 교환에 가장 많이 사용된다.
JSON은 key-value(키-값) 쌍으로 이루어져 있다.
JSON은 자료형 리스트와 딕셔너리를 섞어놓은 것처럼 생겼음
📌 JSON 데이터 예시 (문자열 형태로 저장됨)
{
"name": "Alice",
"age": 25,
"isStudent": false,
"skills": ["JavaScript", "Python", "Java"],
"address": {
"city": "Seoul",
"country": "Korea"
}
}
JSON의 특징 (JavaScript 객체와 비교)
| JSON | JavaScript 객체 | |
| 문자열 속성 (Key) | 반드시 "" (큰따옴표) 사용 | 따옴표 없이 가능 |
| 데이터 타입 | 문자열, 숫자, 불리언, 배열, 객체 가능 | 함수, undefined 사용 가능 |
| 사용 목적 | 데이터 저장/전송 | 로직 처리 및 데이터 조작 |
JSON은 반드시 key를 큰따옴표("")로 감싸야 한다!
{ "name": "Alice" } ✅ (JSON 형식)
{ name: "Alice" } ❌ (JavaScript 객체, JSON 아님!)
JSON을 JavaScript에서 다루는 방법
JavaScript에서 JSON을 사용하려면 문자열 → 객체, 객체 → 문자열 변환이 필요.
✔ JSON을 객체로 변환 (파싱)
📌 JSON 문자열을 JavaScript 객체로 변환할 때 JSON.parse()를 사용!
const jsonData = '{"name": "Alice", "age": 25}';
const obj = JSON.parse(jsonData);
console.log(obj.name); // "Alice"
console.log(obj.age); // 25
✔ 객체를 JSON 문자열로 변환
📌 JavaScript 객체를 JSON 형식의 문자열로 변환할 때 JSON.stringify()를 사용!
const person = {
name: "Bob",
age: 30,
isStudent: false
};
const jsonString = JSON.stringify(person);
console.log(jsonString);
// '{"name":"Bob","age":30,"isStudent":false}'
JSON이 많이 사용되는 곳
✅ API 응답 및 요청 (서버와 데이터 주고받을 때)
✅ 로컬 저장소 (localStorage, sessionStorage) 저장
✅ 설정 파일 (config.json)
✅ 데이터베이스에서 데이터 주고받을 때 (MongoDB 등)
✔ JSON은 데이터를 저장하고 주고받는 형식으로, JavaScript 객체와 유사하지만 문자열 형태로 다룸!
✔ 서버와 클라이언트 간 데이터를 주고받을 때 가장 많이 사용됨!
✔ JSON.parse() → JSON을 객체로 변환
✔ JSON.stringify() → 객체를 JSON으로 변환
'Frontend > JavaScript' 카테고리의 다른 글
| jQuery - HTML 요소들을 조작하는 편리한 JS 라이브러리 (레거시) (0) | 2025.02.24 |
|---|---|
| Ajax - JS에서 클라이언트와 서버의 '비동기적' API 통신 방식 + jQuery, fetch API, Axios, SSE, WebSockets (0) | 2025.02.24 |
| [JS] 함수 호이스팅에 대해서도 알아보자. + 함수 선언문, 함수 표현식, 화살표 함수, 함수에서의 this (2) | 2025.02.21 |
| [JS] var, let, const의 차이점 + 변수호이스팅 , 스코프 (0) | 2025.02.21 |
| [JS] Day 3 - CSS Variables ( JS로 CSS 변수 수정하기! ) (0) | 2025.02.21 |