REST API

: HTTP URI를 통해 자원을 명시하고, METHODF를 통해 해당 자원에 한 CRUD Operation 을 적용하는 것을 의미한다.

CRUD Operation이란 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 create, read, update, delete 를 묶어서 일컫는 말

REST API 설계 시 가장 중요한 가지

• 첫 번째, URI는 정보의 자원을 표현해야 한다.

• 두 번째, 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다.

DELETE /members/1


//회원 정보를 가져오는 URI
GET /members/show/1     (x)
GET /members/1          (o)


//회원을 추가할 때
GET /members/insert/2 (x)  //GET 메서드는 리소스 생성에 맞지 않는다.
POST /members/2       (o)

HTTP Methods

POST: POST를 통해 해당 URI를 요청하면 리소스를 생성합니다.
GET: GET를 통해 해당 리소스를 조회합니다. 리소스를 조회하고 해당 도큐먼트에 대한 자세한 정보를 가져온다.
PUT: PUT를 통해 해당 리소스를 수정합니다.
DELETE: DELETE를 통해 리소스를 삭제합니다.

예시 코드

// PUT - 수정
  function toggleDone() {
    fetch(`http://localhost:3001/words/${word.id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        ...word,
        isDone: !isDone,
      })
    }).then(res => {
      if (res.ok) {
        setIsDone(!isDone);
      }
    });
  };


// DELETE - 삭제
  function del() {
    if(window.confirm('삭제하시겠습니까?')) {
      fetch(`http://localhost:3001/words/${word.id}`, {
        method: "DELETE"
      })
      .then(res => {
        if(res.ok) {
          setWord({id: 0});
        }
      })
    }
  };


// POST - 생성, 등록
  function onSubmit(e) {
    e.preventDefault();

    fetch(`http://localhost:3001/words/`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        day: dayRef.current.value,
        eng: engRef.current.value,
        kor: korRef.current.value,
        isDone: false,  //값 고정
      }),
    }).then((res) => {
      if (res.ok) {
        alert("단어 추가 완료!");
        navigate(`/day/${dayRef.current.value}`);
      }
    });
  }