POST 입력 (텍스트박스, 콤보박스, 체크박스, 라디오버튼) / 필터를 이용한 한글 인코딩

* admin을 위한 컨트롤러 추가

 

사용자의 입력을 처리하기 위해 새로운 컨트롤러를 추가한다.

 

 

NoticeController.java (com.newlecture.web.controller.admin.board)

@Controller("adminNoticeController")
@RequestMapping("/admin/board/notice/")
public class NoticeController {

	@RequestMapping("list")
	public String list() {
		
		return "";
	}
	
	@RequestMapping("reg")
	@ResponseBody //입력값을 사용자에게 다시 보여주기만 하기 위해서 사용
	public String reg() {
		
		return "reg";
	}
	
	@RequestMapping("edit")
	public String edit() {
		
		return "";
	}
	
	@RequestMapping("del")
	public String del() {
		
		return "";
	}
}

 

 

@Controller 어노테이션에 이름을 지정한 이유는, 다른 패키지에 같은 이름의 NoticeController가 존재하기 때문이다. 빈을 생성할 때 이름이 겹쳐서 에러가 발생한다.

 

사용자의 값을 입력 받을 reg 메소드를 생성하고 "http://localhost:8080/admin/board/notice/reg" url 요청을 하면 화면에 reg가 뜬다. @ResponseBody 어노테이션을 통해 요청한 값을 그대로 화면에 출력하였다.

 

 

 

* POST 입력 방법 - 텍스트 박스

 

사용자의 요청을 받아올 수 있는 글쓰기 화면을 실행해 보자.

 

 

 

html, css, image, js 등 정적 파일을 static 폴더에 몰아서 넣어놓았다. 실행할 때는 

 

localhost:8080/static/admin/board/notice/reg.html이 아닌

localhost:8080/admin/board/notice/reg.html으로 요청해야 한다.

 

그 이유는 매핑 방식에서 찾아볼 수 있다.

 

 

servlet-context.xml

    <mvc:resources location="/static/" mapping="/**"></mvc:resources>

 

"/**"으로 요청이 왔을 때(mapping) "/static/" 경로에서 찾아보게 처리하였다(location). (정적 파일 매핑 포스팅 참고)

 

 

 

"localhost:8080/static/admin/board/notice/reg.html" 요청을 하면 화면에 reg가 출력되는데, NoticeContoller에서 "/reg"라는 url로 매핑을 했기 때문이다.

 

 

NoticeController.java

	@RequestMapping("reg")
	@ResponseBody
	public String reg() {
		return String.format("title:%s, content:%s<br>", title, content);
	}

 

 

reg.html 파일의 이름을 reg1.html으로 수정한 후 다시 실행한다.

 

 

reg1.html 페이지 실행

 

 

reg1.html

<form action="reg" method="post">
	<div class="margin-top first">
		<h3 class="hidden">공지사항 입력</h3>
		<table class="table">
			<tbody>
				<tr>
					<th>제목</th>
					<td class="text-align-left text-indent text-strong text-orange" colspan="3">
						<input type="text" name="title" />
					</td>
				</tr>
				<tr>
					<th>첨부파일</th>
					<td colspan="3" class="text-align-left text-indent"><input type="file" name="file" /> </td>
				</tr>
				<tr class="content">
					<td colspan="4"><textarea class="content" name="content"></textarea></td>
				</tr>
				<tr>
					<td colspan="4" class="text-align-right"><input class="vertical-align" type="checkbox" id="open" name="open" value="true">
						<label for="open" class="margin-left">바로공개</label> 
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="margin-top text-align-center">
		<input class="btn-text btn-default" type="submit" value="등록" />
		<a class="btn-text btn-cancel" href="list.html">취소</a>
	</div>
</form>

 

 

form 태그의 action 경로는 "reg"으로 설정되어 있다. 제목과 내용 input에 텍스트를 입력하고 submit 버튼(등록)을 클릭하면 컨트롤러에서 받아 값을 화면에 출력한다.

 

 

form 태그는 action="reg"으로 설정되어 있는데, submit 클릭 시 admin/board/notice/reg1.html와 같은 위치에서 시작해서 admin/board/notice/reg으로 경로를 받게 된다. <form action="/admin/board/notice/reg"...>으로 설정하는 것과 같다.

 

(만약 action="admin/board/notice/reg" 이라면 http://localhost:8080/admin/board/notice/admin/board/notice/이 됨)

 

 

 

* POST 입력 방법 - 콤보 박스

 

 

reg1.html

<form action="reg" method="post">
	<div class="margin-top first">
		<h3 class="hidden">공지사항 입력</h3>
		<table class="table">
			<tbody>
				<tr>
					<th>제목</th>
					<td class="text-align-left text-indent text-strong text-orange" colspan="3">
						<input type="text" name="title" />
					</td>
				</tr>
				<tr>
					<th>카테고리</th>
					<td class="text-align-left text-indent text-strong text-orange" colspan="3">
						<select name="category">
							<option value="1">카테고리1</option>
							<option value="2">카테고리2</option>
							<option value="3">카테고리3</option>
							<option value="4">카테고리4</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>첨부파일</th>
					<td colspan="3" class="text-align-left text-indent"><input type="file" name="file" /> </td>
				</tr>
				<tr class="content">
					<td colspan="4"><textarea class="content" name="content"></textarea></td>
				</tr>
				<tr>
					<td colspan="4" class="text-align-right"><input class="vertical-align" type="checkbox" id="open" name="open" value="true">
						<label for="open" class="margin-left">바로공개</label> 
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="margin-top text-align-center">
		<input class="btn-text btn-default" type="submit" value="등록" />
		<a class="btn-text btn-cancel" href="list.html">취소</a>
	</div>
</form>

 

 

제목 밑에 카테고리라는 select 태그를 추가한다.

 

 

※ 참고

옵션 태그에 value가 없다면?

 (ex. <option>카테고리1</option>)

 

해당 옵션을 선택하고 submit하면 화면에서 한글이 깨져서 출력된다. servlet-context.xml에서 메시지 컨버터 설정을 통해 @ResponseBody의 String 한글 인코딩 처리를 해주었기 때문에 출력할 때의 문제는 아니고 입력받을 때의 인코딩 문제이다. (@ResponseBody => 출력 값에 관한 설정)

 

    <mvc:annotation-driven>
    	<mvc:message-converters> 
    	<!-- 
    	@ResponseBody로 String 처리할 때 한글 처리
    	매핑된 url을 찾아간 후 값을 ResponseBody 타입으로 값을 리턴할 때, 반환하는 값이 한글이라면 가로채서 한글 설정.
    	출력할 때 한글이 깨지지 않게 함.
    	-->
    		<bean class="org.springframework.http.converter.StringHttpMessageConverter">
    			<property name="supportedMediaTypes">
    				<list>
    					<value>text/html;charset=UTF-8</value>
    				</list>
    			</property>
    		</bean>
    	</mvc:message-converters>
    </mvc:annotation-driven> 

 

 

 

NoticeController.java

	@RequestMapping("reg")
	@ResponseBody
	public String reg(String title, String content, String category) {
		
		return String.format("title:%s, content:%s<br>category:%s", title, content, category);
	}

 

category 값도 출력할 수 있도록 컨트롤러를 수정하고 실행하면 화면에 카테고리가 option의 value 값으로 출력된다.

 

 

 

* POST 입력 방법 - 체크 박스

 

 

reg1.html

<tr>
	<th>좋아하는 음식</th>
	<td class="text-align-left text-indent text-strong text-orange" colspan="3">
		<input type="checkbox" name="foods" value="1" id="ch1"><label for="ch1">자장면</label>
		<input type="checkbox" name="foods" value="2" id="ch2"><label for="ch2">짬뽕</label>
		<input type="checkbox" name="foods" value="3" id="ch3"><label for="ch3">볶음밥</label>
		<input type="checkbox" name="foods" value="4" id="ch4"><label for="ch4">탕수육</label>
	</td>
</tr>

 

reg1.html에 체크박스를 추가하고 name="foods"으로 설정한다.

 

 

 

다음과 같이 입력하고 개발자 도구를 연 상태에서 등록 버튼을 누른다(submit).

 

 

 

Network 탭에서 reg을 클릭하면 Form 태그를 통해 전송되는 값을 볼 수 있다. foods의 값으로는 짜장면과 짬뽕의 값인 1, 2가 각각 보여진다.

 

 

Form Data의 view source 클릭

 

view source를 클릭하면 이와 같이 요청 url 경로를 볼 수 있다. foods라는 이름으로 여러 값이 전송되므로 컨트롤러에서는 배열로 받으면 된다.

 

 

NoticeController.java

	@RequestMapping("reg")
	@ResponseBody //입력값을 사용자에게 다시 보여주기만 하기 위해서 사용
	public String reg(String title, String content, String category, String[] foods) {
		
		for(String f : foods) {
			System.out.println(f);
		}
		
		return String.format("title:%s, content:%s<br>category:%s", title, content, category);
	}

 

 

String[] foods, 즉 배열로 받고 출력하면 value 값이 잘 출력되는 것을 확인할 수 있다.

 

 

 

* POST 입력 방법 - 라디오 버튼

 

 

reg1.html

<tr>
	<th>가장 좋아하는 음식</th>
	<td class="text-align-left text-indent text-strong text-orange" colspan="3">
		<input type="radio" name="food" value="1" id="rd1"><label for="rd1">자장면</label>
		<input type="radio" name="food" value="2" id="rd2"><label for="rd2">짬뽕</label>
		<input type="radio" name="food" value="3" id="rd3"><label for="rd3">볶음밥</label>
		<input type="radio" name="food" value="4" id="rd4"><label for="rd4">탕수육</label>
	</td>
</tr>

 

라디오 버튼에서 name을 다 다르게 선택하면 서로 다른 항목의 버튼으로 간주하여 다 눌리기 때문에 하나만 선택할 수 있게 하려면 전부 name을 food로 같게 설정해야 한다. 

 

 

NoticeController.java

	@RequestMapping("reg")
	@ResponseBody
	public String reg(String title, String content, String category, String[] foods, String food) {
		
		for(String f : foods) {
			System.out.println(f);
		}
		
		return String.format("title:%s, content:%s<br>category:%s, food:%s", title, content, category, food);
	}

 

컨트롤러에서 value를 String으로 받으면 된다.

 

 

 

* 한글 입력이 깨지는 문제

 

 

 

 

form에서 한글을 입력해서 submit 하면 위와 같이 깨져서 나타나게 된다.

 

 

 

사용자가 한글을 입력해서 서버에 전달하고자 할 때, 한글이 직접 전송되는 것이 아니라 한글을 대신하는 식별자(문자 코드)가 전달된다. 

 

UTF-8로 6바이트의 한글을 전달하는 상황을 생각해 보자. POST 방식으로 위처럼 URL Encoding이 전달될 것이다. 한글 하나는 2바이트를 소비한다. (그림에서 파란색 박스 하나가 1바이트)

 

이때 서버쪽의 인코딩에 따라서 전달받은 값의 해석이 달라질 수 있다. 톰캣의 기본 인코딩 방식은 ISO-8859-1이므로 1바이트씩 끊어서 읽게 된다. 혹은 다른 2바이트씩 읽는 인코딩 방식을 사용하더라도 다른 문자 코드로 해석하기 때문에 값이 잘못 해석된다.

 

 

 

 

 

클라이언트 쪽에서 보낸 데이터를 request를 통해 읽어오는데 그 때 request.setCharacterEncoding을 통해 인코딩을 "UTF-8"로 지정해 주면 한글이 깨지는 것을 해결할 수 있다. (UTF-8로 읽어라, 라는 설정)

 

모든 서블릿마다 일일이 request.setCharacterEncoding 설정을 할 수도 있고, <Connector URIEncoding="UTF-8"> 처럼 톰캣 설정을 전부 바꿀 수도 있다. 하지만 후자의 방법처럼 톰캣 전체의 인코딩을 바꾸는 것은 위험 요소가 있기 때문에 서블릿에서 인코딩 설정을 해주는 편이 좋다. 이때, 입력을 받을 때마다 서블릿에 인코딩 설정을 하는 것은 번거롭기 때문에 필터를 이용한다.

 

 

 

 

서블릿 컨테이너에 로드된 서블릿에 인코딩과 같은 사전 작업을 하고 싶을 때 필터를 설정할 수 있다. 필터는 요청과 서블릿의 중간 역할을 한다. 필터는 여러 개 설정할 수도 있다. 인코딩 필터, 사용자 권한을 처리하는 필터 등이 있다. 필터는 만들어서 사용할 수도 있고 스프링이 제공하는 필터를 간단히 설정만으로 사용할 수도 있다.

 

 

web.xml

<filter>
	<filter-name>charaterEncodingFilter</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>charaterEncodingFilter</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

 

 

web.xml에 필터 설정을 하고 한글 값을 입력, submit 하면 한글이 깨지지 않게 인코딩 되었음을 확인할 수 있다.