본문 바로가기

Study/JSP

[JSP]JSP와 폼 태그

JSP를 설명하기에 앞서 웹 프로그래밍이란, 웹상에서 사용자와 기업 또는 사용자들 간의 연결을 가능하게 하는 것을 말한다. 웹 프로그래밍 언어로는 CGI, ASP, PHP, JSP 등이 있는데, CGI는 거의 쓰지 않고 ASP는 윈도우 기반 서버에서만 사용하며, PHP는 배우기 쉽지만 인프라가 부족하다는 단점이 있다. 이 중 ASP의 장점을 수용하여 서블릿과 함께 동작하게 만든 언어가 현재 가장 많이 쓰이는 JSP다.

여기서 서블릿(Servlet)은 Server와 Applet을 합친 말로, java 웹 페이지를 서버에서 실행하게 해주는 동적 웹 구현 기술이다. 서블릿은 스레드(Thread) 기반의 요청 처리 방식을 기반으로 하여 프로세스(Process) 기반 방식보다 훨씬 빠르다. 프로세스란 주기억장치 RAM에 로드된 상태의(실행되고 있는) 프로그램이다. 단순 프로세스 방식은 요청을 처리할 때마다 프로세스를 새로 만들어야 해서 불편함이 많기 때문에, 한 프로세스 내에서 스레드가 여러 개 만들어져 동작하는 스레드 기반의 방식이 나온 것이다.

 

JSP(Java Server Page)

jsp는 java와 html이 결합된 형태다. java 언어 기반이기 때문에 강력한 이식성(모듈화), 즉 높은 재사용성을 가지고 있으며, 스레드 기반으로서 서버 자원의 효율적인 사용이 가능하다. 또한 간편한 MVC 패턴을 가지고 있기도 한데, 이 패턴은 후에 다시 설명할 것이다. jsp나 서블릿을 생성부터 종료까지 모두 처리하는 것은 웹 컨테이너가 있다. 웹 컨테이너는 서블릿 컨테이너/jsp 컨테이너라고 나눠 부르기도 하며, 대표적인 웹 컨테이너로 톰캣이 있다.

 

jsp 페이지 안에서 jsp 코드를 작성할 수 있는데, 내 컴퓨터에서 이 페이지는 두 군데에 위치하고 있다.

이클립스 워크스페이스 / 내 프로젝트 / WebContent 의 파일은 대외적으로 보이는 것이고,

워크스페이스 / .metadata / .plugins / org.eclipse.wst.server.core / tmp0 / wtpwebapps / 내 프로젝트 에서 찾을 수 있는 파일은 서버 측에 위치한 것이다.

또한 서블릿의 위치도 찾을 수 있다. 워크스페이스 / .metadata / .plugins / org.eclipse.wst.server.core / tmp0 / work / Catalina / localhost / 내 프로젝트 / org / apache / jsp 에 가면 보이는데, 파일을 열어보면 java 언어로 된 것을 알 수 있다.

 

jsp 코드는 지시어와 스크립트로 나뉜다. 지시어는 jsp 페이지 생성 시 상단에 적혀있으며, jsp 파일을 실행할 때 해당 페이지에 대한 설정을 해 놓은 것이다. page, include, taglib으로 구성되어 있고 <%@ %> 형식으로 작성된다.

jsp 스크립트 요소로는 3가지가 있는데, 먼저 선언문은 멤버변수와 메서드를 선언하기 위한 클래스 영역으로, 페이지 전체를 포함하며 <%! %> 로 작성한다. 그리고 스크립틀릿은 jsp 코드를 적는 메서드 영역으로, <% %> 로 작성한다. 스크립틀릿은 서블릿 코드의 작성법이 어려운 점을 보완해준다. 마지막으로 표현식은 선언문과 스크립틀릿에 생성한 멤버들을 사용하여 화면에 출력한다. 태그 또한 적용 가능하며, <%= %> 로 작성한다.

<!-- 지시어 영역 -->
<%@설정%>

<!--스크립트 요소 영역 -->
<%!선언문%>
<%스크립틀릿%>
<%=표현식%>

<%-- JSP주석문 --%>

 

jsp 코드는 html 페이지 내에 java 코드를 삽입하는 형식이기 때문에, 반복되는 html 코드를 쓸 때 jsp와 결합하여 for문을 사용할 수도 있다. 아래처럼 작성 후 런을 하면 페이지에 a b c가 줄 바꿈 되어 출력된다. 참고로 jsp 코드에서 System.out.println()은 콘솔 창 출력문이고, 화면에 출력하고 싶으면 out.println() 라고 쓴다.

<%
String[] arr = {"a", "b", "c"};

	for(int i=0; i<arr.length; i++) {
		%>
		<%=arr[i]%><br>
		<%
	}
%>

 

폼 태그 전달

HTTP 프로토콜 방식에는 요청과 응답이 포함되어 있다. 요청은 request, 응답은 response 객체로 자동 생성되는데, 폼 태그에서 action 페이지에 정보가 전달되면 스크립틀릿에서 그 정보를 request.getParameter( ); 로 저장한다. 전달된 정보는 String 타입이므로 필요시 Integer.parseInt() 등으로 변환을 해야 한다. 또한 post 방식으로 영어가 아닌 한글이 전달됐을 경우 인코딩 오류가 나기 때문에, 스크립틀릿에 request.setCharacterEncoding("UTF-8"); 을 작성해줘야 한다.

예를 들어 폼 태그에서 텍스트 타입(<input type="text" name="num">)에 숫자를 입력하여 submit 했다고 치면, action 페이지를 jsp 파일로 생성하여 아래와 같이 숫자 정보를 저장 후 사용한다.

<!-- action 페이지 -->

<body>
<% request.setCharacterEncoding("UTF-8"); %>
<!-- 한글 인코딩 / 현재 코드에선 필요 없음 -->

<%
String number = request.getParameter("num");
%>
<!-- name(String 타입 데이터)을 받아서 저장 -->

전달데이터(String) : <%=number%><br>
전달데이터(int) : <%=Integer.parseInt(number)%>
<!-- 둘 다 출력은 같지만 위는 문자, 아래는 숫자 -->
</body>

 

정보를 넘겼을 때 대부분의 타입은 그냥 출력되지만, 데이터를 여러 개 넘기는 checkbox 타입은 방식이 좀 다르다. 다른 타입과 똑같이 출력하면 처음 선택한 값만 출력되기 때문에, 배열 형태로 저장해야 값이 전부 출력된다. 아래의 코드는 전송 데이터를 입력할 form 태그를 먼저 작성한 것이고, 여기서 select 타입은 option이 반복돼서 jsp 코드로 반복문을 적용했다.

Form 페이지에 입력한 데이터를 action 페이지(Pro 페이지)에서 보기 위해서는 아래와 같이 정보를 저장해야 한다. 여기서 checkbox 타입인 취미는 배열로 저장 후 배열 값이 null이 아닐 때, 즉 배열이 비어있지 않을 때 배열의 모든 데이터를 순차적으로 출력하게 된다.