Table of Contents

48일차: API 연동 스크립트 – JSON 데이터 처리

안녕하세요, mj입니다! 오늘은 API 응답으로 받은 JSON 데이터를 처리하는 방법에 대해 알아보겠습니다. API는 다양한 서비스와 데이터를 연결해주는 중요한 역할을 하며, JSON은 그 데이터 형식 중 하나입니다. JSON 데이터를 효과적으로 처리하는 방법을 배우면, API를 활용한 다양한 프로젝트에서 큰 도움이 될 것입니다.

1. JSON 데이터란?

JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 경량의 데이터 형식입니다. 사람과 기계 모두 읽기 쉽고, 다양한 프로그래밍 언어에서 쉽게 사용할 수 있습니다. JSON 데이터는 키-값 쌍으로 구성되어 있으며, 배열과 객체를 포함할 수 있습니다.

2. API 응답 예시

다음은 API에서 받은 JSON 데이터의 예시입니다:

    {
        "user": {
            "id": 1,
            "name": "홍길동",
            "email": "hong@example.com"
        },
        "posts": [
            {
                "id": 101,
                "title": "첫 번째 포스트",
                "content": "안녕하세요, 첫 번째 포스트입니다."
            },
            {
                "id": 102,
                "title": "두 번째 포스트",
                "content": "안녕하세요, 두 번째 포스트입니다."
            }
        ]
    }

3. JSON 데이터 처리 방법

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); // 첫 번째 포스트

3.1. 예시 1: 사용자 정보 출력

사용자 정보를 출력하는 예시입니다:

    console.log(`사용자 ID: ${data.user.id}`);
    console.log(`사용자 이름: ${data.user.name}`);
    console.log(`사용자 이메일: ${data.user.email}`);

출력 결과:

    사용자 ID: 1
    사용자 이름: 홍길동
    사용자 이메일: hong@example.com

3.2. 예시 2: 포스트 제목 출력

모든 포스트의 제목을 출력하는 예시입니다:

    data.posts.forEach(post => {
        console.log(`포스트 제목: ${post.title}`);
    });

출력 결과:

    포스트 제목: 첫 번째 포스트
    포스트 제목: 두 번째 포스트

3.3. 예시 3: 특정 포스트 내용 출력

특정 포스트의 내용을 출력하는 예시입니다:

    const postId = 101;
    const post = data.posts.find(p => p.id === postId);
    console.log(`포스트 내용: ${post.content}`);

출력 결과:

    포스트 내용: 안녕하세요, 첫 번째 포스트입니다.

4. 결론

오늘은 API 연동 스크립트에서 JSON 데이터를 처리하는 방법에 대해 알아보았습니다. JSON 데이터는 다양한 형태로 제공되며, 이를 효과적으로 처리하는 방법을 익히면 API를 활용한 다양한 프로젝트에서 큰 도움이 될 것입니다. 앞으로도 다양한 API와 JSON 데이터 처리 방법에 대해 계속해서 배워나가길 바랍니다.

감사합니다! mj였습니다.