언어 및 도구들 공부/Javascript

path 파라미터 vs 쿼리스트링 추가 2

Dr.Mlem 2024. 9. 8. 21:58
그럼 그냥 JS에서 axios로 통신할 때에는 쿼리 스트링보다 패스 파라미터로 쓰는게 맞는거야?
 

ChatGPT said:

ChatGPT

JavaScript에서 axios를 사용할 때, **쿼리 스트링(Query String)**과 **패스 파라미터(Path Parameter)**는 각각 다른 용도와 상황에 따라 적절하게 사용됩니다. 따라서, 특정 경우에 패스 파라미터가 맞고, 다른 경우에는 쿼리 스트링이 맞을 수 있습니다. 이를 RESTful API 설계 원칙에 따라 적절히 구분해서 사용해야 합니다.

언제 패스 파라미터를 사용해야 하는가?

패스 파라미터는 다음과 같은 경우에 사용합니다:

  1. 특정 리소스를 식별하고 조작할 때
    • 특정 ID를 가진 리소스를 조회, 수정, 삭제하는 경우입니다.
    • 예시:
      javascript
      Copy code
      // 특정 학생(ID 101)을 수정하는 PUT 요청 await axios.put(`http://localhost:3001/student/101`, { name: "John Doe", grade: "A" });
    • RESTful API 설계에서 패스 파라미터는 리소스를 명확히 식별할 때 사용합니다. 예를 들어, PUT /student/101은 ID가 101인 학생 리소스를 수정한다는 의미가 됩니다.
  2. 리소스의 계층 구조를 표현할 때
    • 부모-자식 관계와 같은 계층적 리소스를 나타낼 때 사용합니다.
    • 예시:
      javascript
      Copy code
      // 특정 학생(ID 101)의 성적을 조회하는 GET 요청 await axios.get(`http://localhost:3001/student/101/grades`);
    • student 리소스 아래의 하위 리소스인 grades를 나타내는 예입니다. 이 구조는 리소스의 계층 관계를 명확히 표현합니다.

언제 쿼리 스트링을 사용해야 하는가?

쿼리 스트링은 다음과 같은 경우에 사용합니다:

  1. 데이터의 필터링, 검색, 정렬, 페이지네이션 등 조건부 조회가 필요할 때
    • 특정 조건에 맞는 데이터를 조회하거나 검색할 때 사용합니다.
    • 예시:
      javascript
      Copy code
      // 나이가 20세 이상인 학생을 조회하는 GET 요청 await axios.get(`http://localhost:3001/students?age_gte=20`);
    • 쿼리 스트링은 필터링, 정렬, 조건부 검색 등을 나타낼 때 사용합니다.
  2. 특정 리소스에 대해 추가적인 옵션이나 설정을 전달할 때
    • 요청 시 특정 옵션을 서버에 전달하고 싶을 때 사용합니다.
    • 예시:
      javascript
      Copy code
      // 학생 목록을 정렬하고, 특정 페이지의 데이터를 가져오는 GET 요청 await axios.get(`http://localhost:3001/students?sort=asc&page=2&limit=10`);
    • 이 예에서는 학생 목록을 정렬하고 페이지네이션을 위해 쿼리 스트링을 사용합니다.

결론

쿼리 스트링패스 파라미터는 서로 다른 용도로 사용되므로, 언제나 하나가 다른 것보다 더 "맞다"고 할 수는 없습니다.

  • 패스 파라미터: 특정 리소스를 식별하고 조작해야 할 때 사용합니다. 리소스를 명확히 식별하기 위해 경로의 일부로 포함되며, 주로 GET, PUT, DELETE 요청에서 사용됩니다.
  • 쿼리 스트링: 조건부로 데이터를 필터링하거나, 검색, 정렬, 페이지네이션 등 여러 옵션을 조합할 때 사용합니다. 주로 GET 요청에서 사용되며, 요청이 서버 데이터를 변경하지 않을 때 적합합니다.

따라서, RESTful API 설계 원칙에 맞추어 적절한 상황에서 적절한 방식을 사용하는 것이 중요합니다. axios로 통신할 때도 이 원칙을 따르는 것이 좋습니다.