안녕하세요, mj입니다! 오늘은 API 응답으로 받은 JSON 데이터를 처리하는 방법에 대해 알아보겠습니다. API는 다양한 서비스와 데이터를 연결해주는 중요한 역할을 하며, JSON은 그 데이터 형식 중 하나입니다. JSON 데이터를 효과적으로 처리하는 방법을 배우면, API를 활용한 다양한 프로젝트에서 큰 도움이 될 것입니다.
JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 경량의 데이터 형식입니다. 사람과 기계 모두 읽기 쉽고, 다양한 프로그래밍 언어에서 쉽게 사용할 수 있습니다. JSON 데이터는 키-값 쌍으로 구성되어 있으며, 배열과 객체를 포함할 수 있습니다.
다음은 API에서 받은 JSON 데이터의 예시입니다:
{
"user": {
"id": 1,
"name": "홍길동",
"email": "hong@example.com"
},
"posts": [
{
"id": 101,
"title": "첫 번째 포스트",
"content": "안녕하세요, 첫 번째 포스트입니다."
},
{
"id": 102,
"title": "두 번째 포스트",
"content": "안녕하세요, 두 번째 포스트입니다."
}
]
}
JSON 데이터를 처리하기 위해서는 먼저 JSON 문자열을 JavaScript 객체로 변환해야 합니다. 이를 위해 JSON.parse() 메서드를 사용할 수 있습니다. 다음은 JSON 데이터를 처리하는 간단한 예시입니다:
const jsonData = '{"user":{"id":1,"name":"홍길동","email":"hong@example.com"},"posts":[{"id":101,"title":"첫 번째 포스트","content":"안녕하세요, 첫 번째 포스트입니다."},{"id":102,"title":"두 번째 포스트","content":"안녕하세요, 두 번째 포스트입니다."}]}';
const data = JSON.parse(jsonData);
console.log(data.user.name); // 홍길동
console.log(data.posts[0].title); // 첫 번째 포스트
사용자 정보를 출력하는 예시입니다:
console.log(`사용자 ID: ${data.user.id}`);
console.log(`사용자 이름: ${data.user.name}`);
console.log(`사용자 이메일: ${data.user.email}`);
출력 결과:
사용자 ID: 1
사용자 이름: 홍길동
사용자 이메일: hong@example.com
모든 포스트의 제목을 출력하는 예시입니다:
data.posts.forEach(post => {
console.log(`포스트 제목: ${post.title}`);
});
출력 결과:
포스트 제목: 첫 번째 포스트
포스트 제목: 두 번째 포스트
특정 포스트의 내용을 출력하는 예시입니다:
const postId = 101;
const post = data.posts.find(p => p.id === postId);
console.log(`포스트 내용: ${post.content}`);
출력 결과:
포스트 내용: 안녕하세요, 첫 번째 포스트입니다.
오늘은 API 연동 스크립트에서 JSON 데이터를 처리하는 방법에 대해 알아보았습니다. JSON 데이터는 다양한 형태로 제공되며, 이를 효과적으로 처리하는 방법을 익히면 API를 활용한 다양한 프로젝트에서 큰 도움이 될 것입니다. 앞으로도 다양한 API와 JSON 데이터 처리 방법에 대해 계속해서 배워나가길 바랍니다.
감사합니다! mj였습니다.