JavaScript 기초 <18. JSON과 JavaScript (서버 통신과 활용법)>

자바스크립트 JavaScript

18. JSON과 JavaScript (서버 통신과 활용법) 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. JSON(JavaScript Object Notation)이란?

JSON은 JavaScript 객체 문법을 기반으로 한 데이터 교환 형식입니다.
가볍고 구조가 단순하여 서버와 클라이언트 간 데이터 전송에 널리 사용됩니다.

📌 JSON은 웹 API, 데이터 저장, 서버 통신에서 가장 많이 사용되는 형식임!

---

 

2. JSON의 기본 문법

JSON은 키-값 쌍을 포함하는 객체(Object) 형태 또는 배열(Array) 형태로 데이터를 표현합니다.

✅ 1) JSON 객체 예제

{
    "name": "Alice",
    "age": 25,
    "isStudent": false,
    "skills": ["JavaScript", "React", "Node.js"]
}

✅ 2) JSON 배열 예제

[
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
]

📌 JSON은 문자열(String), 숫자(Number), 불리언(Boolean), 배열(Array), 객체(Object)만 지원함!

---

 

3. JavaScript에서 JSON 다루기 (JSON.parse, JSON.stringify)

✅ 1) JSON 문자열 → JavaScript 객체 변환 (JSON.parse)

const jsonString = '{"name": "Alice", "age": 25}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "Alice"

✅ 2) JavaScript 객체 → JSON 문자열 변환 (JSON.stringify)

const user = { name: "Bob", age: 30 };
const jsonData = JSON.stringify(user);
console.log(jsonData); // '{"name":"Bob","age":30}'

📌 JSON.parse()는 JSON을 JavaScript 객체로 변환하고, JSON.stringify()는 JavaScript 객체를 JSON 문자열로 변환함!

---

✅ 여기까지 JSON의 개념과 기본 활용법을 배웠습니다!
👉 "그렇다면, JSON을 활용하여 서버와 데이터를 주고받는 방법은?"
✅ 2부에서 fetch API, axios, JSON 데이터 요청/응답까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. fetch API로 JSON 데이터 가져오기

fetch API는 브라우저에서 제공하는 내장 함수로, 비동기적으로 데이터를 요청할 수 있습니다.

✅ 1) JSON 데이터 가져오기 (GET 요청)

fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("오류 발생:", error));

✅ 2) JSON 데이터 보내기 (POST 요청)

fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title: "새 글", body: "내용", userId: 1 })
})
.then(response => response.json())
.then(data => console.log("응답:", data));

📌 fetch는 기본적으로 Promise를 반환하며, .json() 메서드를 사용하여 JSON 데이터를 파싱함!

---

 

2. axios 라이브러리 활용하기

axios는 fetch API보다 더 강력한 기능을 제공하는 HTTP 클라이언트 라이브러리입니다.

✅ 1) axios를 사용한 GET 요청

axios.get("https://jsonplaceholder.typicode.com/users")
    .then(response => console.log(response.data))
    .catch(error => console.error("오류 발생:", error));

✅ 2) axios를 사용한 POST 요청

axios.post("https://jsonplaceholder.typicode.com/posts", {
    title: "새 글",
    body: "내용",
    userId: 1
})
.then(response => console.log(response.data));

📌 axios는 자동으로 JSON을 변환하며, 에러 처리가 fetch보다 간단함!

---

 

3. JSON을 활용한 로컬 데이터 저장 (localStorage, sessionStorage)

✅ 1) localStorage에 JSON 데이터 저장

const user = { name: "Alice", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

✅ 2) localStorage에서 JSON 데이터 가져오기

const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // "Alice"

📌 localStorage는 데이터를 브라우저에 저장하며, JSON.stringify()와 JSON.parse()를 함께 사용해야 함!

---

 

✅ 지금까지 JSON의 기본 개념, 서버 통신, fetch API, axios, localStorage 활용법을 배웠습니다!
👉 "그렇다면, 로컬 데이터를 저장하는 localStorage, sessionStorage, cookie는 각각 어떤 차이가 있을까?"
✅ 다음 회차에서 localStorage, sessionStorage, cookie의 차이점과 활용법을 배워봅시다! 🚀