자바스크립트 URL Encode에 대하여 정리해드려요.
ft. JavaScript encodeURI, encodeURIComponent 정리
안녕하세요. 김탁구입니다.
오늘은 경제, 정책, 여행은 잠시 뒤로 한 채 새로운 주제에 대하여 포스팅을 해보려고 합니다. 저는 IT분야에서 웹 개발자로 일하고 있습니다.블로그를 처음 시작한 것은 네이버입니다. 지금으로부터 10년전 대학교 컴퓨터공학과를 다니면서 강의시간에 배웠던 소스 코드를 블로그에 조금씩 올리거나 여행 사진을 주로 올렸었는데요. 졸업 후에는 일하느라 블로그를 거의 하지 못했습니다. 그리고 직장생활 7년만에 다시 네이버와 티스토리 블로그를 시작했는데요. 그 전부터 계속 하기로 마음은 먹었지만 쉽지 않았습니다.
블로그 이름이 일상을 기록하는 블로그입니다. 책을 보면서 배우는 내용도 있지만 사실 현업에서 일하다보면 책보다 더 많은 것들을 많이 알게되는데요. 개발 서적을 읽고 리뷰를 해볼까도 생각했지만 쉽지 않을 것 같더라구요. 그래서 소소하지만 현업에서 일하면서 배운 내용들로서 블로그를 운영해볼까 생각중입니다. 정말 현업에서는 책에서 가르쳐주지 않은 많은 것들 알게됩니다. 어떻게 보면 책보다 더 유익하다고 봐야죠. 개발서적을 읽는데 정말 저한테 필요한 내용은 그렇게 없는 것 같습니다. 하지만 현업에서 일을 하다보면 책에서 배우지 못한 많은것들을 알게 됩니다. 그리고 그런 내용으로 개발에 관하여 써보고자 합니다.
◆ URL 인코딩과 디코딩이란 무엇인가?
웹 개발을 하신 분이라면 HTTP를 아실 것에요. HTTP는 웹 프로토콜을 의미하는데요. 프로토콜은 우리말로 쉽게 표현하면 규약, 약속이라는 의미입니다. 즉 사용자와 웹서버간에 통신하기 위한 규칙을 의미하는데요. HTTP에는 여러가지 메서드가 있지만 GET과 POST가 대표적으로 많이 알고 있습니다. 오늘은 GET 방식으로 할 때 발생하는 현상에 대해 처리하는 방법을 알아보겠습니다.
◆ GET 방식
GET 방식은 URL 다음에 ?를 붙이고 변수와 값을 보내는 방식입니다. 정상적인 방식은 아래와 같습니다.
http://localhost:80?id=3
보통 게시판을 예로 들면 자신이 클릭한 게시물의 상세보기를 원할 때 아이디값을 넘기는데요. GET방식을 좀 더 복잡하게 사용하는 경우가 있습니다.
http://localhost:8080?id=3&gubun=man&woman
구분이라는 변수에는 man이라는 값을 넣었는데요. 중간에 &가 있습니다. 이럴 때 어떻게될까요? 실행해보신다면 웹브라우저는 오류를 발생시킬 것입니다.
그럴 때 해결 할 수 있는 함수가 encodeURI가 있습니다. 그리고 encodeURI를 통해 값을 변환 했다면 받는쪽으로는 해석도 해야 하는데 decodeURI가 있습니다.
그리고 앞서 말한 두 함수보다 좀 더 도움이 되는 함수로는 encodeURIComponent와 decodeURICompont가 있습니다.
◆ encodeURI와 decodeURI 사용방법
그럼 두 함수는 어떻게 쓰는지 알아보겠습니다. encodeURI는 인터넷 주소에서 사용되는 일부 특수문자는 변환하지 않는다고 해요. 대표적으로 http://, https:// 가 있습니다. 그 외에 .,@,#,&,?,= 를 변환하지 않는다고 합니다. 주로 한글을 보낼 때 사용한다고 보시면 됩니다.
[소스]
let url = "https://www.naver.com/a=hello&b=한글날에는무엇이";
console.log(encodeURI(url));
위 코드를 실행한다면 영문은 그대로 출력되지만 한글은 알수 없는 문자들과 함께 나오는 것을 볼 수 있습니다.
[결과]
https://www.naver.com/a=hello&b=%ED%95%9C%EA%B8%80%EB%82%A0%EC%97%90%EB%8A%94%EB%AC%B4%EC%97%87%EC%9D%B4
인코딩 되어 글자가 나온다면 저 값을 제대로 확인해야겠죠? 그때 사용하는 함수가 decodeURI 함수입니다. 어떻게 쓰는지 한번 살펴보겠습니다.
[소스]
let dURL = "https://www.naver.com/a=hello&b=%ED%95%9C%EA%B8%80%EB%82%A0%EC%97%90%EB%8A%94%EB%AC%B4%EC%97%87%EC%9D%B4";
console.log(decodeURI(dURL));
실행을 한다면 b 변수의 값이 그대로 노출 되는 것을 볼 수 있습니다.
[결과]
https://www.naver.com/a=hello&b=한글날에는무엇이
그럼 이번에는 아래 내용을 실행해보도록 해보겠습니다.
[소스]
let returnURL = "https://www.naver.com?redirect=https://localhost/callback";
console.log(encodeURI(returnURL));
[결과]
https://www.naver.com?redirect=https://localhost/callback
그런데 결과를 실행를 해보면 결과는 인코딩 되어서 나오지 않습니다. 왜 그럴까요? 제가 처음에 말씀드린것처럼 encodeURI 는 일반적인 특수문자들은 변환하지 않는다고해요. 바로 위에 코드를 보면 https:// 도 나오고 도메인주소도 나오는데요. 그렇다면 이런 경우는 어떻게 할까요?
◆ encodeURIComponent 와 decodeURIComponent 사용방법
바로 앞서 살펴봤던 encodeURI / decodeURI 보다 더 넓은 범위에서 변환 할 수 있는 함수가 있는데요 encodeURIComponent와decodeURIComponent가 있습니다.
요즘은 인터넷 웹 사이트를 개발할 때 아이디와 패스워드를 입력한 받는 로그인 형태가 아닌 카카오톡 같은 소셜 로그인을 활용하는데요. 소셜로그인 개발문서를 보면 redirectURL을 넘깁니다. URL에는 당연히 여러가지 변수들과 특수문자들이 포함되어 있기 때문에 그대로 보내면 오류가 발생해요. 그때 활용 할 수 있습니다.
그럼 어떻게 사용하는지 살펴보겠습니다.
[encodeURICompoent]
[소스]
let returnURL = "https://www.naver.com?redirect=https://localhost/callback";
console.log(encodeURIComponent(returnURL));
[결과]
https%3A%2F%2Fwww.naver.com%3Fredirect%3Dhttps%3A%2F%2Flocalhost%2Fcallback
결과를 보시면 확실하게 https:// 부터 끝까지 인코딩이 된 것을 확인 할 수 있습니다.
[decodeURIComponent]
[소스]
let returnDecodeURL = "https%3A%2F%2Fwww.naver.com%3Fredirect%3Dhttps%3A%2F%2Flocalhost%2Fcallback";
console.log(decodeURIComponent(returnDecodeURL));
[결과]
https://www.naver.com?redirect=https://localhost/callback
인코딩 되어있는 값을 정상적으로 디코딩해서 보여주고 있습니다.
◆ 마치며
이상으로 자바스크립트에서 URL 인코딩과 디코딩을 알아보았습니다. 오늘 알아본 내용은 자바스크립트에 대해서 다루는 방법을 배웠지만요. 자바스크립트가 아니더라도 다른 언어에서도 인코딩과 디코딩 하는 함수들이 있으니 꼭 찾아보고 적용하시길 바랍니다.
보통 GET방식으로 넘길 때는 URL주소다음에 ?을 붙이고 변수=값 형태로 보내게 됩니다. 보내고자 하는 변수가 많을 경우는 &을 붙여서 변수1=값&변수2=값&변수3=값처럼 보내게 되는데요. 여기서 자주 발생하는 실수가 값에 공백이 들어가거나 &들어가버리는 경우가 있습니다. 이렇게 되면 받는 페이지에서 에러가 발생합니다. 하지만 url Encode에 대해 잘 모르는 사람들은 &를 다른 문자로 치환해서 하는 경우가 있는데요. 사실 그 방법도 틀렸다고도 볼 수는 없지만 표준을 찾아서 적용한다면 향후 유지보수를 하더라도 쉽게 할 수 있을 것입니다.
저는 개발을 비유할 때 건축물에 비유하는데요. 코드 한줄 한줄 짤 때 세심하고 작성하고 테스트하는 것이 중요하다고 생각해요. 마치 건물을 지을 때 대충대충 지으면 향후 부실공사로 무너질수도 있는데요. 소프트웨어도 잘모르고 무의식적으로 하다보면 나중에 큰 하자가 발생 할 수 있습니다. url Encode를 아셨다면 이와 관련해서 사용할 때가 많으니 꼭 기억해두시길 바랍니다.
포스팅을 읽어주셔서 감사합니다.
모두들 즐거운 하루 되세요.