Colin's Blog
자바스크립트에서 JSON 형식을 이용한 데이터 통신 방법

JSON은 JavaScript Object Notation의 약자로, 데이터를 표현하기 위한 경량의 형식입니다. JSON 형식을 이용하면 서버와 클라이언트 간의 데이터를 효율적으로 교환할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 JSON 형식을 이용하여 데이터를 통신하는 방법을 알아보겠습니다.

1. JSON.stringify()

JSON.stringify() 함수는 자바스크립트 객체를 JSON 형식의 문자열로 변환하는 역할을 수행합니다. 이 함수를 이용하여 서버로 데이터를 전송하기 전에 자바스크립트 객체를 JSON 형식으로 변환할 수 있습니다.

다음은 JSON.stringify() 함수를 사용한 예시 코드입니다.

const data = {
  name: "John Doe",
  age: 30,
  email: "johndoe@example.com"
};

const jsonData = JSON.stringify(data);
console.log(jsonData);

위 코드에서 data 객체는 name, age, email 세 개의 속성을 가지고 있습니다. JSON.stringify() 함수를 사용하여 data 객체를 JSON 형식으로 변환한 후, 변환된 JSON 형식의 문자열을 jsonData 변수에 저장합니다. 이후 console.log(jsonData)를 호출하면 jsonData 변수에 저장된 JSON 형식의 문자열이 출력됩니다.

2. JSON.parse()

JSON.parse() 함수는 JSON 형식의 문자열을 자바스크립트 객체로 변환하는 역할을 수행합니다. 이 함수를 이용하여 서버로부터 전송받은 JSON 형식의 데이터를 자바스크립트 객체로 변환할 수 있습니다.

다음은 JSON.parse() 함수를 사용한 예시 코드입니다.

const jsonData = `{"name":"John Doe","age":30,"email":"johndoe@example.com"}`;

const data = JSON.parse(jsonData);
console.log(data);

위 코드에서 jsonData 변수에는 JSON 형식의 문자열이 저장되어 있습니다. JSON.parse() 함수를 사용하여 jsonData 변수에 저장된 JSON 형식의 문자열을 자바스크립트 객체로 변환한 후, 변환된 객체를 data 변수에 저장합니다. 이후 console.log(data)를 호출하면 data 변수에 저장된 자바스크립트 객체가 출력됩니다.

3. JSON을 이용한 데이터 통신

JSON 형식을 이용하여 서버와 클라이언트 간에 데이터를 효율적으로 교환할 수 있습니다. 클라이언트는 JSON.stringify() 함수를 이용하여 자바스크립트 객체를 JSON 형식의 문자열로 변환한 후, 서버로 데이터를 전송할 수 있습니다. 서버는 전송받은 JSON 형식의 문자열을 JSON.parse() 함수를 이용하여 자바스크립트 객체로 변환한 후, 해당 데이터를 이용하여 필요한 작업을 수행할 수 있습니다. 이후 서버는 클라이언트로부터 생성된 결과를 다시 JSON 형식으로 변환하여 클라이언트에게 전송할 수 있습니다.

JSON 형식의 데이터 통신을 위한 예시 코드는 아래와 같습니다.

// 클라이언트 코드
const data = {
  name: "John Doe",
  age: 30,
  email: "johndoe@example.com"
};

const jsonData = JSON.stringify(data);

fetch("http://example.com/api", {
  method: "POST",
  body: jsonData,
  headers: {
    "Content-Type": "application/json"
  }
})
.then(response => response.json())
.then(result => {
  console.log(result);
});


// 서버 코드
app.post("/api", (req, res) => {
  const jsonData = req.body;
  const data = JSON.parse(jsonData);
  
  // 데이터를 이용한 작업 수행
  
  const result = {
    message: "작업이 완료되었습니다."
  };
  
  const jsonResult = JSON.stringify(result);
  
  res.send(jsonResult);
});

위 코드에서 클라이언트는 fetch 함수를 사용하여 서버로 데이터를 전송합니다. fetch 함수에 전송할 데이터를 JSON 형식의 문자열로 변환한 jsonData를 포함하고, Content-Type 헤더를 application/json으로 설정하여 서버에게 데이터가 JSON 형식임을 알립니다.

서버는 전송받은 데이터를 JSON.parse() 함수를 사용하여 자바스크립트 객체로 변환한 후, 해당 데이터를 이용하여 필요한 작업을 수행합니다. 작업이 완료되면 결과 데이터를 JSON.stringify() 함수를 사용하여 JSON 형식의 문자열로 변환한 후 클라이언트에게 응답합니다. 클라이언트는 fetch 함수의 then 메소드를 이용하여 서버로부터 전송받은 JSON 형식의 응답 데이터를 처리할 수 있습니다.

JSON 형식을 이용한 데이터 통신 방법은 데이터 교환의 효율성을 높이고, 관리하기 쉬운 형식을 사용하여 개발 생산성을 향상시킵니다. 자바스크립트에서 JSON 형식을 이용한 데이터 통신 방법을 잘 익혀 활용하면 웹 애플리케이션 개발에 많은 도움이 될 것입니다.

자세한 내용은 JSON 공식 문서를 참고하시기 바랍니다.

© 2018 Colin. All rights reserved.