3개 모두 인코딩 관련 함수 입니다. 

인코딩은 네트워크에서 서로 정보를 주고 받기위해 ASCII 코드값으로 변경하는 행위를 말합니다. 

영어외에 2바이트를 쓰는 언어들이 있습니다. 

이런 언어들을 네트워크 상에서 전송하기 위해서는 인코딩함수를 이용해서 변환해야 합니다.

 

 

1. escape(), unescape() 함수

 

▼ 아스키문자에 해당하지 않는 문자들은 모두 유니코드 형식으로 변환해 줍니다.

그리니까 16진수 형태로 바꿔주는 것이죠. 표기법은 1바트일때 %XX 이며 2바이트 일때는 %uXXXX 입니다.

앞에 u 가 하나 더 붙죠. 그리고 16진수에서는 문자 2개가 하나의 바이트를 이룹니다.

아래 그림에서 처럼 영어 알파벳에 해당하는 부분만 빼고 16진수로 모두 바뀌었죠.

 

document.write("[escape 인코딩한 결과]<br/>");

document.write(escape("인코딩, escape"));

 

[escape 인코딩한 결과]

%uC778%uCF54%uB529%2C%20escape

 

▼ 인코딩한 문자열을 다시 원래대로 돌리고 싶다면 디코딩을 해야 겠죠. 디코딩 함수는 unescape 입니다.

인코딩 함수앞에 un 이 붙어 있습니다.

 

document.write("[escape 인코딩한 결과]<br/>");

document.write(escape("인코딩, escape ") + "<br/>");

document.write(unescape(escape("인코딩, escape")));

 

[escape 인코딩한 결과]

%uC778%uCF54%uB529%2C%20escape%20

인코딩, escape

 

 

2. encodeURI() 함수

 

▼ encodeURI 는 URL 주소표시를 나타내는 앞자리 특수문자는 인코딩하지 않습니다.

인코딩 하지 않는 문자는 “: ; / = ? &” 입니다. 주소를 통해 넘기는 파라미터를 인코딩할때 사용합니다.

 

document.write("URI 인코딩<br/>");

document.write(escape("http://녹두장군.com")+ "<br/>");

document.write(encodeURI("http://녹두장군.com"));

 

URI 인코딩

http%3A//%uB179%uB450%uC7A5%uAD70.com

http://%EB%85%B9%EB%91%90%EC%9E%A5%EA%B5%B0.com

 

 

3. encodeURLComponent() 함수

 

▼ encodeURI 와 달리 주소를 나타내는 특수문자도 인코딩을 하게 됩니다.

모든 문자를 인코딩 하기 때문에 경로를 나타내는 /file/exe/index 값이 있다면 “/” 도 인코딩하기 하게 됩니다.

이렇게 되면 서버에서는 인식을 못합니다.

이럴때는 encodeURI 를 사용해야 합니다.

다시 디코딩을 하시려면 decodeURIComponent() 함수를 사용합니다.

 

document.write("URI, URLComponent 인코딩<br/>");

document.write(encodeURI("http://mainia.tistory.com?id=홍길동&phone=010") + "<br/>");

document.write(encodeURIComponent("http://mainia.tistory.com?id=홍길동&phone=010"));

 

URI, URLComponent 인코딩

http://mainia.tistory.com?id=%ED%99%8D%EA%B8%B8%EB%8F%99&phone=010

http%3A%2F%2Fmainia.tistory.com%3Fid%3D%ED%99%8D%EA%B8%B8%EB%8F%99%26phone%3D010

번호 제목 글쓴이 날짜 조회 수
246 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 3419
245 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 3987
244 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 3842
243 [ChatGPT] json data 의 정렬 [1] 황제낙엽 2024.07.23 3352
242 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 3669
241 fetch() 사용 예제들 황제낙엽 2024.07.09 3380
240 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 3758
239 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 3805
238 [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 황제낙엽 2024.06.02 3270
237 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 3615
236 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 3361
235 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 3605
234 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 4209
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 3660
232 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 3715
231 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 3672
230 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 3703
229 navigator.mediaDevices 황제낙엽 2023.08.21 3798
228 Barcode Detection API 황제낙엽 2023.08.06 3854
227 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 2894