developer Studying/JSP

[JSP] 서블릿과 JSP 기초 문법

ParkYeseul 2024. 9. 12. 22:08

이번 주에는 jsp를 배웠다.

리액트 정복을 꿈꾸며 . . 기대했는데

백엔드 개발자들은 jsp를 더 많이 사용한다고 하셔서.. 약간 ..더 욕심이 생겼다!

물론 둘다 열심히 잘 할거지만 헤헷

복기 해보면서 중요한 개념을 다시 짚고 넘어가려고 한다!

잊기 전에 빨리 머릿속에 정리해두고자.. 힘겨운 몸을 이끌고 의자에 앉았다.

 

그런데 jsp 생각보다 넘 재밌다. 헷 

나 재능은 없어도 흥미로 재능을 채우려고 한닷!

무튼 . . 얼른 정리하고 책 읽어야지!!

 

 

 


 

🏈서블릿이란?

서블릿이란 자바를 사용하여 웹을 만들기 위해 필요한 기술

클라이언트가 어떠한 요청을 하면 그에 대한 결과를 다시 전송해주어야 하는데, 이러한 역할을 하는 자바 프로그램이다.

 

예를 들어, 어떠한 사용자가 로그인을 하려고 할 때. 사용자는 아이디와 비밀번호를 입력하고, 로그인 버튼을 누른다.

그때 서버는 클라이언트의 아이디와 비밀번호를 확인하고, 다음 페이지를 띄워주어야 하는데, 이러한 역할을 수행하는 

것이 바로 서블릿(Servlet)! 

그래서 서블릿은 자바로 구현 된 *CGI라고 흔히 말한다고 한다.

 

 

1. 사용자(클라이언트)가 URL을 입력하면 HTTP Request가 Servlet Container로 전송

2. 요청을 전송받은 Servlet Container는 HttpServletRequest, HttpServletResponse 객체 생성

3. web.xml을 기반으로 사용자가 요청한 URL이 어느 서블릿에 대한 요청인지 찾는다.

4 .해당 서블릿에서 service메소드를 호출한 후 클라이언트의 GET, POST여부에 따라 doGet() 또는 doPost()를 호출

5. doGet() or doPost() 메소드는 동적 페이지를 생성한 후 HttpServletResponse객체에 응답을 보냄

6. 응답이 끝나면 HttpServletRequest, HttpServletResponse 두 객체를 소멸

 

 

 

🧶JSP?

Java Server Page의 줄임말

서버 측에서 웹페이지를 동적으로 생성하는 기술로

HTML에 자바 코드를 삽입하는 형식으로 개발되고, 동적인 웹페이지 구현에 적합함

MVC(Model, View, Controller)의 View 역할을 담당

jsp 실행과정

 

 

 

 

 

🍟JSP 기본 문법

 

1. 스크립틀릿(Scriptlet)

스크립틀릿은 JSP에서 자바 코드를 직접 삽입할 수 있는 부분

<% %> 안에 자바 코드를 작성한다.

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <title>JSP 기본 문법 예제</title>
</head>
<body>
    <h1>스크립틀릿 예제</h1>
    <% 
        int num1 = 10;
        int num2 = 20;
        int sum = num1 + num2;
    %>
    <p>num1: <%= num1 %></p>
    <p>num2: <%= num2 %></p>
    <p>합계: <%= sum %></p>
</body>
</html>

 

<%= %>: 변수 값을 출력할 때 사용

예를 들어, <%= sum %>은 sum 변수를 HTML에 출력

 

 

 

 

2. 선언문(Declaration)

변수나 메서드를 선언할 때 사용

<%! %> 안에 선언문 작성

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <title>JSP 선언문 예제</title>
</head>
<body>
    <h1>선언문 예제</h1>
    <%
        out.println("현재 시간: " + getCurrentTime());
    %>

    <%! 
        public String getCurrentTime() {
            java.util.Date date = new java.util.Date();
            return date.toString();
        }
    %>
</body>
</html>

 

<%! %>: 메서드를 정의하는 데 사용, 여기서는 getCurrentTime()이라는 메서드를 선언해 현재 시간을 반환한다.

 

<% %>: 스크립틀릿 안에서 메서드를 호출하여 결과를 출력

 

 

 

 

 

3. 표현식(Expression)

표현식은 <%= %> 안에 자바 표현식을 작성하여 값을 출력할 때 사용

자바 코드를 작성하고 그 결과를 HTML로 출력하는 방식이다.

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <title>JSP 표현식 예제</title>
</head>
<body>
    <h1>표현식 예제</h1>
    <p>현재 시간: <%= new java.util.Date() %></p>
</body>
</html>

 

<%= %>: 자바 표현식을 사용해 값을 출력, 여기서는 현재 시간을 출력한다.

 

4. 지시자(Directive)

지시자는 JSP 페이지의 설정을 정의하는 데 사용

대표적인 지시자는 page, include 등이 있다.

<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSP 지시자 예제</title>
</head>
<body>
    <h1>지시자 예제</h1>
    <p>이 페이지의 인코딩은 UTF-8입니다.</p>
</body>
</html>

<%@ page %>: 페이지 설정을 정의하는 지시자

이 예제에서는 콘텐츠 타입을 UTF-8로 설정

 

 

5. 예제

<%@ page contentType="text/html; charset=UTF-8" %>  <!-- page 지시자: 인코딩 설정 -->
<html>
<head>
    <title>JSP 문법 예제</title>
</head>
<body>
    <h1>JSP 기본 문법 예제</h1>

    <%-- JSP 주석: 서버에서 처리될 때 제거됩니다. --%>
    
    <% 
        // 스크립틀릿: 자바 코드를 삽입합니다.
        int num1 = 5;
        int num2 = 10;
        int sum = num1 + num2;
    %>

    <p>num1: <%= num1 %></p> <!-- 표현식: 변수 값 출력 -->
    <p>num2: <%= num2 %></p>
    <p>합계: <%= sum %></p>

    <p>현재 시간: <%= getCurrentTime() %></p> <!-- 표현식: 메서드 호출 결과 출력 -->

    <%! 
        // 선언문: 메서드 정의
        public String getCurrentTime() {
            return new java.util.Date().toString();
        }
    %>
</body>
</html>

 

쓰다보면 익숙해지겠지? 아직은 약간 헷갈리지만 중요한 건! 기초를 탄탄히!

 

 

 

6. 실전예제

지금 배우는 건 간단한 회원가입과 로그인, 회원정보 변경, 로그아웃 이렇게 로직을 알 수 있는

간단한 예제로 실습을 하고 있다.

실제로는 SQL을 연동하여 DAO,DTO를 추가해서 배우고 있지만,

아래 예시는 데이터베이스 없이 회원가입 예제를 학습하고자 이 두 개의 JSP 파일을 가져왔다.

 

 

join.jsp

회원 가입 폼을 입력하는 페이지

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <title>회원 가입</title>
</head>
<body>
    <h2>회원 가입</h2>
    <form action="joinprocess.jsp" method="post">
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="password">비밀번호:</label>
        <input type="password" id="password" name="password" required><br><br>

        <label for="email">이메일:</label>
        <input type="email" id="email" name="email" required><br><br>

        <input type="submit" value="가입하기">
    </form>
</body>
</html>

 

 

joinprocess.jsp

폼 데이터를 처리하는 페이지

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="java.io.*, javax.servlet.*" %>

<html>
<head>
    <title>회원 가입 처리</title>
</head>
<body>
    <h2>회원 가입 결과</h2>
    
    <%
        // POST 요청으로 받은 폼 데이터 처리
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String email = request.getParameter("email");

        // 간단한 유효성 검사
        if (username != null && !username.isEmpty() && password != null && !password.isEmpty() && email != null && !email.isEmpty()) {
            // 회원 정보 출력
            out.println("<p>가입에 성공하셨습니다!</p>");
            out.println("<p>사용자 이름: " + username + "</p>");
            out.println("<p>이메일: " + email + "</p>");
        } else {
            out.println("<p>입력된 정보가 올바르지 않습니다. 다시 시도해 주세요.</p>");
        }
    %>
    
    <a href="join.jsp">다시 가입하기</a>
</body>
</html>

 

 

 

 

🍳게스리의 첨언

뭔가 어려운 것 같으면서도 할만 하네? 라는 생각이 드는 jsp..

아직은 걸음마를 떼는 수준이라서 그렇겠지만, 

집중도 잘 되고 재밌는 요소들이 많다.

프론트와 백엔드를 같이 할 수 있어서 나는 편리하고 좋은 것 같다.

처음엔 복잡한 서버 구조나 파일들의 상관관계가 어려웠지만

확실하게 알고 넘어 갈수록 이해도가 높아진다.

1~6교시가 호로록 지나가는 경험을 덕분에 하고 있다. jsp!!!!!!!!!

react보다 재밌음. 

 

 

 

참고 사이트 

MangKyu's Diary:티스토리

https://codeong.tistory.com/157

@chatgpt

'developer Studying > JSP' 카테고리의 다른 글

[JSP]JSP, Servlet, EL, JSTL 간단한 정리  (1) 2024.09.24