현상

REST API로 UPDATE를 진행하려고한다.
평소와 조금 다른 점은, 수정하기위해 파라미터로 보내는 값이 id 값이 아니라는 것.

나는 어떠한 색상을 가진 모든 데이터들을, 다른 색상으로 일괄적으로 바꿔주고자 했다.

그런데 에러가 발생한다.

원인

에러 메시지를 보니, 요청하는 URL이 잘못되었다.
내가 파라미터로 보내려던 것이 16진수의 색상 코드이다보니. #fff444 이런 식의 데이터를 담고 있었고, 요청에서 사용하는 URL에서 이 #이 URL 파라미터로 처리되지 않고 해시 태그로 처리되어서 서버에서는 해당 리소스를 찾지 못하고 404 Not Found 응답을 보내는 것이었다.

조금 간단한 편법이 생각나긴했다. put이 아닌 POST를 사용하면 굳이 URL에 파라미터를 넣지 않아도 되므로 이 방법을 사용할 수도 있었으나, REST는 REST답게 코딩하고 싶었다. 그래서 방법을 찾아 보았다.

해결방안

자바스크립트에는 URLSearchParams이라는 함수가 내장되어 있는 기능이 있다. 이 함수는 괄호로 감싼 결과를 인코딩해서 문자열에 삽입해준다. 그러므로 #문자를 포함한 문자열도 인코딩이 되어 전달이 가능해진다.

 const updateColor = (option) => {
    .
    .
    .
    .

    const url = `http://localhost:5000/scheduler/event/color/update/${encodeURIComponent(
      option.value
    )}`;
    axios
      .put(url, { value: pickedColor })
      .then((response) => {

        const test = currentEvents.filter(
          (item) => item.id !== parseInt(updatedEvent.id)
        );
      
        setCurrentEvents(() => [
          ...test,
          {
            id: response.data.id,
            title: response.data.title,
            start: response.data.start,
            end: response.data.end,
            color: response.data.color,
            locale: response.data.locale,
          },
        ]);
      })
      .catch((error) => {
        console.error(error);
      });
  };

백엔드에서 받을 때의 방법은 동일하다. req.params.value;으로 받아올 수 있다.

router.put("/event/color/update/:value", (req, res) => {
  const newvalue = req.body.value;
  const prevalue = req.params.value;
  const sqlQuery = "UPDATE event_list SET color=? WHERE color = ?;";
  db.query(sqlQuery, [newvalue, prevalue], (err, result) => {
    if (err) {
      console.log(err);
    } else {
      // const updatedEvent = {
      //   id: req.params.id,
      //   title,
      //   start,
      //   end,
      //   color,
      //   locale,
      // };
      // console.log("result", req);
      // console.log("req.body", req.body);
      res.send({ message: "Updated successfully" });
      console.log("흠 들어오긴하나", prevalue, newvalue);
    }
  });
});