💻 프론트엔드 : Frontend/Javascript | Typescript

브라켓[]을 활용한 동적 라우팅

예옹이 2024. 9. 6. 19:47

정적 라우팅과 동적 라우팅

  • 정적 라우팅: 경로가 고정되어 있어서 딱 정해진 URL만 처리합니다.
    예 ) /api/one/two/three
  • 동적 라우팅: 경로 일부가 변수로 동작합니다.
    예 ) /api/one/two/three/${id}
         → /api/one/two/three/84
         → /api/one/two/three/123

 

🌟 동적 라우팅을 처리하기 위해 파일 및 폴더 이름에 브라켓([])을 사용할 수 있습니다.

 

파일 네이밍에서 브라켓([])의 역할

  • 브라켓을 사용한 파일명은 동적 라우팅을 처리하는 핵심
    • 예 ) three/[id].ts
    • 여기서 [id]는 동적 값, 즉 변수로 인식
  • 변수 이름이 반드시 id일 필요는 없습니다.
    • [userId], [teamId]처럼 파일명에 원하는 변수명을 사용할 수 있습니다.
  •  

예시 비교

파일 구조 사용되는 API 경로

파일 구조 사용되는 API 경로
api/one/two/three /api/one/two/three?id=${id}
api/one/two/three/[id] /api/one/two/three/${id}

 

 


 

쿼리 파라미터

  • 쿼리 파라미터는 url 경로 끝에 ?로 시작해서 ? 뒤에 key=value 형식으로 데이터를 전달합니다.
  • 예 ) /api/one/two/three?id=${id}

id=123은 파라미터로 전달되는 것이고, 라우팅 경로는 그대로 고정됩니다.

즉 라우팅 자체가 변하는 것이 아니라 추가적인 데이터를 넘기는 것입니다.

 

동적 라우팅과의 차이

  • 동적 라우팅은 경로의 일부가 변수로 변경되는 형태입니다.
  • 예 ) /api/one/two/three/${id}

여기서 id는 경로의 일부이므로, 경로 자체가 three/123, three/456 등으로 변하게 됩니다.

경로 자체가 동적으로 변하므로( 예. id=123, user_id=65 ) 경로 자체가 데이터를 포함하는 것입니다.

 

정적 라우팅 + 쿼리 파라미터 vs 동적 라우팅

정적 라우팅 + 쿼리 파라미터: 경로는 고정된 상태로, 데이터는 URL 끝의 파라미터로 전달합니다.

  • /api/one/two/three?id=123
  • 경로는 고정되어 있고, 파라미터로 추가 데이터를 넘겨서 서버가 처리.

동적 라우팅: 경로 자체가 동적으로 변해서, 경로 일부가 변수로 변경.

  • /api/one/two/three/123
  • 경로가 동적으로 변하면서, 경로에 직접 데이터를 포함.

 

정적 라우팅쿼리 파라미터는 서로 다른 개념입니다.

정적 라우팅에 쿼리 파라미터를 사용해도 그 자체는 동적 라우팅과 동일한게 아닙니다.

쿼리 파라미터는 데이터를 URL의 끝에 붙여 전달하는 방법이고, 동적 라우팅은 경로 자체가 변수를 포함해 유연하게 동작하는 방식입니다.

따라서 쿼리 파라미터는 정적 라우팅의 확장 개념일 수 있지만, 동적 라우팅과는 구분됨을 기억하시면 됩니다!