현재 보또보의 검색 기능은 검색어를 입력해 추천 검색어를 클릭할 수도 있고, 엔터를 눌러서 해당 검색어를 검색할 수 있다. 요청을 보낼 때 검색어 그대로를 서버에 보내고 있다. 오늘 실수로 ]를 입력했는데, 에러가 발생했다. CORS가 뜨면서 에러가 발생했는데, 처음에는 서버 문제인줄 알았다. 하지만 서버 문제가 아니라 URI 문제라는 것을 알게 되어서 글을 작성하려고 한다.
URI에서는 예약 문자나 주의해서 사용해야 하는 문자들이 있다. 영어로는 reserve characters와 unsafe characters이다.
예약 문자는 ;, /, ?, :, @, =, &가 있다. 이들은 특정 조건에서만 사용되는 예약 문자이다. 이러한 문자를 사용한다고 해서 문제가 될 것은 없지만, 예약 문자이기 때문에 따로 사용하기 위해서는 인코딩을 하는 것이 좋아보인다.
안전하지 않은 문자는 {, }, |, \, ^, ~, [, ], `가 있다. 각각의 다양한 이유로 URI에서 사용하면 안되고, 반드시 인코딩을 해서 사용해야 한다. 자세한 내용은 출처를 확인해보자.
이들을 인코딩하지 않고 사용하면 적절하지 않은 URI 즉, URI를 판단하지 못하게 되고 그래서 이상한 주소로 요청을 보내고 있으니 CORS가 뜨는 것이었다. 서버 문제가 아니라 프론트에서 인코딩을 해야하는 상황이었다.
encodeURIComponent로 인코딩을 해서 요청을 보내기만 하면 됐다. 하지만 뭔가 꺼림직했다. 키워드, 태그, 유저 등 모든 곳에 인코딩을 해야 했고, 분명 다른 방법이 있을 것 같다는 생각에 조금 더 찾아봤다.
URLSearchParams를 발견했다. 이 api는 append 메서드를 통해 name과 value를 할당하면 value를 자동으로 url 형식에 맞춰 인코딩해준다. 그리고 get 메서드를 통해 가져올 땐 디코딩을 해준다.
해당 api를 가지고 안전하지 않은 문자와 예약 문자를 모두 인코딩할 수 있도록 구현했다. 위의 문자들로 검색할 일은 많지 않겠지만 만약의 사태에 대비했다.
서버에도 인코딩 된 문자를 보내고 있는데, 데이터를 잘 받아온다. 서버에서 설정을 해준건지, 자동으로 디코딩을 해주는건지 내일 물어봐야겠다.
이제 이런 문자들도 모두 검색할 수 있다.
