나의 React 여정: 19일차

JSON API 및 모의 서버 실습

json-server를 사용하는 것은 백엔드 서버를 시뮬레이션하고 GET, POST, PUT, PATCH, DELETE와 같은 API 상호 작용을 연습할 수 있는 좋은 방법입니다.

json-server란 무엇인가요?

• JSON 데이터베이스로 작업할 모의 서버를 빠르게 생성할 수 있는 도구
• 완전히 작동하는 백엔드 없이 API 프로토타입을 제작하고 테스트하는 데 적합합니다.

설정 및 설치

1. 전제조건: Node.js

• Node.js가 시스템에 설치되어 있는지 확인하세요. 다음을 사용하여 확인하세요.

node -v
npm -v

2. json-server 설치

• npm을 사용하여 전역적으로 설치:

npm install -g json-server@0.17.4

JSON 서버를 사용하는 방법

1. 서버 시작
일부 초기 데이터를 사용하여 작업 디렉터리에 db.json 파일을 만듭니다. 예:

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}

• 서버를 시작하고 db.json 파일의 변경 사항을 살펴보세요.

json-server --watch db.json

• 기본적으로 서버는 http://localhost:3000에서 실행됩니다.

2. 엔드포인트 살펴보기
서버는 db.json의 각 컬렉션에 대해 RESTful 엔드포인트를 자동으로 생성합니다.

• GET /posts → 모든 게시물 가져오기
• GET /posts/1 → ID가 1인 게시물 가져오기
• POST /posts → 새 게시물 추가
• PUT /posts/1 → 전체 게시물을 ID 1로 교체
• PATCH /posts/1 → ID 1로 게시물의 특정 필드 업데이트
• DELETE /posts/1 → ID가 1인 게시물 삭제

우편 배달부 사용

Postman은 API를 테스트하기 위해 HTTP 요청을 만드는 도구입니다. Postman을 사용하여 각 작업을 수행하는 방법은 다음과 같습니다.

1. GET(데이터 가져오기)

• 요청 유형: GET
• URL: http://localhost:3000/posts
• 게시물 목록을 가져옵니다.

2. POST(새 데이터 추가)

• 요청 유형: POST
• URL: http://localhost:3000/posts
• 헤더: 콘텐츠 유형: 애플리케이션/json
• 본문(JSON):

{
  "id": 3,
  "title": "New Post",
  "content": "This is a new post"
}

• 게시물 컬렉션에 새 게시물을 추가합니다.

3. PUT(전체 리소스 교체)

• 요청 유형: PUT
• URL: http://localhost:3000/posts/2
• 헤더: 콘텐츠 유형: 애플리케이션/json

• 본문(JSON):
  {
  "title": "업데이트된 제목"
  }

• 결과: 전체 리소스를 제공된 데이터로 대체합니다.

이전:

{
  "id": 2,
  "title": "Second Post",
  "content": "Learning JSON-Server"
}

이후:

{
  "title": "Updated Title"
}

4. 패치(특정 필드 업데이트)

• 요청 유형: 패치
• URL: http://localhost:3000/posts/1
• 헤더: 콘텐츠 유형: 애플리케이션/json
• 본문(JSON):

node -v
npm -v

결과: 리소스의 지정된 필드만 업데이트합니다.

이전:

npm install -g json-server@0.17.4

이후:

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}

5. DELETE(데이터 제거)

• 요청 유형: DELETE
• URL: http://localhost:3000/posts/1
• ID 1인 게시물을 삭제합니다.

PUT과 PATCH의 주요 차이점

넣기

• 전체 리소스를 대체합니다.
• 본문에 포함되지 않은 필드는 생략합니다.

패치

• 지정된 필드만 업데이트합니다.
• 본문에 언급되지 않은 필드를 유지합니다.

결론

배운 점:

• 모의 API 서버를 생성하기 위해 json-server를 설치하고 사용했습니다.
• 기본 API 작업인 GET, POST, PUT, PATCH, DELETE를 연습했습니다.
• PUT과 PATCH의 차이점을 이해했습니다.

19일차 분쇄.

위 내용은 나의 React 여정: 19일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!