서버 띄우는법 , http통신

json-server라는 놈을 사용한다.

다운 방법

https://www.npmjs.com/package/json-server

json-server

이쪽에 들어가서  보면 된다.

1.일단 라이브러리 설치한다.

npm install json-server

 

2.src/server/db.json 파일을 만들고 해당 코드를 집어넣는다.

{
  "posts": [
    { "id": "1", "title": "a title", "views": 100 },
    { "id": "2", "title": "another title", "views": 200 }
  ],
  "comments": [
    { "id": "1", "text": "a comment about post 1", "postId": "1" },
    { "id": "2", "text": "another comment about post 1", "postId": "1" }
  ],
  "profile": {
    "name": "typicode"
  }
}

 

3.package.json에 들어가서 해당코드 입력

// package.json
{
  "scripts": {
    "start:json-server": "json-server --watch src/server/db.json --port 3001"
  }
}

4.JSON 서버 실행

json-server --watch db.json --port 3001

 

• GET /posts - 모든 포스트를 가져오기
• GET /posts/1 - 특정 ID(1)의 포스트 가져오기
• POST /posts - 새로운 포스트 생성
• PUT /posts/1 - 특정 ID(1)의 포스트 업데이트
• DELETE /posts/1 - 특정 ID(1)의 포스트 삭제

 

이미지 내용 분석: JSON-Server API 활용 예시

이미지에 제시된 내용은 JSON-Server라는 간단한 REST API 서버를 이용하여 데이터를 조회하는 다양한 방법을 보여줍니다.

JSON-Server란?

• 간단한 API 서버를 빠르게 만들 수 있도록 도와주는 Node.js 패키지입니다.
• JSON 파일을 기반으로 REST API를 생성하며, 데이터베이스 없이도 간단한 CRUD(Create, Read, Update, Delete) 작업을 수행할 수 있습니다.

이미지에서 보여주는 API 호출 예시

• 기본적인 데이터 조회

http://localhost:3000/posts: 전체 posts 데이터를 조회
http://localhost:3000/posts/1: id가 1인 post 데이터를 조회

• 필터링된 데이터 조회

/posts?필드명=값: 특정 필드의 값이 일치하는 데이터를 조회. (예: http://localhost:3000/posts?title=a title)

 

/posts?필드명_like=값: 특정 필드에 특정 값이 포함된 데이터를 조회. (예: http://localhost:3000/posts?title_like=ti)

 

/posts?필드명_ne=값: 특정 필드에 특정 값이 포함되지 않은 데이터를 조회. (예: http://localhost:3000/posts?title_ne=ti)

각 예시에 대한 자세한 설명

http://localhost:3000/posts: posts 라는 이름의 데이터 전체를 가져오는 기본적인 요청

 

http://localhost:3000/posts/1: posts 데이터 중에서 id가 1번인 데이터 하나만을 가져옴

http://localhost:3000/posts?title=a title: posts 데이터 중에서 title이 "a title"인 데이터만을 가져옴

 

http://localhost:3000/posts?title_like=ti: posts 데이터 중에서 title에 "ti"라는 문자열이 포함된 데이터를 모두 가져옴

 

http://localhost:3000/posts?title_ne=ti: posts 데이터 중에서 title에 "ti"라는 문자열이 포함되지 않은 데이터를 모두 가져옴

 

 

 

리액트에서 쓰는 fetch

import { useEffect, useState } from "react";

export default function App() {
  const [getData, setGetData] = useState([]);

  useEffect(() => {
    // fetch는 웹브라우저 내장임.
    // fetch("http://localhost:3001/posts")
    //   .then((response) => response.json())
    //   .then((data) => setGetData(data));
    fetchData();
  }, []);

  const fetchData = async () => {
    // 모든 포스트를 가져오기
    const response = await fetch("http://localhost:3001/posts/", {
      method: "GET",
    });
    const data = await response.json();
    setGetData(data);

    // 댓글 id=1 가져오기
    const comment1Response = await fetch("http://localhost:3001/comments/1", {
      method: "GET",
    });
    const comment1Data = await comment1Response.json();
    console.log("Comment with id=1:", comment1Data);

    // 댓글 id=2의 텍스트를 수정하기
    const updateResponse = await fetch("http://localhost:3001/comments/2", {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ text: "modify" }),
    });
    const updatedData = await updateResponse.json();
    console.log("Updated comment with id=2:", updatedData);

    // 댓글 id=3 삭제하기
    await fetch("http://localhost:3001/comments/3", {
      method: "DELETE",
    });
    console.log("Deleted comment with id=3");
  };

  return (
    <>
      <div>{JSON.stringify(getData)}</div>
    </>
  );
}