자바스크립트 공부하기 - JSON

 

JSON을 공부하기 앞서서.. 상위 개념을 이해하면 보다 이해가 쉽지 않을까 

---

JSON의 상위 개념을 이해하는 방법:

1. 정보란 무엇일까요?
   우리가 일상에서 사용하는 정보는 사실 데이터라고도 할 수 있어.
   예를 들어, "내 이름은 Jane이고 나이는 25살이에요."라는 말도 정보(데이터)야!
   
   
2. 데이터를 어떻게 기록할까?
   정보를 기록하거나 다른 사람에게 전달할 때, 어떻게 기록할지 정해야 해.
   이때 쓰는 방법이 바로 **"형식"**이야.
   예를 들어, 편지지나 이메일을 사용해서 정보를 전달하는 것처럼, 정보를 전달할 때는 특정한 형식이 필요해요.
   
   
   
3.  JSON이란?
   JSON은 바로 그 형식 중 하나.
   예를 들어, 정보를 편지로 쓴다고 하면, JSON은 그 편지지의 모양이라고 생각할 수 있어.
   JSON은 데이터를 간단하고 깔끔하게 기록할 수 있게 해주는 형식입니다.

 

---

JSON의 하위 개념 : 로컬 스토리지에서 주로 사용할 수 있는 메소드

로컬스토리지는 데이터를 저장하고 가져오는 메서드(함수) 를 제공해.

 

1️⃣ 데이터 저장 → setItem(key, value)

localStorage.setItem("theme", "dark");

 

2️⃣ 데이터 가져오기 → getItem(key)

let theme = localStorage.getItem("theme"); 
console.log(theme); // "dark"

 

3️⃣ 데이터 삭제 → removeItem(key)

localStorage.removeItem("theme");

 

4️⃣ 전체 데이터 삭제 → clear()

localStorage.clear();

 

Q : 공부하다가 급 궁금해진. getItem 이랑 parse랑 둘다 뭔가 가져오는 것 같은데 헷갈려..

A : localStorage.getItem(key)과 JSON.parse()는 완전히 다른 역할을 하는 함수야.

핵심 차이점

함수역할반환값

함수	역할	반환값
getItem(key)	로컬스토리지에서 값 가져오기	문자열
JSON.parse(string)	문자열을 객체/배열로 변환	객체 또는 배열

 

✅ 1. localStorage.getItem(key) → 데이터 가져오기

기능:

• 로컬스토리지에서 문자열(String) 데이터를 가져와.
• 항상 문자열로 반환됨.

✅ 2. JSON.parse(string) → 문자열을 객체/배열로 변환

기능:

• 문자열을 원래 객체나 배열로 변환해.
• localStorage.getItem()로 가져온 데이터가 객체/배열이면 반드시 JSON.parse()를 사용해야 해!

---

 

 

상위, 하위 개념은 공부했으니. 이제 JSON을 공부해보자.

 

---

JSON 안에는 **"객체"**와 "배열" 같은 것들이 들어있어요:

• 객체는 여러 정보를 묶어서 기록하는 방법. 예를 들어, 나의 이름, 나이, 취미 같은 정보를 묶어서 하나로 기록하는 방식.
• 배열은 여러 개의 정보를 순서대로 나열하는 방법. 예를 들어, 취미가 여러 개 있을 때, 그것을 순서대로 적는 것.
  
  

---

* 객체에서의 key 값과 value 값 ?

---

그래서, JSON은 무엇일까요?

**JSON은 정보를 전하고 저장하는 특정한 방법(형식)**이라고 할 수 있어.

그리고 이 방법 안에는 여러 정보를 묶어주는 객체와 순서대로 나열하는 배열 같은 도구들이 들어 있어.

 

간단한 예시:

내가 좋아하는 취미를 JSON 형식으로 표현해 볼게!

{
  "이름": "Jane",
  "나이": 25,
  "취미": ["독서", "영화보기", "스노보드"]
}

 

• 여기서 "이름": "Jane", "나이": 25 같은 것들은 객체라고 부르고, "취미": ["독서", "영화보기", "스노보드"]는 배열이.
• 이처럼, JSON은 정보를 깔끔하게 정리하고 전할 수 있는 **특별한 방법(형식)**

---

요약

• 정보 = 데이터
• 형식 = 정보를 기록하고 전달하는 방법
• JSON = 정보를 전달하는 특정한 형식
• 객체와 배열은 JSON 안에서 데이터를 묶거나 나열하는 방법.

이렇게 생각하면, JSON은 그냥 정보를 정리해서 주고받는 특별한 방법이라고 이해할 수 있을 거예요!

---

 

어떤건지 짐작이 와. 

실무에선 어떻게 쓰일까 ?

 

---

💭 1. JSON은 어디에서 많이 쓰일까?

JSON은 데이터를 저장하거나 주고받을 때 가장 많이 사용돼. 특히 다음과 같은 상황에서 많이 활용돼:

1. 웹 개발
   • 브라우저와 서버 간 데이터를 주고받을 때 JSON을 사용해.
   • 예를 들어, 로그인하면 내 정보(이름, 이메일 등)를 JSON으로 받아와서 화면에 보여줄 수 있어.
2. API (Application Programming Interface)
   • 앱과 서버가 데이터를 주고받을 때 JSON을 써.
   • 예를 들어, 날씨 정보를 가져오는 API에서 이런 JSON 데이터를 받을 수 있어:

{
  "도시": "Toronto",
  "온도": 12,
  "날씨": "맑음"
}

 

1. 앱 개발 (모바일 & 백엔드)
   • 안드로이드(iOS) 앱, 백엔드 서버에서도 데이터를 주고받을 때 JSON을 써.
2. 데이터 저장 (NoSQL, 파일 저장)
   • JSON은 가볍고, 읽기 쉬워서 MongoDB 같은 NoSQL 데이터베이스에서 데이터 저장 방식으로 많이 사용돼.
   • JSON 파일(.json)로 데이터를 저장하는 경우도 많아.

---

 

 

💭 2. JSON을 실제로 사용하는 방법

개발할 때 JSON을 다루려면 보통 프로그래밍 언어에서 JSON을 읽고 쓰는 방법을 알아야 해.
예를 들어, JavaScript에서 JSON을 다루는 법을 볼게!

 

📌 JavaScript에서 JSON 사용하기

// JSON 데이터
const jsonData = '{"이름": "Jane", "나이": 25, "취미": ["독서", "영화보기"]}';

// JSON을 JavaScript 객체로 변환 (파싱)
const obj = JSON.parse(jsonData);
console.log(obj.이름);  // 출력: Jane

// JavaScript 객체를 JSON 문자열로 변환
const newJson = JSON.stringify(obj);
console.log(newJson); // 출력: {"이름":"Jane","나이":25,"취미":["독서","영화보기"]}

---

 

 

💭 3. JSON의 중요한 특징 & 주의할 점

1. 문자열(key)은 반드시 큰따옴표("")를 써야 해
   ❌ {'이름': 'Jane'} → ❌ JSON이 아님 (파이썬 딕셔너리)
   ✅ {"이름": "Jane"} → ✅ JSON 형식
2. 숫자는 따옴표 없이 사용

---

 

 

JSON.. 어렵지만 조금은 이해가 돼..

 

---

 

Q : JavaScript 데이터를 JSON 형식으로 변환하려면 반드시 문자열로 변환 해야 해 ?

A : 네, JavaScript 데이터를 JSON 형식으로 변환하려면 반드시 문자열로 변환해야 합니다. 그 이유는 JSON(JavaScript Object Notation) 자체가 텍스트 기반의 데이터 교환 형식이기 때문입니다.

 

 

JSON의 특징:

• 텍스트 형식: JSON은 데이터를 사람이 읽고 쓰기 쉬운 텍스트 형식으로 표현합니다.
• 문자열 기반: JSON 데이터는 항상 큰따옴표("")로 둘러싸인 문자열로 표현됩니다.
• 데이터 교환: 주로 서버와 클라이언트 간의 데이터 교환에 사용됩니다.

 

JSON.stringify() 함수의 역할:

JavaScript의 JSON.stringify() 함수는 JavaScript 객체, 배열, 숫자, 문자열, 불리언 등을 JSON 형식의 문자열로 변환하는 역할을 합니다. 즉, JavaScript 데이터를 JSON 문자열로 "직렬화(serialize)"하는 것입니다.

변환 과정:

1. JavaScript 데이터: JavaScript 객체, 배열 등 다양한 데이터 타입을 사용합니다.
2. JSON.stringify(): JSON.stringify() 함수를 사용하여 JavaScript 데이터를 JSON 문자열로 변환합니다.
3. JSON 문자열: 결과적으로 JSON 형식의 문자열이 생성됩니다.

---

 

JavaScript에서는 JSON을 객체로 변환하느냐 객체를 JSON 문자열로 변환하느냐에 따라 사용하는 메서드가 달라져.

💭 JSON 관련 두 가지 메서드

 

변환 방향	사용하는 메서드	설명
JSON → 객체	JSON.parse()	JSON 문자열을 JavaScript 객체로 변환
객체 → JSON	JSON.stringify()	JavaScript 객체를 JSON 문자열로 변환

 

 

📌 1. JSON → JavaScript 객체 (JSON.parse())

const jsonData = '{"name": "Jane", "age": 25}';

// JSON 문자열을 JavaScript 객체로 변환
const obj = JSON.parse(jsonData);

console.log(obj.name); // 출력: Jane
console.log(obj.age);  // 출력: 25
console.log(typeof obj); // 출력: object (객체가 됨)

✅ JSON.parse()는 문자열을 객체로 변환하기 때문에, 이제 obj.name처럼 속성에 접근할 수 있어.

 

 

📌 2. JavaScript 객체 → JSON (JSON.stringify())

const obj = { name: "Jane", age: 25 };

// JavaScript 객체를 JSON 문자열로 변환
const jsonString = JSON.stringify(obj);

console.log(jsonString); // 출력: '{"name":"Jane","age":25}'
console.log(typeof jsonString); // 출력: string (문자열이 됨)

✅ JSON.stringify()는 객체를 JSON 문자열로 변환하기 때문에, 데이터가 string 타입이 돼.

---

 

 

JSON.. 위 내용들이 개념이 조금 중구난방 같아서, 아래에 간단한 예제와 다시 차근 차근 정리해보자

 

---

JavaScript의 로컬 스토리지 (Local Storage) 개념

로컬 스토리지는 클라이언트 브라우저에 데이터를 영구적으로 저장하는 기능을 제공합니다. 주로 사용자가 페이지를 새로 고침하거나 브라우저를 닫아도 데이터를 유지해야 할 때 사용됩니다.

 

실무에서 자주 쓰이는 로컬 스토리지 개념

 

1. 데이터 저장: 로컬 스토리지는 localStorage.setItem(key, value)를 사용하여 데이터를 저장합니다. key는 데이터의 이름이고, value는 저장할 데이터입니다.

localStorage.setItem('username', 'Jane');

> 현재 예제는 문자열 이기 때문에 쉽게 저장하고 가져오고 할 수 있다.

 

2. 데이터 조회: 저장된 데이터를 localStorage.getItem(key)로 불러옵니다.

const username = localStorage.getItem('username');
console.log(username); // 'Jane'

 

3. 데이터 삭제: localStorage.removeItem(key)를 사용하여 특정 키에 해당하는 데이터를 삭제합니다.

localStorage.removeItem('username');

 

4. 전체 삭제: 모든 데이터를 한 번에 삭제하려면 localStorage.clear()를 사용합니다.

localStorage.clear();

 

5. 데이터 확인: 로컬 스토리지에 저장된 모든 키를 확인하려면 localStorage.length를 사용하여 저장된 항목의 개수를 확인할 수 있습니다.

console.log(localStorage.length);

 

6. JSON 데이터 저장: 로컬 스토리지는 문자열만 저장할 수 있기 때문에 객체나 배열을 저장하려면 JSON으로 변환해야 합니다.

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

const retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name); // 'Jane'

---

실무에서의 로컬 스토리지 사용 예시

• 사용자 인증 상태 저장: 로그인한 사용자 정보를 로컬 스토리지에 저장하여 페이지를 새로 고침하거나 브라우저를 닫았다가 다시 열었을 때 로그인 상태를 유지할 수 있습니다.
• UI 상태 저장: 페이지의 테마(어두운 모드, 밝은 모드)나 사용자 맞춤 설정을 로컬 스토리지에 저장하여 사용자가 사이트에 다시 방문할 때 설정을 기억하도록 할 수 있습니다.
• 장바구니 기능 구현: 쇼핑몰에서 사용자가 장바구니에 담은 상품 정보를 로컬 스토리지에 저장하여 페이지 새로 고침 시에도 장바구니 정보를 유지할 수 있습니다.

---

로컬 스토리지 퀴즈

1. 문제 1: 로컬 스토리지에 데이터를 저장할 때, localStorage.setItem()의 첫 번째 매개변수는 무엇을 의미하나요?
   • a) 저장할 값
   • b) 저장할 데이터의 키
   • c) 데이터의 형식
2. 문제 2: localStorage.getItem('username')의 결과가 null일 경우, 이것은 무엇을 의미하나요?
   • a) 'username' 키에 해당하는 데이터가 존재하지 않음
   • b) 'username' 키에 저장된 값이 빈 문자열임
   • c) 'username' 키가 이미 삭제됨
3. 문제 3: 로컬 스토리지에 객체를 저장할 때, 데이터를 어떻게 변환해야 하나요?
   • a) JSON.parse()
   • b) JSON.stringify()
   • c) Object.toString()
4. 문제 4: localStorage.clear()의 기능은 무엇인가요?
   • a) 로컬 스토리지에 저장된 모든 항목을 삭제
   • b) 특정 키에 해당하는 항목을 삭제
   • c) 저장된 항목의 값을 수정
5. 문제 5: 로컬 스토리지는 어떤 데이터를 저장할 수 있나요?
   • a) 객체
   • b) 문자열
   • c) 배열

정답:

1. b) 저장할 데이터의 키
2. a) 'username' 키에 해당하는 데이터가 존재하지 않음
3. b) JSON.stringify()
4. a) 로컬 스토리지에 저장된 모든 항목을 삭제
5. b) 문자열