[Express] 라우팅할 때, 순서에 주의할 것.

오늘은 라우터에서 식별자를 포함하는 URL을 쓸 때 주의해야 할 점에 대한 포스팅입니다.

문제 상황

식별자(ID)를 포함하는 URL을 사용했는데, 엔드포인트를 제대로 인식하지 못해서 다른 컨트롤러로 이어짐. 

// 게시글 수정 routes
Router.post('/posts/:id', updatePost);

// 게시글 생성 routes
Router.post('/posts/create', createPost);

 코드는 위와 같이 작성했고, 두 라우트의 순서가 critical한 문제를 만들 수 있습니다.😂

// 게시글 수정 처리
router.post('/posts/:id', updatePost);

// 새 게시글 생성 처리
router.post('/posts/create', createPost);

실제로 이 코드는 '/posts/create'로 들어오는 요청도 '/posts/:id'로 처리가 됩니다. 왜 그런지에 대해 이해하려면 정적 경로와 동적 경로에 대해 알아야합니다.

정적 경로와 동적 경로

1. 정적 경로 (Static Route)

정적 경로는 URL 경로가 고정된 경로를 의미합니다. 즉, 특정 문자열로만 요청을 처리합니다. 예를 들어, /posts/create와 같은 경로는 create라는 특정 문자열로만 인식되는 고정된 경로입니다.

2. 동적 경로 (Dynamic Route)

동적 경로는 URL 경로에 변수를 포함하는 경로로, 요청할 때마다 다른 값이 들어오는 부분이 있습니다. 예를 들어, /posts/:id에서 :id와 같이 콜론(:) 으로 시작하는 부분은 동적으로 해석됩니다.

/posts/123이나 /posts/abc와 같은 요청이 들어오면, :id는 각각 123과 abc로 처리됩니다.

결론

라우터를 설정할 때는 정적 경로가 동적 경로보다 먼저 오도록 설정해야합니다. /posts/create와 같은 정적 경로를 먼저 처리하고, 그 후에 /posts/:id와 같은 동적 경로를 처리하도록 설정해야 합니다.

이렇게 설정하면 /posts/create로 들어오는 요청은 create 라우터로 처리되고, /posts/:id로 들어오는 요청은 :id 라우터로 처리되므로 문제를 해결할 수 있습니다.

근데 사실 더 근본적인 해결 방법은

API 설계를 할 때 명확하게 겹치지 않도록 잘 설계하는 것...create와 같은 동사를 url에 쓰는 건 좋지 않습니다. 아래와 같이 HTTP method를 달리해서 같은 url로도 다른 컨트롤러에 도달할 수 있습니다.

// 게시물 생성
router.post('/posts', createPost);

// 게시물 수정
router.put('/posts/:id', updatePost);

// 게시물 삭제
router.delete('/posts/:id', deletePost);