JSP
JSP(Java Server Pages) HTML 문서에 자바 코드를 삽입하여 동적 웹 페이지를 생성하는 웹 애플리케이션 기술입니다.
등장 배경
다음 코드는 우리가 서블릿을 공부했을 때 작성했던 코드입니다. 문제점이 보이시나요?
하나의 서블릿에 비즈니스 로직과 뷰가 혼합되어 있습니다. 우리가 공부할 때 만든 코드라서 복잡하진 않았지만 실제 웹 서비스에선 비즈니스 로직, 뷰가 훨씬 복잡해지죠. 이런 경우에 하나의 서블릿에 비즈니스 로직과 뷰를 함께 작성하는 것은 유지보수를 복잡하게 만들어줍니다.
또한 디자이너의 서블릿에서 작성하게 된다면 자바 코드를 어느정도 사용할 수 있어야 뷰를 작성할 수 있다는 문제점이 발생합니다.
그래서 비즈니스 로직과 뷰를 분리하여 개발과 유지보수가 쉬워지도록 등장한 것이 JSP입니다.
Servlet과의 차이점
서블릿도 동적 웹 페이지를 생성하는 클래스였습니다. 그리고 JSP도 동적 웹 페이지를 생성하는 기술이죠. 두 기술의 차이점은 다음과 같습니다.
서블릿은 자바 코드(자바 문자열)을 기반으로HTML, Javascript를 통해 동적 웹 페이지를 생성합니다.JSP은 HTML, CSS, Javascript를 기반으로JSP 요소들을 사용해서 동적 웹 페이지를 생성합니다.
JSP 요소
위에서 JSP는 HTML, CSS, JS 기반의 JSP 요소들을 사용해서 동적 웹 페이지를 생성한다고 했습니다. 그렇다면 JSP 요소들에는 무엇이 있을까요?
- HTML, CSS, JS
- JSP 기본 태그
- JSP 액션 태그
- 커스텀 태그
HTML, CSS, JS는 여기서 다 설명할 수 없어서 미리 학습을 하셨다는 가정하에 진행됩니다. 아니면 제 Velog 시리즈 보시면 HTML, CSS, JS 기본 사항들을 다 정리해놨으므로 필요할 때 한 번 정도 참조해보시는 것도 나쁘지 않습니다.
지금은 JSP가 뭔지에 대해서 개념만 알아보고 기본 태그, 액션 태그, 커스텀 태그는 추후에 따로 설명드리도록 하겠습니다. JSP의 요소에는 저런 것들이 있다만 일단 기억해두세요.
JSP 동작 과정
서블릿을 사용할 땐 서블릿 응답을 보내면 브라우저가 서블릿에 담긴 HTML 태그를 해석해서 브라우저에 구현하는 방식으로 동작했습니다.
JSP는 위에서 언급한 4 가지 요소들이 융합되는 기술이다보니 .jsp 파일을 브라우저로 전송하더라도 브라우저에선 이 파일을 직접 읽어낼 수 없습니다. .jsp 파일을 읽기 위해서는 컨테이너(여기서는 톰캣)에 의해서 브라우저로 전송되기 전에 각 요소들을 변환하는 3단계 과정이 필요합니다.
3단계 변환 과정
.jsp 파일은 3단계를 거쳐서 실행되게 됩니다.
- 변환 단계(Translation Step): 컨테이너가 JSP 파일을 자바 파일로 변환 합니다. (
.jsp -> .java) - 컴파일 단계(Complie Step): 컨테이너가 변환된 자바 파일을 클래스 파일로 컴파일 합니다. (
.java -> .class) - 실행 단계(Interpret Step): 컨테이너가 클래스 파일을 실행한 결과(HTML, CSS, JS)를 브라우저로 전송해 출력합니다.
이 과정을 요약하자면 작성된 JSP는 브라우저에서 HTML, CSS, JS로 변환되어 읽힌다라고 할 수 있습니다.
JSP 프로젝트 생성
IntelliJ 기준으로 작성되었습니다.
New Project -> Jakarta EE에서 Template를 Web Application으로 변경해줍니다. Application Server의 경우에는 톰캣을 사용하는데요. 이미 사용중이라면 위사진대로 하시고 설치나 따로 설정이 필요하시다면 이 포스트를 참조해주세요.
다음 화면에서는 Jakarta EE 10을 선택하고 CREATE하면 JSP를 작성할 프로젝트 생성이 끝납니다.
우리는 이제 서블릿 프로젝트를 생성할 때 자동으로 만들어지던 파일인 index.jsp의 정체를 알 수 있게 되었습니다.
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>JSP - Hello World</title>
</head>
<body>
<h1><%= "Hello World!" %>
</h1>
<br/>
<a href="hello-servlet">Hello Servlet</a>
</body>
</html>이 index.jsp 파일이 해석되면 HTML, CSS, JS 코드가 나타나게 됩니다. 한 번 직접 확인해볼까요? 서버를 실행해봅니다.
실행 후 크롬 개발자 도구의 Source에 들어가 보시면 현재 페이지의 소스를 보여주는데요. 결과는 다음과 같습니다. 
CSS, JS는 없어서 결과에 안나타났을 뿐 제대로 HTML 문서로 변환된 것을 확인할 수 있습니다.
추가적으로 index.jsp 상단의 <%@ ~~~ %>태그는 디렉티브 태그라고 부르는 JSP의 기본 태그인데요. 이는 다음 포스트에서 알아보도록 하겠습니다.
