자바스크립트 JSON과 Promise 완전 정리

인턴

자바스크립트 JSON과 Promise 완전 정리

choijming21 2025. 5. 8. 11:35

프론트엔드 개발을 하다보면 json(), JSON.parse(), Json.stringify() 그리고 Promise를 정말 자주 마주치게 됩니다. 처음에는 비슷하게 생겨서 헷갈리기 쉽지만, 각각의 목적과 사용법은 분명히 다릅니다. 이 글에서 이 네 가지를 개념과 예제를 중심으로 정리해보겠습니다!

1. response.json() - 서버 응답을 객체로 바꾸기

fetch()로 서버에 요청을 보냈을 때, 응답(response)은 Response 객체 형태로 돌아옵니다. 이때 response.json()을 사용하면 응답 본문(body)을 JavaScript 객체로 변환할 수 있습니다.

📌 예제:

const response = await fetch('http://api.example.com/user');
const data = await response.json();
console.log(data);
// 출력: { name: "Amy", age: 30 }

📎 특징:

response.json()은 비동기 함수입니다. → await를 붙이거나, .then()으로 처리해야 함.
내부적으로 JSON을 파싱해 JavaScript 객체로 만들어줌.

2. JSON.parse() - 문자열을 객체로 바꾸기

JSON.parse()는 JSON 형식의 문자열을 JavaScript 객체로 바꾸는 함수입니다. 예를 들어, 로컬스토리지나 외부에서 받은 데이터가 문자열 형태로 있다면, 이걸 객체로 바꿀 때 사용합니다.

📌 예제:

const jsonString = '{"name":"Amy", "age":30}';
const user = JSON.parse(jsonString);
console.log(user);
// 출력: { name: "Amy", age: 30 }

📎 특징:

동기 함수입니다.
json() 과 헷갈릴 수 있지만, JSON.parse()는 문자열을 직접 넣는 경우 사용합니다.

3. JSON.stringify() - 객체를 문자열로 바꾸기

JSON.stringify는 JavaScript 객체를 JSON 문자열로 바꾸는 함수입니다. 예를 들어, 서버로 데이터를 전송하거나 localStorage에 저장할 때 사용합니다.

📌 예제:

const user = { name: "Amy", age: 30 };
const jsonString = JSON.stringify(user);
console.log(jsonString);
// 출력: '{ "name": "Amy", "age": 30 }'

📎 특징:

객체나 배열을 JSON 문자열로 바꿔줌.
서버로 데이터를 보낼 때 fetch의 body에 자주 사용.

4. Promise - 미래의 값을 다루는 방법

자바스크립트는 비동기 처리를 위해 Promise라는 개념을 사용합니다. Promise는 "미래에 값이 생길 수도 있는 작업"을 표현합니다. 대표적으로 fetch()는 Promise를 반환합니다.

📌 예제(기본 구조):

const promise = fetch('http://api.example.com/user');
console.log(promise);
// 출력: Promise { <pending> }

📌 예제(사용 방법):

fetch('http://api.example.com/usser')
 .then(res => res.json())
 .then(data => console.log(data))
 .catch(err => console.log(err));

또는 async/await 구문으로 더 깔끔하게 쓸 수 있습니다:

async function getUser () {
 try (
  const response = await fetch('http://api.example.com/user');
  const data = await response.json();
  console.log(data);
 ) catch (err) {
 console.error(err)
 };
};

📎 Promise 상태 3가지

상태	설명
pending	대기 중(아직 결과 없음)
fulfilled	성공 (resolve 됨)
rejected	실패 (reject 됨)

📦 비유: 음식 배달

주문하면 → Promise 생성 (pending)
배달 오면 → resolve() → (fultilled)
사고 나면 → reject() → (rejected)

🔁 전체 요약 표

목적	함수	입력	동기/비동기	설명
응답 → 객체	response.json()	Response 객체	비동기	서버 응답을 객체로 변환
문자열 → 객체	JSON.parse()	JSON 문자열	동기	JSON 문자열을 파싱
객체 → 문자열	JSON.stringify()	객체	동기	객체를 JSON 문자열로 변환
비동기 처리	Promise	비동기 작업	비동기	나중에 결과가 생기는 작업

✨ 마무리

json()과 JSON.parse()는 입력 대상이 다릅니다: Response vs 문자열
JSON.stringify()는 데이터 보낼 때 꼭 필요합니다.
Promise는 네트워크 요청, 파일 읽기 등에서 미래의 결과를 깔끔하게 다룰 수 있게 해줍니다.