[iOS] Query String 이란?

[AppJam 회고 - 01] Query String

오늘은 통신 방식에 있어서 새로운 지평(?)을 열어주었던 ‘Query String’에 대한 회고를 포스팅해 보겠습니다.

충범이와 배틀했던 기억이 새록새록😭 ….

제가 맡은 뷰에서는 서버에서 주어진 조건에 맞는 데이터를 불러올 일이 있었습니다. 예를 들어 제품의 최상위 2개의 제품만을 찾아 온다거나, 필터, 키워드에 따라 다른 검색 결과를 불러오는 상황이였다.

Alamofire 비동기 통신을 진행할 때 일반적으로 post 메소드는 서버에 데이터를 추가, 변경, 입력할 때 사용하고 이를 위한 데이터를 body에 담아 JSON 타입 인코딩을 통해 통신을 합니다.

let header : HTTPHeaders = [
            “Content-Type” : “application/json”,
            “token” : “\(token.string(forKey: “token”)!)”
        ]
let body : Parameters = [
            "user_name": name,
            "user_gender": gender,
            "user_birth": birth
        ]

Alamofire.request(URL,
                    method: .post,
                    parameters: body,
                    encoding: JSONEncoding.default,
                    headers: header)
                    .responseData { response in
    …
}

그리고 get 메소드는 단순히 필요한 정보를 얻어오기 때문에 body가 필요없이 API 문서에 따른 URL상으로 데이터를 받아 올 수 있다.

let header : HTTPHeaders = [
            “Content-Type” : “application/json”,
            “token” : “\(token.string(forKey: “token”)!)”
        ]

Alamofire.request(URL,
                    method: .get,
                    parameters: nil,
                    encoding: JSONEncoding.default,
                    headers: header)
                    .responseData { response in
    …
}

그러나 클라이언트의 기능이 점점 추가될 수록 데이터의 가공이 필요하고 모든 데이터를 받아와서 클라이언트 단에서 처리하는 것은 속도가 매우 느려질 수 있다. 또한 서버측에서 이런 조건에 따라 모든 API를 작성하는 것은 매우 반복적이고 불필요한 작업이 될 것이다.

이러한 문제점들을 해결해 주는 것이 바로 ‘Query String’이다.

Query String 이란, 사용자가 입력 데이터를 전달하는 방법 중의 하나로서 URL 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.

여기서 사용자 입력이란 사용자가 검색한 키워드가 될 수도 있고 임의로 설정한 필터 조건이 될 수도 있다 그 외에도 클라이언트에서 데이터의 일부분만을 보여주고 싶을 때 표현할 수도 있다. Query String의 형식은 예를들어 다음과 같이 나타낼 수 있다.

URL + “?query=keyword&filter=product”

URL 과 조건문 사이의 ‘?’ 구분자를 두고 필요한 파라미터 값을 적는다. 그리고 파라미터가 여러개일 경우 ‘&’ 를 붙여 여러개의 파라미터를 넘길 수 있다.

이러한 Query String을 Alamofire통신 라이브러리에서 사용하는 방법을 알아보자.

내가 작업했던 상황을 위주로 설명하자면, 먼저 서버 파트를 맡았던 친구들과 협의하여 제품 검색을 위한 API URL을 설정하였다. 그 후 사용자가 검색창에 임력한 키워드를 인자로 받는 함수를 작성하였다.

func searchProduct(keyword: String, completion: @escaping (NetworkResult<Any>) -> Void)

그 후 Parameters 타입의 변수를 선언하여 사용자 검색 키워드와 필터 값을 value로 하는 변수를 정의 하였다.

let parameters: Parameters = [
            "query": keyword,
            "filter" : "product",
        ]

마지막으로 Alamofire의 request 함수를 호출하는데, 함수의 인자로 검색 API를 위한 URL, method 타입(get), 미리 선언해 둔 파라미터 변수, 마지막으로 중요한 인코딩 타입을 URLEncoding.queryString 으로 설정한다.

 Alamofire.request(APIConstants.SearchBaseURL,
                    method: .get,
                    parameters: parameters,
                    encoding: URLEncoding.queryString)
                    .responseData { response in
    …
}

다음과 같은 방식으로 함수를 호출하면 데이터 정보를 불러오는 URL이 자동으로
URL + “?query=keyword&filter=product”
식으로 변환되기 때문에 필요한 정보를 얻을 수 있다.

. . . . . .

당시에 QueryString을 잘 모르고 있었기에 엄청난 삽질을 했다. 기존에 알고 있었던 초기 받아온 제품의 idx로 다른 API를 호출할 때 처럼 URL에 직접 추가하는 방식으로 해결하려 하였지만 잘 안되서 머리를 부여잡고 있었다.

옆에는 똑같은 뷰를 안드로이드로 구현하고 있던 친구가 있었는데 경쟁이 붙어 ‘누가 먼저 완성하느냐!’ 싸우고 있었다. 여기 저기 도움을 구하던 차에 서버 파트 친구들이 이야기 하던 ‘Query String’ 단어를 듣고 다급한 구글링을 통해 승리할 수 있었다.

AppJam 동안 정말 즐겁고 좋은 추억이 많았지만 경쟁을 떠나 아주 즐거운 개발을 할 수 있었던 순간이 아닐 까 싶다. 앞으로 QueryString은 절대 안잊어먹을듯 ㅎㅎ

#iOS/AppJam_회고

[참고자료]https://blog.outsider.ne.kr/312 - post / get 메소드의 차이점
https://velog.io/@kykevin/aaa - Query String