JAVA 풀스택 42일차 - Server(JSP)

JSP(Java Server Pages)

HTML 안에 JAVA 코드를 넣어서 동적으로 웹페이지를 만들어주는 기술

HTML = 화면 작성
Java = 데이터 처리
JSP = Java로 처리한 결과를 HTML 화면에 출력

 

1. HTML 한계

HTML은 화면을 만드는 언어이다.

<h1>게시판</h1>
<p>안녕하세요</p>

위와 같이 사용하면 브라우저에 글자가 나온다.

하지만 HTML은 정적인 화면으로 항상 똑같은 내용만 보여준다.

 

하지만 실제 웹사이트에서는

- 새로 작성된 글

- 사용자가 검색한 글

- 로그인한 사용자의 이름

등 웹사이트의 내용이 바뀐다.

이런 내용은 HTML만으로는 만들기 어렵다.

이런 데이터는 보통 DB에 저장되어 있고 화면에 보여주기 위해서는 JAVA와 같은 프로그램을 통해 데이터를 가져와야 한다.

2. JSP 역할

HTML 화면을 만들면서, 필요할 때 Java 코드를 실행해서 데이터를 가져올 수 있다.

Java로 데이터 처리
+
HTML로 화면 출력

JSP는 Java와 HTML을 연결해서 동적인 웹 페이지를 만드는 역할을 한다.

3. JSP 실행 위치

JSP는 브라우저가 아닌 서버에서 실행된다.

사용자 브라우저
↓ 요청
서버
↓ JSP 실행
Java 코드 처리
↓
HTML 결과 생성
↓ 응답
사용자 브라우저

사용자는 JSP 코드를 직접 보는 것이 아니라, 서버가 JSP를 실행한 뒤 만들어낸 HTML 결과 화면을 보게 된다.

 

4. JSP 흐름

1. 사용자가 브라우저에서 JSP 페이지 요청
2. 서버가 JSP 파일을 실행
3. JSP 안의 Java 코드가 실행
4. 필요한 데이터를 DB나 Java 객체에서 가져옴
5. 가져온 데이터를 HTML에 넣음
6. 완성된 HTML을 브라우저로 보냄
7. 사용자는 완성된 웹 화면을 봄

서버에서 JAVA 코드를 실행한 결과로 화면을 만들어준다.

구분	HTML	JSP
역할	화면 작성	Java로 처리한 결과를 화면에 출력
내용 변화	고정적	데이터에 따라 변경 가능
Java 사용	불가능	가능
DB 연결	직접 불가능	Java 코드를 통해 가능
실행 위치	브라우저가 해석	서버가 실행

5. HTML / JSP 예시

HTML

<p>홍길동님 환영합니다.</p>

항상 [홍길동님 환영합니다.] 출력

JSP

<p><%= userName %>님 환영합니다.</p>

userName 값에 따라 출력되는 값이 달라진다.

 

userName = 홍길동 → 홍길동님 환영합니다.
userName = 김철수 → 김철수님 환영합니다.

6. JSP 주요 문법

6-1 Comment tag

<%-- JSP 주석입니다. --%>

JSP에서 사용하는 주석

6-2 Directive tag

<%@ page contentType="text/html; charset=UTF-8" %>

JSP 페이지의 설정을 작성할 때 사용

<%@ page import="java.util.List" %>

- List 클래스를 사용하기 위해 import

6-3 Declaration tag

<%!
    int count = 0;

    public int add(int a, int b) {
        return a + b;
    }
%>

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

6-4 Scriptlet tag

<%
    String name = "홍길동";
    int age = 20;
%>

JSP 안에서 Java 코드를 실행할 때 사용

6-5 Expression tag

<%= name %>

Java 변수나 메서드 결과를 화면에 출력할 때 사용

<p><%= name %>님 환영합니다.</p>

 

name이 '홍길동'이라면 홍길동님 환영합니다. 출력

 

태그 이름	표기법	역할
Comment tag	<%-- 주석 --%>	JSP 주석
Directive tag	<%@ 지시자 %>	JSP 페이지 설정
Declaration tag	<%! 선언문 %>	변수 / 메서드 선언
Scriptlet tag	<% Java 코드 %>	Java 실행 코드 작성
Expression tag	<%= 표현식 %>	값을 화면에 출력

JSP 코드 리뷰

1. index.jsp

처음 접속하는 메인 페이지 역할

<h1>index</h1>

<h3><a href="./mylist.jsp">목록</a></h3>

링크 클릭시 mylist.jsp 로 이동한다.

사용자가 목록 클릭
↓
mylist.jsp 요청
↓
게시판 목록 화면으로 이동

2. mylist.jsp

게시글 목록을 출력하는 JSP 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

JSP 페이지에서 Java를 사용하고, 문자 인코딩을 UTF-8로 설정한다는 것을 의미

2-1 request / response 인코딩 설정

<% request.setCharacterEncoding("UTF-8"); %>
<% response.setContentType("text/html; charset=UTF-8"); %>

사용자가 보내는 값과 브라우저에 출력되는 값의 문자 인코딩을 UTF-8로 맞추는 코드

코드	의미
request.setCharacterEncoding("UTF-8")	요청 데이터 한글 처리
response.setContentType(...)	응답 화면 한글 처리

3. JSP에서 JAVA 클래스 import

<%@ page import = "com.my.dao.MyBoardDao" %>
<%@ page import = "com.my.dto.MyBoardDto" %>
<%@ page import = "java.util.List" %>

import	역할
MyBoardDao	DB 조회 메서드 사용
MyBoardDto	게시글 데이터 저장 객체 사용
List	게시글 여러 개 저장

4. JSP에서 JAVA 코드

JSP 안에서 Java 코드를 작성할 때는 <% %>를 사용

<%
    MyBoardDao dao = new MyBoardDao();
    List<MyBoardDto> list = dao.selectAll();
%>

1. MyBoardDao 객체 생성
2. selectAll() 메서드 실행
3. DB에서 게시글 전체 조회
4. 조회 결과를 List<MyBoardDto>에 저장

selectAll()은 MYBOARD 테이블의 데이터를 조회하고, 조회 결과를 MyBoardDto 객체로 만들어 List에 담아 반환

5. MyBoardDto

게시글 하나의 데이터를 저장하는 클래스

private int myno;
private String myname;
private String mytitle;
private String mycontent;
private Date mydate;

DB에서 조회한 게시글 한 줄이 Java에서는 MyBoardDto 객체 하나로 저장

6. MyBoardDao

DB에 접근해서 게시글 데이터를 조회하는 클래스

String sql = " SELECT * FROM MYBOARD ORDER BY MYNO DESC ";

 

MYBOARD 테이블의 모든 데이터를 조회한다.
게시글 번호가 큰 순서대로 정렬한다.

6-1 DAO 조회 흐름

DB 연결
↓
SQL 준비
↓
SQL 실행
↓
ResultSet으로 결과 받기
↓
DTO 객체 생성
↓
List에 저장
↓
DB 종료
↓
List 반환

while(rs.next()) {
    MyBoardDto dto =
        new MyBoardDto(
            rs.getInt(1),
            rs.getString(2),
            rs.getString(3),
            rs.getString(4),
            rs.getDate(5)
        );

    res.add(dto);
}

7. JSP에서 table로 출력

DB에서 가져온 list를 HTML table에 출력

<table border="1">
    <tr>
        <th>NO</th>
        <th>NAME</th>
        <th>TITLE</th>
        <th>DATE</th>
    </tr>

- 테이블의 제목 줄

7-1 반복문으로 게시글 출력

<%
    for(int i=0; i<list.size(); i++){
%>
    <tr>
        <td><%= list.get(i).getMyno() %></td>
        <td><%= list.get(i).getMyname() %></td>
        <td><%= list.get(i).getMytitle() %></td>
        <td><%= list.get(i).getMydate() %></td>
    </tr>
<%
    }
%>

<%= %>는 값을 화면에 출력할 때 사용