서버의 카드 update API에 발생하는 에러를 수정하고, update 페이지의 제출 버튼에 API 요청을 바인딩한다. about phoca-review HOT 1 CLOSED

겪은 문제

formData로 요청을 보내면 PUT 메소드를 사용할 수 없기 때문에 수정 요청도 POST로 보내고 있었다.
그런데 router.post('/cards', ctrl.createCard), router.post('/cards/:id', ctrl.updateCard') 이렇게 파라미터만 붙어 있고 그 외의 경로는 같게 사용하다보니 update 요청을 보내면 create와 update 라우터가 모두 실행이 되는 것이다.

route with parameter get called twice로 검색해봐도 딱히 답이 나오지 않았다...

해결 방법 - 미들웨어 만들기

원래는 이랬던 라우터에

router.post('/', setDir, upload, ctrl.createCard);
router.post('/:id', setDir, upload, ctrl.updateCard);

다음과 같이 파라미터가 있는지 조건을 판단해서 해당 컨트롤러로 넘기는 미들웨어를 만들어 해결했다.

router.post('/:id', setDir, upload, function (req, res) {
  if (req.params.id) {
    ctrl.updateCard(req, res);
  } else {
    ctrl.createCard(req, res);
  }
});

+) 아니 이제보니 Client쪽 문제였잖아

어차피 카드 Create 페이지와 Update 페이지는 같은 에디터를 사용하므로 그냥 같은 페이지를 공유하며 플래그에 따라 둘의 로직을 구분하고 있었다. update 요청은 if문으로 잘 감쌌는데 create 요청은 if문으로 감싸지 않아서 update 요청을 할 때 create 요청과 update 요청을 동시에 보내고 있는 것이었다.
클라이언트 문제지만 서버를 수정하는 도중에 발견한 문제였기 때문에 애꿎은 서버에서 문제를 해결하고 있었던 것이다.
튀어나온 못이 있으면 무조건 두들기지 말고 잘 살펴보자ㅜㅜ
그래도 서버에서 어떻게 요상하게 해결은 했군. 클라이언트의 문제였기 때문에 죄 없는 서버의 코드는 다시 원래대로 되돌려주었다.

from phoca-review.