jsp 그것이 알고싶다
처음에 난 jsp가 자바스크립트의 약자인줄 알고있었다
그래서 두 용어사이에 혼동이 있었는데 이번에 가볍게 배우면서
jsp 가 뭔지 그래서 어떻게 작성하는지에 대해 간단히 정리해보려한다
레츠고!
java server page 의 약자로 웹페이지의 내용이나 모양을 제어하는 방식이며
java를 웹서버에서 쉽게 쓰기위한 기술이다.
이러한 jsp 파일을 servlet(서블릿) 클래스로 변환하고 실행시켜주기위해선 우선
tomcat 이라는 서블릿 컨테이너가 필요하다.
먼저 apache tomcat 웹사이트에서 tomcat 압축파일을 받은 후 압축을 해제
-> 이클립스에서 new - other 클릭 후 web -dynamic web project 선택
-> new runtime 선택 후 다운받은 버전의 tomcat 선택
-> browse 클릭 후 압축푼 파일로 경로지정
-> 프로젝트 이름 작성 후 target runtime 에서 올바르게 지정되었는지 확인 후 finish
이후 프로젝트 실행 시 해당 tomcat 으로 실행시키면 된다.
jsp 는 쉽게 표현하면 html과 java 언어를 합쳐서 작성하는것으로
기존에 나는 하나의 프로젝트? 파일에는 하나의 언어만 쓰이는줄 알고있었다.
하지만 jsp 를 통해 각 언어의 영역을 표시해주면서 서로의 장점을 취해 여러 언어를 병합해 사용할 수 있다는걸 알게되었다.
먼저 이클립스에서 new -> jsp file 로 생성해주면 첫줄부터 <%,,,%> 이런식으로 쓰여있는걸 볼 수 있는데
해당 부분이 지시어 부분이다. (현재 파일에 관련된 정보가 들어있다, 임포트, 인코딩방식 등등..)
그리고 <%!,,,,%> 로 쓰여있는 부분은 선언부로 각종 메소드를 선언할 수 있는 부분이고
<% ,,,, %> 로 쓰여있는부분은 스크립트릿, 일반적인 코드 작성부분이며 대부분의 코드가 여기서 작성된다.
아래 body 부분에서 보이는 <%= ,,,%> 이 부분은 표현식 부분으로 여기서 작성한게 페이지에 나타난다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.ArrayList" %> <%--지시어, 현재 페이지관련 정보 나타냄, 임포트가능--%>
<%! //선언부 -> 메소드를 선언(표현식에 들어갈 수 있음)
public int add(int num1, int num2){
return num1 + num2;
}
%>
<% //스크립트릿 : 일반적인 코드 작성부분
String hello = "hello";
int a = 10;
int b = 20;
int result = add(a, b);
ArrayList<String> hello2 = new ArrayList<String>();
hello2.add("a");
hello2.add("b");
hello2.add("c");
%>
<%--java: 서버에서 컴파일, html: 클라이언트에서 컴파일 *컴파일(compile): (대충)컴퓨터가 이해할 수 있도록 코드를 이진수로 바꿔주는 것 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>
<%--표현식--%>
더하기 결과 : <%=result %><br> <%--"더하기 결과 : 30" 이 출력--%>
더하기 : <%=add(10, 20) %><br> <%--"더하기 : 30" 이 출력--%>
문자열 출력 : <%=hello %><br> <%--"문자열 출력 : 'hello'" 이 출력--%>
배열 출력 : <%=hello2 %><br> <%--"배열 출력 : [a, b, c]" 이 출력--%>
</h1>
</body>
</html>이렇게 jsp 파일이 작동하는 방식에 대해 간단히 살펴보았다.
다음은 좀 재미있는걸 배웠는데 바로 페이지를 넘어가는 방법이다!
이전 html 시간에 배웠던 것과 jsp 를 활용해 어떤 페이지에서 어떤 버튼을 누르면 어디로 가고, 다른 페이지에 가면 다른 문구를 출력하는 좀 재밌는? 시간이었다.
이번시간에 배운건 action 태그라는건데 해당 태그를 이용해 페이지를 넘나들 수 있다.
먼저 forwardFrom.jsp 파일을 생성 후
이 파일에서 넘겨받을 forwardTo.jsp 파일도 생성해주자.
<forwardFrom.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="forwardTo.jsp" method="get"> // 액션태그로 get 방식을 활용해 forwardTo.jsp 로 정보를 보냄
name: <input type="text" name = "name" placeholder="insert name..">
select language.. :
<select name = "language">
<option value="java">java</option>
<option value="python">python</option>
<option value="javaScript">javaScript</option>
<option value="kotlin">kotlin</option>
<option value="C++">C++</option>
</select>
<input type="submit" value="okay"> // okay(submit) 버튼을 누르면 파라미터값이 출동
</form>
</body>
</html>forwardFrom.jsp 파일에서 forwardTo.jsp로 값이 넘어가게끔 (페이지가 전환되게끔) 액션태그를 걸어주고
<forwardTo.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8"); <%--request 받은값을 utf-8로 인코딩--%>
String sign = request.getParameter("name"); <%--request로 받은 파라미터값 중 'name' 값만 가져옴--%>
String lan = request.getParameter("language");
%>
<h1>your name is <%=sign %></h1><br>
<h2>and your weapon is <%=lan %></h2>
</body>
</html>forwardTo.jsp 파일에선 받은 요청값(request, 파라미터)을 어떻게 저장하고 출력할지 작성.
이제 tomcat 으로 실행시켜보자. ( 무조건 메인이 되는, 즉 첫 페이지에서 실행시켜주어야 오류가 안난다. forwardFrom.jsp 에서 실행시켜주자.)
위 사진처럼 페이지가 생긴것을 볼 수 있다. 저기서 이름과 언어를 입력후 okay(submit) 버튼을 누르면 액션태그로 forwardTo.jsp로 넘어가게 된다.
짜잔! 무사히 잘 출력된것을 볼 수 있다. 내 무기는 파이썬
마무리
이렇게 jsp가 뭔지, 어떻게 작동하는지, tomcat 연동 방법과 jsp 파일 사이를 이어주는 액션태그에 대해서까지 배워보았다
페이지를 넘어가는 방식은 이외에도 몇가지 더있는데 해당방법은 다음 시간에..
쨌든 이렇게 페이지내 움직임을 구현하는 jsp!! 뭔가 여태 배운것들이 정적이어서 그런가
jsp 는 좀 신선하게 다가왔다. 구현했을 때 보는 맛이 있다고나 할까..?
앞으로가 좀 더 재밌어질것같다
