URL 인코딩
만약 URL에 한글 데이터를 보내게 되면 다음과 같이 쿼리 스트링에
만약 URL에 한글 데이터를 보내게 되면 다음과 같이 URL 쿼리 스트링에 한글 값 그대로 전송 되는거 같이 보인다.
하지만 위의 주소창을 복사해서 그대로 메모장에 붙여넣기를 하게 되면
http://localhost/ch2/registerInfo.jsp?id=%EC%95%88%EB%85%95&pwd=%ED%95%98%EC%84%B8%EC%9A%94&name=%EB%B0%98%EA%B0%91&email=%EC%8A%B5%EB%8B%88%EB%8B%A4&birth=%E3%85%8E%E3%85%8E%E3%85%8E
와 같이 바뀌게 된다.
이렇게 한글 데이터를 URL로 전송할 때는 브라우저에 의해 URL인코딩 과정을 거치게 된다
URL인코딩: non 아스키 값들을 아스키 코드로 변경(변환규칙 : UTF-8)
왜 인코딩 과정을 거치는가
URL 요청을 하면 서버 입장에서는 요청한 서버가 어떤 OS를 쓰고 어떤 인코딩 방식을 쓰는지 모르니까 URL의 모든 글자를 아스키 값을 통일한 것이다
자바스크립트에서 URL인코딩
자바스크립트에서 파라미터를 포함해 데이터를 전송할 때 인코딩을 해서 전송해야 한다
(자바스크립트에서 URL 인코딩 과정이 필요하지 않은 경우도 있습니다. 브라우저가 자동으로 URL을 인코딩해주기 때문입니다. 하지만 직접적으로 쿼리 파라미터를 생성하고 이를 URL에 추가하는 경우에는 인코딩을 수행하는 것이 좋습니다. 이는 주로 자바스크립트에서 프로그램적으로 URL을 생성하는 경우에 해당합니다.)
이 경우엔 다음과 같이 코드를 작성해서 해결한다
const baseUrl = "https://www.example.com";
const params = {
"key1": "val1",
"한글키": "한글값"
};
const queryString = Object.keys(params)
.map(key => `${key}=${params[key]}`)
.join('&');
const url = `${baseUrl}?${queryString}`;
console.log(url); // 브라우저에서 자동으로 인코딩된 URL 출력
URL 디코딩
이렇게 인코딩 과정을 거친 데이터를 서버에서 받을 때는 디코딩 과정을 거쳐야 한다. 그래서 코드 부분에 request.setCharacterEncoding("UTF-8")과 같은 문구를 작성해줘야 한다. 하지만 매번 작성이 번거로우니 web.xml파일에 한글 변환 필터를 넣어준다
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>원리는 다음과 같다
