JSON 기본 구조

1. JSON 기본 구조

• 객체: { "key": "value" } 형태로, 키와 값의 쌍으로 이루어져 있음
• 배열: [ { "key": "value" }, { "key": "value" } ] 형태로, 여러 개의 객체를 포함할 수 있음

2. 일반적인 API 응답 구조

API 응답은 여러 가지 형태를 가질 수 있지만, 다음과 같은 구조가 일반적

1. 단일 객체 응답

{
    "id": 1,
    "name": "John Doe",
    "email": "john@example.com"
}

2. 배열 응답

[
    { "id": 1, "name": "John Doe" },
    { "id": 2, "name": "Jane Smith" }
]

3. 메타데이터 포함

{
    "data": [
        { "id": 1, "name": "John Doe" },
        { "id": 2, "name": "Jane Smith" }
    ],
    "meta": {
        "total": 2,
        "page": 1,
        "per_page": 10
    }
}

• 설명: 데이터와 함께 요청에 대한 메타 정보를 포함
• 예를 들어, 총 데이터 수, 현재 페이지, 페이지당 데이터 수 등을 포함할 수 있음

4. 상태 코드 및 메시지 포함

{
    "status": "success",
    "message": "Data retrieved successfully",
    "data": {
        "id": 1,
        "name": "John Doe"
    }
}

• 설명: 요청의 성공 여부와 관련된 상태 코드 및 메시지를 포함하여 클라이언트가 응답을 처리하는 데 도움이 됩니다.

3. 예외 처리

API 응답에서 예외나 오류가 발생할 때의 구조도 알아야 합니다.

{
    "status": "error",
    "message": "User not found",
    "code": 404
}

• 설명: 오류 상태와 메시지를 포함하여 클라이언트가 적절한 오류 처리를 할 수 있도록 함

4. 중첩 구조

{
    "id": 1,
    "name": "John Doe",
    "contacts": {
        "email": "john@example.com",
        "phone": "123-456-7890"
    },
    "addresses": [
        {
            "type": "home",
            "address": "123 Main St"
        },
        {
            "type": "work",
            "address": "456 Elm St"
        }
    ]
}

5. API 요청 시 고려 사항

• HTTP 메서드: GET, POST, PUT, DELETE 등 요청의 목적에 따라 적절한 메서드를 사용해야 함
• 헤더: 인증 정보, 콘텐츠 타입 등을 명시하는 헤더를 설정해야 할 수 있음
• 쿼리 파라미터: 데이터 필터링, 정렬, 페이지네이션 등을 위해 쿼리 파라미터를 사용할 수 있음

6. 데이터 파싱

프론트엔드에서 API 응답을 처리할 때는 fetch 또는 axios와 같은 라이브러리를 사용하여 데이터를 가져오고, JSON 형식으로 변환하여 사용할 수 있음

fetch('<https://api.example.com/users>')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));