API 문서 작성: HTTP Status와 JSON 파라미터

API 문서 작성: HTTP Status와 JSON 파라미터

---

1. HTTP Status 코드 설명

HTTP 상태 코드는 클라이언트와 서버 간의 요청 및 응답 상태를 나타낸다.

---

성공 코드

1. 200 OK
   • 요청이 성공적으로 처리됨.
   • 주로 GET, PUT, PATCH, DELETE 요청에 사용.
2. 201 Created
   • 요청이 성공적으로 처리되었고, 새로운 리소스가 생성됨.
   • 주로 POST 요청에 사용.
3. 204 No Content
   • 요청이 성공적으로 처리되었으나, 응답 본문(body)이 없음.
   • DELETE 요청 후 주로 사용.

---

실패 코드

1. 400 Bad Request
   • 클라이언트 요청이 잘못되어 서버가 이해하지 못함.
   • 예: 잘못된 파라미터 전달.
2. 401 Unauthorized
   • 인증이 필요하거나, 인증에 실패했을 때 발생.
   • 예: 유효하지 않은 토큰.
3. 403 Forbidden
   • 요청 권한이 없음.
   • 인증은 되었으나, 특정 리소스에 대한 권한이 부족할 때.
4. 404 Not Found
   • 요청한 리소스가 서버에 존재하지 않을 때.
5. 500 Internal Server Error
   • 서버에서 처리 중에 오류가 발생.

---

예시

POST /users (회원 생성 API)

• 설명: 새로운 사용자를 생성.
• 성공 응답:
  • HTTP Status: 201 Created
  • JSON 응답:

    {
      "id": 123,
      "username": "john_doe",
      "email": "john@example.com"
    }
    

• 실패 응답:
  • HTTP Status: 400 Bad Request
  • JSON 응답:

    {
      "error": "Invalid input data",
      "details": {
        "username": "Username is required",
        "email": "Invalid email format"
      }
    }
    

DELETE /users/{id} (회원 삭제 API)

• 설명: 특정 사용자를 삭제.
• 성공 응답:
  • HTTP Status: 204 No Content
• 실패 응답:
  • HTTP Status: 404 Not Found
  • JSON 응답:

    {
      "error": "User not found",
      "userId": 123
    }
    

---

리액트: Virtual DOM

Virtual DOM이란?

Virtual DOM은 실제 DOM의 경량화된 사본으로, DOM 변경 사항을 메모리에서 계산하여 실제 DOM 조작을 최소화하는 기술이다.

---

작동 원리

1. 리액트 컴포넌트 렌더링:
   • 상태나 속성(props)이 변경되면 Virtual DOM이 업데이트.
2. Diffing 알고리즘:
   • 변경 전후의 Virtual DOM을 비교(diffing)하여, 변경된 부분만 계산.
3. 패치(Patching):
   • 변경된 부분만 실제 DOM에 반영.

---

Virtual DOM의 장점

1. 성능 최적화:
   • 전체 DOM을 조작하지 않고, 변경된 부분만 반영하여 효율적.
2. 간결한 코드:
   • 개발자는 DOM 업데이트를 신경 쓰지 않아도 됨.
3. 크로스 브라우저 지원:
   • 브라우저 간 DOM 차이를 추상화.

---

 

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={() => setCount(count + 1)}>증가</button>
        </div>
    );
}

export default Counter;

• Virtual DOM 작동 과정:
  1. setCount 호출 → 상태 업데이트.
  2. Virtual DOM에서 업데이트된 컴포넌트 렌더링.
  3. 변경된 부분만 실제 DOM에 반영.