[Javascript/React] URL Params를 통해 데이터가 원하는데로 전달되지 않을때? ( URL Encoding )

개요

웹 프론트엔드 개발자 설탕시럽입니다. 이번에는 URL Encoding에 대해 알아보려고 합니다.

 

TLDR

React를 통해 개발하다 보면, 전역 상태를 통해 데이터를 전달하기도, Component의 Props를 통하는 방법 등등 여러 방법으로 데이터를 전달하지만, URL의 params를 통해 데이터를 전달하곤 합니다. 이번 프로젝트 개발에서도 특정 데이터에 대한 "메모"와 "메모 수정 페이지"로 이동하기 위해 메모 데이터를 URL params를 통해 넘기고자 시도했습니다.

api를 통해 받아온 responseData에서 바로 URL로 데이터를 전달하기 위해 아래와 같은 코드를 작성했습니다.

navigate(`/place/${id}/edit?memo=${responseData.memo)}`);

 

결과는,, 원하는 데로 data가 전달되지 않았습니다. 개행문자라던가 공백이 데이터에 담겨있을 때, 원하는데로 메모 데이터가 전달되지 않았고, 메모 데이터가 변형되어서 수정 페이지로 전달되었습니다. 
관련하여 검색하다 보니 "URL Encoding" 에 대해 알게 되었습니다.

 

URL Encoding ( Percent-encoding )

URL Encoding은 웹에서 데이터를 안전하게 전송하기 위해 URL에 포함된 특정 문자를 변환하는 과정입니다. URL에서 특정 문자는 예약어로 사용되거나 의미가 있기 때문에 규칙을 따라야 합니다. ㅇ{를 들어 "&", "?", "="와 같은 기호는 파라미터를 구분 짓는 데 사용되기 때문에, URL 구조가 깨질 수 있어 사용할 수 없습니다. 따라서, 영문자와 숫자 및 몇몇 특수 문자 외의 문자는 전송 과정에서 문제를 일으킬 수 있어요. 이를 해결하기 위해 URL Encoding이 필요합니다. 그리고 그 외 공백, 한글, 특수문자 등을 URL에 담기 위해 '%'와 16진수 숫자의 조합으로 표현하게 됩니다.

예를 들어, "안녕하세요"라는 한글을 URL에 포함시키고 싶다면, URL Encoding을 통해 %EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94로 변환됩니다.
이렇게 변환된 문자열은 웹 브라우저가 안전하게 이해하고 처리할 수 있습니다.

 

URL Encoding 의 원리

URL Encoding의 원리는 간단합니다. URL에서 사용할 수 없는 문자들은 해당 문자에 대한 이스케이프 시퀀스로 변환됩니다. 예를 들어, 공백은 %20으로 인코딩 되며, 특수문자 '&'는 %26으로 변환됩니다. 이 과정을 통해 웹 브라우저는 원래의 문자를 정확히 복원할 수 있습니다.
인코딩 과정은 각 문자에 대해 그 ASCII 값을 가져오고, 이를 16진수로 변환한 후, '%' 기호를 붙입니다. 이를 통해 데이터의 안전성을 확보하고, 통신 과정에서 발생할 수 있는 오류를 줄입니다.

 

JavaScript에서의 URL Encoding 함수들

JavaScript에서는 URL Encoding을 간편하게 처리하기 위해 다음과 같은 함수들을 제공합니다.

• encodeURI(): 전체 URI를 인코딩합니다. 여기서 예약어는 변환하지 않습니다.
• encodeURIComponent(): URI의 구성요소를 인코딩합니다. 모든 문자를 변환합니다.