[Spring] Controller 에 지정된 JSP를 이용한 화면처리

database 연동과 mapper , 컨트롤러 테스트가 완료되었다면

실제 화면에서 로직수행이 완료된 형태의 데이터가 적절히 보여지는지 화면에 대한 테스트가 필요하다.

기존에 진행했던 팀프로젝트나 게시판 사이트프로젝트에서는 bootstrap5를 사용하였지만 현재 진행하고 있는 회원/매출 사이트는 jsp와 javaScript 만을 활용하여 스터디하고 있다. 

jsp작업 전 화면 전체의 레이아웃을 구상할때는 데모 사이트를 참고해도 좋고 평소 ui가 깔끔하다고 생각했던 사이트를 참고하여 비슷하게 작업해보며 진행하였다. 레이아웃 같은 경우도 비즈니스 로직보다는 중요도가 낮다고 생각할 수 있지만 화면도 처음부터 의도한대로 잘 설계하고 시작하는 것이 경험상 효율적이었다. 

**이번 게시판 사이트 프로젝트를 마치면 bootstrap5와 다양한 api를 사용해서 작업해볼 예정이다. 

 

현재는 jsp로 작업하기 때문에 common 폴더에 공통되는 header와 nav를 따로 빼고 회원/매출 화면 jsp에 include했다. 

jquery를 사용하고 있어서 해당 cdn 는 common폴더에 있는 header jsp에 넣어두었고 이처럼 공통되는 태그의 경우 head jsp 안에 모아두면 된다. bootstrap으로 작업했을 때에는 bootstrap관련 태그와 lightbox같은 cdn도 link태그로 추가해주어 공통 폴더에서 관리하였다. 

어느정도 화면작업이 끝나면 클라이언트쪽에서 입력한 데이터가 적절히 모델에 바인딩되어 controller에 전달하는지 확인해야한다. 화면에서 유의점은 내가 보내려는 파라미터의 네임 속성을 잘 지정해야 한다. 추가로 현재 모델에 있는 값을 jstl을 통해 의도한대로 출력될 수 있도록 위치를 지정하여 넣어두어야 한다. 

데이터를 확인할때 주의해야하는 부분 중 하나로 한글이 깨지는 인코딩 문제가 있는데 이는 필터로 등록해서 일괄 적용될 수 있도록 해야한다. web.xml의 filter태그 안에 utf-8방식을 속성으로 지정해준다. 한글이 깨질때는 해당 필터 태그에 오탈자가 없는지 체크하고 테스트를 진행하여 반영을 확인한다.

화면에서 수정이 불가해야하는 항목에 대해서는 해당 input 태그 속성에 readonly를 지정해주고, 화면에 데이터가 미리 세팅되어 있어야 하는 경우에는 value속성에 jquery를 사용하여 해당 데이터를 화면에 미리 불러올 수 있도록 한다. 

화면에서 form태그로 데이터 전송할 때는 method 와 데이터를 전달할 경로를 action 에 적절히 지정해주어야 한다. get방식으로 url에 묶어서 보낼때는 쿼리스트링 뒤에 key-value 쌍의 값을 & 로 추가해가며 이동시 함께 보낸다.

 

*** 모든 비즈니스 로직 수행은 결국 데이터에 대한 조작을 위한 것이 주 목적이므로 파라미터 처리는 매우 중요하다. 따라서 파라미터 송수신에 오류가 없도록 올바른 경로와 전송방식 get/post 지정에 유의하여 작업한다.