💻 JSP를 사용해서 HTML에 자바코드 직접 작성하기
서블릿 어노테이션을 이용하여 HTML파일을 작성하고, 해당 파일을 자바로 불러 자바에서 코드를 작성해 페이지에 띄워주는 작업을 진행해왔다. 이제는 HTML코드에 직접 자바 코드를 작성하는 방법을 알아보려고 한다. 바로 JSP를 이용하는 것인데, JSP가 무엇인지, 어떻게 사용하는지 간단하게 알아보자.
⭐️ JSP란?
JSP는 Java Server Pages의 약자로, HTML코드에 JAVA코드를 넣어 동적 웹페이지를 생성하는 웹 어플리케이션 도구다. JSP를 통해 정적인 HTML과 동적으로 생성된 컨텐츠를 혼합하여 사용할 수 있다. JSP가 실행되면 자바 서블릿으로 변환되며, 웹 어플리케이션 서버에서 동작되면서 필요한 기능을 수행하고 그렇게 생성된 데이터를 웹페이지와 함께 클라이언트로 응답한다.
⭐️ JSP 파일 생성
Dynamic Web Project를 만들고 src > main > webapp 내부에 기존 HTML파일을 제작해주었다. 똑같은 위치에 JSP파일도 만들어주면 된다. CTRL + N (맥은 command + n)키를 눌러 jsp 파일을 만들어주자. (알아보기 쉽게 하기 위해 practice폴더를 따로 하나 제작해주었다.)
jsp 파일 내부를 보게 되면 상단에 <%@ %>로 둘러싸인 문장을 볼 수 있는데, JSP를 사용 가능하게 해준다. 보통 다른 HTML코드에도 해당 문장을 붙여넣게 되면 jsp로 사용할 수 있게 된다.
⭐️ JSP 사용법
🔥 스크립트 태그
HTML 코드에 자바 코드를 넣어 프로그램이 수행할 기능을 구현할 수 있다.
📌 스크립트 태그 종류
선언문(declaration) : <%! %>
자바 변수나 메소드를 정의하는데 사용하는 태그스크립틀릿(scriptlet) : <% %>
자바 변수 선언 및 자바 로직 코드를 작성하는데 사용되는 태그표현문 (expression) : <%= %>
변수, 계산식, 메소드 호출 결과를 나타내는 태그지시자 : <%@ %>
페이지 속성 지정주석 : <%-- -->
주석처리
디렉티브 태그를 이용하여 현재 JSP페이지의 특정 영역에 외부 파일의 내용을 포함시킬 수 있다.
✓ 디렉티브 태그를 이용하여 외부 파일 불러오기
간단한 HTML을 제작해주었다.
<body> <%@ include file="7-2_header.jsp" %> <h4>-----------현재 페이지 영역------------</h4> <p>페이지 내용들!!!</p> <h4>-----------------------------------</h4> <%@ include file="7-3_footer.jsp" %> </body>
해당 페이지에서 header와 footer를 디렉티브 태그를 이용하여 다른 파일로 불러올 수 있다.
✓ 1행 5열 테이블을 for문을 사용하여 jsp로 제작하기
jsp파일 내부에서 자바코드를 사용하고 싶을 때는, 스크립틀릿(<% %>) 안에 코드를 작성하면 된다. 간단하게 1행 5열의 테이블을 for문을 통해서 만들어보자.
우선 테이블의 border를 1로 설정하고, tr태그를 만들어주자.
5개의 열을 만들어 줘야 하기 때문에 for 문으로 5번 반복하는 코드를 짜준다. 이 때, 코드의 앞 뒤를 <% %>로 감싸준다.
내부에 td태그를 만들어주고, i값을 이용해서 몇 번째 열인지 값을 적어줄 수 있다. 이 때 계산해서 나오는 값의 경우엔 <%= %>를 앞뒤에 적어주자.
🔥 액션 태그
행위에 대한 태그로서, jsp 페이지에서 자바 코드를 간편하게 줄여서 사용할 수 있도록 도와주는 태그. 액션 태그를 사용하면 코드 양을 대폭 줄일 수 있다.
📌 액션태그 종류
- forward : 다른 페이지로 이동
<jsp:forward/>- include : 외부 페이지의 내용을 포함하고나 페이지 모듈화
<jsp:include/>- param : 현재 페이지에서 다른 페이지에 정보를 전달할 때 사용
<jsp:param/>- useBean : 빈(Bean, 객체)을 생성하고 사용하기 위한 환경을 정의
<jsp:useBean/>- setProperty : 빈에서 속성 값을 할당
<jsp:setProperty/>- getProperty : 빈에서 속성 값을 얻어 올 떄 사용
<jsp:getProperty/>
⭐️ JSP 내장객체
JSP 페이지 내에서 제공되는 특수한 클래스 형의 객체로, 선언과 할당 없이 사용할 수 있다. 주로 사용되는 내장객체로는 아래와 같이 있다.
- request : 웹브라우저의 요청 정보를 저장하고 있는 객체
- response : 웹브라우저의 요청에 대한 응답 정보를 저장하고 있는 객체
- out : JSP 페이지에 출력할 내용을 가지고 있는 출력 스트림 객체
- session : 하나의 웹 브라우저의 정보를 유지하기 위한 세션 정보를 저장하고 있는 객체
🔥 request 내장객체 사용해보기
for문을 이용하여 hello servlet!!! 이 5번 출력되는 코드를 짜보았다.
여기서 사용자에게 값을 입력받는다고 가정했을 때, 문장의 출력 횟수를 사용자가 지정한 값으로 매번 바꿔주는 코드를 짜려고 한다. jsp로 정의해주는 jsp page directive 바로 아래에 <% %> (JSP scriptlet) 내부에 자바코드를 적어준다.
주소창에 도메인 + 해당 파일명 뒤에 ?cnt= 을 적어주고 원하는 값을 적어주게 되면, 그 수 만큼 문장이 출력되는 것을 확인할 수 있다. 일반적인 get방식으로 데이터를 전송하는 방법을 약식으로 확인한 것이다.
🔥 request 내장객체 사용해보기 - 2 (get방식으로 데이터 보내기)
100 + 200 의 답이 무엇인지 다섯 개의 보기를 눌러 확인해야 하는 HTML코드를 만들어준다.
100 부터 500까지 다섯 개의 보기를 클릭할 때 마다 href뒤에 붙은 페이지 주소 "3_2_to.jsp"로 향하게 되는데, get방식으로 데이터를 쏴주기 때문에, 100의 a태그를 누를 경우 ans라는 변수에 담긴 값이 100으로 보내질 페이지로 향하게 된다.
받아주는 페이지의 코드를 짜보면, 아래와 같다. 해당 코드는 MVC패턴의 Controller라고 생각하면 된다.
<% // ans로 넘어온 데이터 값을 ansPara라는 변수로 받아줌 String ansPara = request.getParameter("ans"); // 정답을 여부를 알려줄 변수 result String result = ""; // validation 체크 if(ansPara == null && ansPara.equals("")){ result = "입력 값이 없습니다."; } else { // 만약 링크를 제대로 타고 들어갔을 때, 해당 데이터를 int로 파싱 int userSelect = Integer.parseInt(ansPara); // 300을 눌렀을 때, result 에 "정답"을 담아줌. if(userSelect == 300){ result = "정답입니다."; } else { result = "정답이 아닙니다."; } } %>
이제 HTML단에 해당 결과를 넣어주기만 하면 된다. MVC 패턴에서, VIEW단 안에 Model단을 구성해준다고 생각하면 된다. get 방식으로 데이터를 넘겨줬기 때문에, 주소창에 넘겨준 데이터가 그대로 나타나는 것을 확인할 수 있다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>응답결과</h1> <p><%=result %></p> </body> </html>
🔥 request 내장객체 사용해보기 - 3 (post방식으로 데이터 보내기)
HTML에 간단한 form태그를 만들고, 안에 인풋박스와 제출버튼을 만들어준다. 해당 박스에 이름을 입력하면 form태그에 입력된 주소로 데이터가 넘어가, 해당 페이지에 입력한 이름이 보여지게된다.
받아줄 JSP에 컨트롤러역할을 하는 자바단을 jsp내부에 짜보면, 아래와 같다.
// user_name 이름을 가진 데이터를 받아와 userName변수에 담아줌 String userName = request.getParameter("user_name"); // 사용자의 실수로 인해 데이터에 생긴 공백을 지워줌 userName = userName.trim(); String result = ""; // validation 체크1 if(userName == null){ result = "입력값이 없습니다."; } // validation 체크2 if(userName.equals("")) { result = "이름을 입력하세요."; }
마지막으로 View단과 Model단을 간단하게 넣어주면 된다. 주소창에 데이터가 담기지 않는 모습이다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1><%=userName %></h1> </body> </html>
⭐️ doGet() 과 doPost() 메소드
JSP에서 데이터를 서블릿으로 쏴줄 때, 전송하는 방식들에 대한 메소드를 만들어 줘야한다. get방식과 post방식에 해당하는 메소드 doGet()과 doPost()를 오버라이드 시켜주고, 해당 메소드에서 이루어질 작업들을 하는 공통 메소드를 하나 제작해주면 된다.
덧셈 프로그램을 통해 알아보자. 먼저 숫자 두 개를 입력받는 간단한 form태그를 만들어준다.
<body> <form action="Calc" method="get"> 첫 번째 정수 : <input type="text" name="num1"><br> 두 번째 정수 : <input type="text" name="num2"><br> <input type="submit"> </form> </body>
이후 서블릿을 만들어주는데, doGet과 doPost메소드를 오버라이드 해준다. 메소드 내부엔 프린트문을 찍어, 어떤 종류로 데이터를 전달받았는지 알 수 있도록 해주었다.. 마지막으로 공통으로 작업을 처리해줄 doProcess메소드를 만들어주고, doGet과 doPost메소드 내부에 해당 메소드를 적어주었다.
@WebServlet("/calc") public class CalcServlet extends HttpServlet{ // doGet 메소드 오버라이드 @Override protected void doGet(HttpServletRequest req, HttpServletResponse reps) throws ServletException, IOException{ // 만약 데이터가 get방식으로 넘어온다면, 콘솔에 Get요청이 찍히게 됨. System.out.println("Get요청"); // 뒤에 정의한 doProcess 메소드를 실행시킴 doProcess(req, resp); } // doPost 메소드 오버라이드 @Override protected void doPost(HttpServletRequest req, HttpServletResponse reps) throws ServletException, IOException{ System.out.println("Post요청"); doProcess(req, resp); } // doProcess 메소드 만들어줌 // 해당 메소드를 지나가면 입력받은 두 개의 숫자가 int로 파싱되며, // 더한 값을 페이지에 띄워줌 protected void doProcess(HttpServletRequest req, HttpServletResponse reps) throws IOException{ int num1 = Integer.parseInt(req.getParameter("num1")); int num2 = Integer.parseInt(req.getParameter("num2")); PrintWriter out = resp.getWriter(); out.println("<HTML><body>" + (num1 + num2) + "</body></HTML>"); }
