Servlet & JSP를 사용해 MVC Model 2 패턴의 웹 앱 제작 기초

Servlet과 JSP를 사용해 MVC Model 2 패턴의 웹 앱을 제작하기 위해 필요한 기본적인 정보들을 정리해 놓았습니다. 최근 Java에서는 Spring 프레임워크 게시글이 많아지면서 Servlet과 JSP 관련 글이 잘 보이지 않아 업로드합니다. 다음 편에서는 Servlet + JSP 웹 앱에서 관계형 데이터베이스 MySQL과 데이터베이스 커넥션 풀을 구성하는 방법에 대해서 업로드 할 예정입니다.

 

Servlet & JSP를 사용해 MVC model2 패턴의 웹 앱 제작 기초

 

IDE설정부터 웹 앱 실행까지~

 

1. 인텔리제이 설정

2. 프로젝트 설정

3. 서블릿 및 JSP 등록

4. 톰캣 설정 및 웹 서버 실행

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

인텔리제이 설정

• 먼저 인텔제이는 Ultimate 버전이어야 합니다. 또는 Education 버전을 사용해야 합니다. 기본 Community 버전에서는 웹 앱 프로젝트를 세팅할 수 없습니다.

프로젝트 생성

• 인텔리제이에서 새로운 프로젝트를 생성합니다. 
• Build system은 Maven으로 설정하고, JDK 버전은 컴퓨터에 설치되어 있는 JDK 버전이 자동으로 설정됩니다. 저는 17버전을 기준으로 설명합니다.
• 만약 JDK가 설치되어 있지 않다면, 아래의 웹 사이트에서 자신의 운영체제에 맞는 JDK를 설치할 수 있습니다.

https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html

Java Archive Downloads - Java SE 17

• 샘플 코드 작성은 체크를 해제하고, Name은 원하는 이름으로 설정합니다.
• Create를 누르면 프로젝트 생성이 완료됩니다.

프로젝트 설정

• 먼저 web.xml을 설정해야합니다.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>cuk.se</groupId>
    <artifactId>Untitled</artifactId>
    <version>1.0-SNAPSHOT</version>
    <!-- war 형태로 패키징을 할 것이라고 명시합니다 -->
    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
	
    <!-- maven 프로젝트에서 필요한 의존성들을 정의하는 곳입니다. -->
    <dependencies>
    	<!-- servlet을 사용하기 위해서 아래의 라이브러리와 의존성이 필요합니다. -->
        <dependency>
            <groupId>jakarta.servlet</groupId>
            <artifactId>jakarta.servlet-api</artifactId>
            <version>4.0.4</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
	
    <!-- maven으로 빌드하기 위해서 아래의 플러그인을 추가해줍니다. -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.4.0</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>17</source>
                    <target>17</target>
                </configuration>
                <version>3.13.0</version>
            </plugin>
        </plugins>
    </build>
</project>

• 이제 본격적으로 프로젝트 세팅을 해봅시다. 먼저 File - Project Structure을 클릭합니다.

• Facets에서 + 버튼을 눌러 Web을 눌러줍니다.

• 자동으로 현재 프로젝트가 선택될텐데 Ok를 눌러줍니다.

• 설정이 완료되면 Untitled 폴더 내에 web이라는 폴더가 생겼습니다. maven으로 빌드를 편하게 하기 위해서는 이 web 폴더를 아래의 그림과 같이 이동하고 이름을 수정해주어야합니다.

• /src/main 폴더 안으로 이동하고 webapp 으로 이름을 바꾸었습니다. 하지만 설정 상에서는 이동된 것이 반영이 안되므로 다시 File - Project Structure을 눌러줍니다.

• 예상했던 데로 빨간색 글씨로 오류가 떠있습니다.
• 해당 디렉토리 부분을 더블 클릭해서 변경한 폴더로 바꿔줍니다.

• ok를 누르면 반영됩니다.
• 혹시 위와 같이 설정을 완료했는데, Deployment Descriptors 부분의 Web Module Deployment Descriptor의 Path가 예전 web 폴더 내의 web.xml을 가르키고 있다면 현재의 webapp 폴더 내의 web.xml로 변경해줍시다.
• 정확하게는 - 버튼을 눌러 제거하고 + 버튼을 눌러 새롭게 등록해주어야 합니다.

• 이제 인텔리제이 오른쪽에서 m 모양을 눌러 Maven 관련 명령어들 중 하나를 실행해보겠습니다.
• 저희는 war로 패키징하여 웹 서버에서 배포를 해야하므로 Lifecycle 중 하나인 package를 눌러보겠습니다.

• 아래의 터미널에 여러 명령어가 올라오다가 BUILD SUCCESS 가 보인다면 성공적으로 패키징 된 것입니다.
• 왼쪽에 폴더 구조에서 target 폴더가 생기고 해당 폴더 내에 {프로젝트명}-1.0-SNAPSHOT.war 파일이 생성된 것을 알 수 있습니다.

서블릿 및 JSP 등록

• 먼저, 서블릿을 생성합니다.
• /src/main/java 폴더 내에 WelcomeServlet 클래스 파일을 아래와 같이 생성합니다.
• 그리고 이 클래스는 HttpServlet을 상속받아야 합니다.

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/")
public class WelcomeServlet extends HttpServlet {
    public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        req.setAttribute("message", "Welcome");
        RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/jsp/index.jsp");
        rd.forward(req, res);
    }
}

• 해당 파일의 위치는 다음 사진과 같습니다.
• 아, 그리고 예전 JDK 9 버전 밑으로는 특정 Servlet이 어떤 url에서 호출되는지 web.xml에 일일히 등록을 해야했지만, 우리는 상위 버전이기 때문에 @WebServlet 어노테이션에서 해결할 수 있습니다.
• '/' 과 같이 기본 url로 요청이 들어오면 해당 서블릿이 요청을 받아 처리하게 됩니다.
• 또 현재 doGet 메소드 내에 로직이 정의되어 있으므로, http 메소드 중 GET 메소드에만 반응합니다.
• 만약 /welcome 이었다면, http://localhost:8080/welcome 으로 GET 요청을 보내면 index.jsp의 내용이 보여지게 됩니다.

• 이제 Servlet에서 /WEB-INF/jsp/index.jsp에 요청을 전달해야하니까, 실제로 해당 위치에 요청을 받을 jsp를 생성해줍니다.

• 그리고 Servlet에서 요청에 담아 보낸 message를 출력해 봅시다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    String message = (String) request.getAttribute("message");
%>
<h2><%=message%></h2>
</body>
</html>

• <% %> 내부에서 Java 코드를 이용해 request에서 message 키 값의 밸류를 가지고 와서 message 변수에 담습니다.
• 그리고 html 코드인 <h2> </h2> 내부에서 <%=message%> 와 같은 방식으로 해당 변수를 참조하고 있습니다.

톰캣 설정 및 웹 서버 실행

• 자 이제 내 웹 앱을 직접 실행해봅시다.
• 그러기 위해서는 웹 서버를 다운받아야 합니다.

https://tomcat.apache.org/download-80.cgi

Apache Tomcat® - Apache Tomcat 8 Software Downloads

• 위의 웹 페이지의 Core 부분에서 자신의 운영체제에 맞는 톰캣을 다운받을 수 있습니다. 해당 톰캣의 버전은 8.5.100으로 현재 만들고 있는 자바 웹 앱 프로젝트에서 호환 가능합니다.
• 이제 톰캣을 특정 위치에 압축풀고 인텔리제이에 등록해 줍시다.
• File - Settings를 클릭해줍니다.

• Build, Execution, Deployment 에서 Application Servers를 누르고 + 버튼을 눌러 Tomcat Server을 등록해줍시다.

• 디렉토리를 선택하라는 창이 뜨면 Tomcat Home의 디렉토리를 아까 압축풀었던 톰캣 폴더로 선택하고 OK를 누르면 됩니다. 나머지는 알아서 설정이 됩니다.

• 이제 프로젝트의 오른쪽 상단에서 Edit Configurations 를 눌러 톰캣 웹 서버로 실행하도록 설정해줍니다.

• + 버튼을 누르고 Tomcat Server에서 Local을 클릭합니다.

• 아래에 Warning이 떠있는데, 패키징 된 어떤 웹 앱 파일이 선택이 되어있지 않아서 뜨는 경고입니다.
• Deployment 탭에서 +를 누르고 위와 같이 war을 선택해줍니다.
• Warning이 사라집니다.
• 중요한 것은 Application Context 를 / 로 지정해줍시다.

• 변경 전 상태로 놔두면 http://localhost:8080/{프로젝트명_war}이 해당 웹 앱의 기본 url이 됩니다.
• 그러면 나중에 하이퍼 링크와 같이 url 이동을 지정해줄 때 굉장히 번거롭습니다.
• Apply, OK를 눌러 설정을 저장해줍시다.

• 다시 오른쪽 상단을 보면 톰캣 서버가 지정되었습니다. Run 버튼을 눌러 웹 서버를 실행시킵니다.

• 빨간색 글씨들이 주루룩 올라가는데 Artifact is deployed successfully 가 뜨면 정상적으로 배포가 완료된 것입니다.
• 빨간색 글씨들은 Info 레벨의 로그들이므로 신경쓸 필요가 없고, 로그가 외계어로 표시된다면 톰캣 서버에서 로그의 인코딩이 한글을 지원해주지 않아서 그렇습니다.
• 톰캣 서버 한글 로그와 같은 키워드로 구글에 검색하시면 정상적으로 출력하는 방법들을 다루는 블로그 포스팅들을 확인할 수 있습니다.

• 완료와 동시에 웹 브라우저가 실행되고 8080 포트로 접속이 됩니다.
• 저희가 Welcome이라는 메시지를 index.jsp로 넘겼기 때문에 Welcome 메시지가 보여집니다.
• 테스트를 원한다면 다른 메시지를 넣어서 테스트 해볼 수 있습니다.
• Servlet에서 JSP로는 String 메시지 외에도 객체들을 요청에 담아 넘길 수 있습니다!

 

@WebServlet() 어노테이션에서 더 다양한 URL에 매핑되는 서블릿들을 생성하고, 더 다양한 JSP들을 생성하여 테스트 할 수 있습니다. 또 JSP로 요청을 전달하는 것 외에도 다른 JSP로의 새로운 요청을 생성하기 위해 Forward 대신 response.sendRedirect("{목적지 url}") 메소드를 호출할 수 있습니다.

다음 게시글에서는 Servlet + JSP 웹 앱에서 관계형 데이터베이스와 연결을 설정하는 방법에 대해 설명하도록 하겠습니다.