실무를 진행하면 아무래도 백 엔드 개발자들과 소통을 많이 진행하게 됩니다.
API 관련된 내용으로 커뮤니케이션이 주를 이룹니다.
GET 메소드를 통해서 서버통신을 하여 필요한 데이터를 불러오는 fetching 작업중 궁금한 점이 생겼습니다.
Query String과 Pathvariable의 차이점은 무엇일까
각각 어떤 상황에 사용해야 적재적소 사용했다고 볼 수 있을까..
오늘의 주제입니다.
Query String
데이터를 전달하는 방법중 하나로 url의 뒷부분에 미리 협의된 파라미터들을 통해 넘기는 형식의 작업입니다.
예시를 들어보면
http://x.xx.xx.xxx:xxxx/api/v1/test?key=value&key2=value2 [GET]이러한 형식으로 작성된 api들로 예를 들 수 있습니다.
key와 value의 포맷으로 데이터를 프론트 단에서 전달하게 되면 이를 백 단에서는 판단하고 적합한 데이터를 응답하게 됩니다.
필요에 따라서 해당 포맷은 & 구분자를 통해 더 많이 요청할 수 있다고 합니다.(이는 브라우저마다 최대 길이가 다릅니다. 하지만 개발할 때, 부족했던 적은 없었던 것 같네요.)
추가로 프론트 작업을 진행하다보면 페이지네이션이나 페이지 내의 조건을 기억해야하는 경우(필터값) 페이지 이동시 위와 같이 Query String에 접근하여 입맛에 맞춰 조작이 가능합니다.
Pathvariable
마찬가지로 데이터를 전달하는 방법중 하나로 특정 리소스의 키나 아이디값(pk)을 파라미터를 통해 넘기는 형식의 작업입니다.
예시를 들어보면
http://x.xx.xx.xxx:xxxx/api/v1/test/123 [GET]Query String이랑 비슷하지만 조금은 다르게 생겼습니다.
호스트 마지막 123이 프론트 단에서 접근하고자 하는 리소스의 pk값이라고 생각하면 됩니다.
백 단에서는 123의 pk를 가진 특정 리소스를 응답해주면 되구요.
추가로 프론트 작업을 진행하다보면 동적 라우팅으로 페이지를 구분해야 하는 경우에도 저런식으로 표현하게 됩니다.
(ex. React에서 "Route/:id")
결론
Query String과 Pathvariable은 유사한 방식이지만 다릅니다.
사용하는 경우는 다음으로 예시를 들어보려 합니다.
Query String
1. 필터링 된 조건으로 리소스에 접근해야할 때
2. 1:1 매핑이 안되는 모든 값
3. 가변적으로 변하는 리소스(검색 keyword, filter...)
Pathvariable
1. 특정 인덱스나 고유값으로 리소스에 접근해야할 때
2. 하나의 값으로 모든 리소스의 정보를 표현할 수 있는 값(pk)
