[꼼꼼한 개발자] 꼼코더
36. 코드로 배우는 스프링 웹 프로젝트 - [화면 처리] - 등록 입력 페이지와 등록 처리, 한글 문제와 UTF-8 필터 처리 본문
36. 코드로 배우는 스프링 웹 프로젝트 - [화면 처리] - 등록 입력 페이지와 등록 처리, 한글 문제와 UTF-8 필터 처리
꼼코더 2023. 1. 27. 01:18👉🏻 등록 입력 페이지와 등록 처리
게시물의 등록 작업은 POST 방식으로 처리하지만
화면에서 입력을 받아야 하니 GET 방식의 입력페이지를 확인하는 메소드를 추가해 보자
👨🏻💻 BoardController 코드 추가
register() 는 입력 페이지를 보여주는 역할이므로 별도의 처리가 필요 없다
views 폴더에 includes를 적용한 입력 페이지를 작성한다.

👨🏻💻register.jsp 추가
views 폴더 → board 폴더 → register.jsp 추가


register.jsp 페이지에서는 <form> 태그를 이용해서 필요한 데이터를 전송한다.
<input>이나 <textarea> 태그의 name 속성은 BoardVO 클래스의 변수와 일치시켜 준다
💁🏻♂️ 결과(1)
브라우저에 /board/register 화면이 제대로 출력되는지 확인한다.

화면이 정상적으로 보인다면 입력항목을 넣어 새로운 게시물이 등록되는지 확인한다.
BoardController의 Post 방식으로 동작하는 register()는
rediect 방식을 사용하여 게시물 등록 후 다시 /board/list로 이동하게 된다
💁🏻♂️ 결과(2)
입력항목을 넣어 새로운 게시물이 등록 되는지 확인
하지만 한글이 깨지는 문제가 발생한다.

💤 한글 문제와 UTF-8 필터 처리
한글 입력 문제를 발견했다면 아래 방법을 거쳐보자.
1) 브라우저에서 한글이 깨져서 전송되는지 확인
2) 스프링 MVC 쪽에서 한글을 처리하는 필터 등록
1번은 개발자 도구를 이용해서 확인할 수 있다.
개발자 도구 > NetWork 탭을 열어둔 상태에서 데이터를 보내어 확인해 보자

브라우저 한글 문제가 없다는 것을 확인했다면(그림 우측 확인)
Controller 혹은 데이터 베이스 쪽을 확인해 보자
BoardController와 BoardServiceImpl을 개발할 때에는 이미 Lombok의 로그를 이용해서
필요한 기능들을 기록해 두었으니 이를 확인해 보자.

위 로그를 살펴보면 BoardController에 전달될 때 이미 한글이 깨진 상태로 처리된 것을 볼 수 있다.
이 문제를 해결하기 위해 web.xml에 아래와 같이 필터를 추가한다.
💁🏻♂️ 결과
정상적으로 한글이 출력되는 걸 확인할 수 있다.

위 내용은 코드로 배우는 스프링 웹 프로젝트 교재를 참고하여 작성되었습니다.
코드로 배우는 스프링 웹 프로젝트 - YES24
이 책은 Spring Framework(이하 스프링)를 사용해서 말 그대로 ‘웹 프로젝트’를 어떻게 진행하는지를 설명하는 책이다. 웹 프로젝트라고 거창하게 표현하지만, 좀 더 구체적으로는 스프링으로 웹
www.yes24.com