[TIL] Day 36 encodeURI(), encodeURIComponent() 함수 활용법 및 차이점

2023.11.23 목

 

현재 파이어베이스를 다루는 프로젝트에서 음악 커뮤니티를 만들고 있다.

카테고리 별로 주소값을 부여하는데 'R&B'라는 카테고리가 존재한다.

이 값이 주소에 들어가게 되면 쿼리스트링에서 문법적 요소인 '&'이 충돌하여 원하는 값이 추출되지 않는 문제가 있었다.

쿼리스트링을 통해서 주소값에 부여된 값을 가져올 때 원하는 값을 잘 가져올 수 있는 방법을 알아보자!

 

Query String  (쿼리스트링)

URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법이다.

웹개발에서 데이터를 요청하는 방식 중 주로 GET방식으로 데이터를 요청할 때 쓰이는 방법.

 

 

 

encodeURI() vs encodeURIComponent()

encodeURI()와 encodeURIComponent()은 둘 다 웹 개발에서 URL을 처리할 때 사용되는 JavaScript의 인코딩 함수이다.

이 두 함수는 URL에서 특수 문자를 처리하여 안전하게 전송하도록 도와준다.

그러나 두 함수 간에는 몇 가지 중요한 차이가 존재한다.

encodeURI()

1. 전체 URL에 사용 가능

• encodeURI() 함수는 전체 URL을 인코딩하는 데 사용된다.
• 주로 URI의 일부분(예: 쿼리 문자열)을 인코딩하지 않고, 전체 URI를 안전하게 인코딩하는 데 유용하다.
• 완전한 URL을 보존하면서 필요한 부분만 안전하게 인코딩할 수 있다.

2. 예약 문자 제외

• 알파벳 문자, 대시('-'), 언더스코어('_'), 마침표('.'), 물음표('?'), 대화형 기호('&') 등 일부 예약 문자를 제외하고 모든 문자를 그대로 둔다.

3. UTF-8 인코딩

• UTF-8로 인코딩되지 않은 문자열을 UTF-8로 변환하여 URI에 사용할 수 있도록 한다.

const originalURL = "https://example.com/page?name=John Doe";
const encodedURL = encodeURI(originalURL);
// 결과: https://example.com/page?name=John%20Doe

 

encodeURIComponent()

1. 문자열의 일부분에 사용

• encodeURIComponent() 함수는 주어진 문자열의 일부분(주로 쿼리 문자열의 값)을 안전하게 인코딩하는 데 사용된다.

2. 예약 문자 포함

• 알파벳 문자, 숫자를 포함하여 대부분의 예약 문자를 인코딩한다.
• URL에서 허용되지 않는 문자를 안전하게 전달할 때 유용하다

3. UTF-8 인코딩

• encodeURIComponent()는 모든 문자를 UTF-8로 인코딩하여 안전한 URL을 생성한다.
• 주로 쿼리 매개변수 값을 인코딩할 때 사용하며, 예를 들면 검색어나 사용자 입력과 같은 값이 URL 안에서 안전하게 전송될 수 있다.

const originalValue = "John Doe";
const encodedValue = encodeURIComponent(originalValue);
// 결과: John%20Doe

const originalString = 'Hello, World!';

const encodedURI = encodeURI(originalString);
const encodedURIComponent = encodeURIComponent(originalString);

// Encoded URI: Hello,%20World!
// Encoded URI Component: Hello%2C%20World%21

어떤 것을 사용해야 할까?

encodeURI() : 전체 URL을 인코딩할 때. 주소창에 최대한 있는 그대로 보이고 싶을 때

encodeURIComponent() : 쿼리 문자열 값 등을 인코딩할 때. 추출값을 최대한 안전하게 전달하고 싶을 때

 

이러한 함수들을 사용할 때, 

decodeURI() 및 decodeURIComponent() 함수를 사용하여 디코딩할 수 있다.

이렇게 함으로써 안전하게 전송된 URL을 다시 읽을 수 있다.

 

 

---

하루를 마치며

페이지를 이동하며 정보를 전달할 수 있는 쿼리스트링을 배우게 되었고, 그 데이터를 가져가는 방법에도 여러 가지가 있으며 각 차이점을 이해할 수 있었다.

원하는 목적을 정확하게 이룰 수 있는 코드를 구성할 수 있도록 비슷한 함수들 속 차이점을 알고 있는 것이 큰 도움이 되는 것 같다.

 

 

오늘의 한 줄
작은 차이점도 자세히 살펴보자!
작아 보이기만 한 차이점이 크게 다가올 수도 있다.