URL 방식 비교 (URL 경로 기반 방식, 쿼리 파라미터 기반 방식)

포트폴리오를 만들면서 상세페이지 URL을 설정할 때, 프로젝트의 자세한 정보를 담은 상세페이지와 공부용 프로젝트의 간단한 정보를 담은 상세페이지를 효과적으로 관리하기 위해 두 가지 URL 방식에 대해 비교해보았습니다.

URL 경로 기반 방식 (path variable)

<Routes>
  <DetailPage path="/project/:id" />
  <DetailPage path="/studyProject/:id" />
</Routes>

/portfolio/pokeapp 또는 /studyProject/dashboard처럼 계층을 명확히 나눈 방식입니다.

장점

1. 구조가 명확함: 경로가 유형과 계층을 명확히 보여줘서 사용자와 개발자 모두 쉽게 이해할 수 있음
2. SEO 친화적: 검색 엔진에 더 유리하고, 사람이 읽기 쉬운 URL은 사용자 경험과 SEO에 긍정적 영향을 줌
3. 라우팅이 간결함: react-router의 중첩된 경로나 /portfolio/:id, /studyProject/:id 같은 패턴을 사용해 라우트를 쉽게 관리할 수 있음

단점

1. 유사한 라우트가 많아질 수 있음: 각기 다른 카테고리를 위해 별도의 라우트를 정의해야해서 코드 중복이 발생할 수 있음
2. 확장성이 부족할 수 있음: 필터링 같은 추가 파라미터가 필요한 경우에는 쿼리 파라미터를 추가하는 방식으로 확장시켜야 함

쿼리 파라미터 기반 방식 (query string)

<Routes>
  <DetailPage path="/:id" />
</Routes>

/pokeapp?type=project 또는 /dashboard?type=studyProject처럼 쿼리 파라미터를 사용하는 방식입니다.

장점

1. 유연한 라우팅: /:id와 같이 하나의 라우트만 사용하고 쿼리 파라미터를 사용하여 구분함으로 라우트 정의가 간단해짐
2. 확장성이 좋음: 필터나 정렬 등 더 많은 파라미터를 추가하기 쉬움
3. 정보 공유 용이: 쿼리 파라미터를 사용하면 동일한 정보에 대한 링크를 쉽게 공유할 수 있음
4. 백엔드와의 호환성: API 요청이나 백엔드 작업에서 쿼리 파라미터가 유용함, 필터링이나 정렬 옵션 등을 쉽게 전달할 수 있음

단점

1. 가독성이 떨어짐: 쿼리 파라미터가 많아지면 URL이 복잡해져서 사용자 또는 개발자 입장에서 직관적이지 않아 한눈에 정보를 파악하기 어려움

결론

깔끔하고 직관적인 URL과 SEO를 중요하게 생각한다면 경로 기반 방식이 적절하고, 확장성이나 다양한 카테고리 또는 필터링 옵션을 처리해야하는 경우에는 쿼리 파라미터 방식이 더 유연하고 관리하기 쉬움