준비중..
06 JSP: 헬로 월드!
# JSP 동적 웹 프로그래밍
우리는 앞서 프론트엔드와 백엔드에 대해 배웠다. 그리고 프론트엔드 영역 개발을 Bootstrap통해 연습해왔다. 이제는 백엔드다!
## 목차
1. 학습 목표
2. 정적 페이지와 그 한계
3. 동적 페이지의 등장
4. JSP란?
5. JSP 따라하기
6. 연습 문제
## 학습목표
+ 정적 페이지와 동적 페이지의 비교
+ JSP의 동작 원리 이해
+ HTML내 Java문법 삽입하기
## 정적 페이지와 그 한계
정적인 페이지란, 출력 내용이 항상 일정한 페이지다.
앞서 Bootstrap로 만들었던 웹 페이지는 모두 정적 페이지다. 직접 html 코드를 수정하지 않는 한 항상 동일한 내용을 보여준다. 인쇄물을 고치면 다시 출력해야 하듯 말이다.
이러한 정적 페이지는 상황에 따라 유연한 대처가 불가능하다. 예를 들면 사용자별 인사말이라든지, 메일 등의 알림이 생성되었을 때 그 결과를 신속하게 보여줄 수 없다.
## 동적 페이지의 등장
정적 페이지의 한계로 인해 동적 페이지란 개념이 등장한다. 동적 페이지는 주어진 조건에 따라서 페이지를 자동 생성한다. 아래 같이 새로운 메일 또는 받은 쪽지 등의 내용을 바로바로 보여주는 있는 것은 동적 페이지를 사용했기 때문이다.
어떻게 동적 페이지를 만들 수 있을까? 계속해서 알아보자.
## JSP란?
JSP란 Java계열의 동적 페이지작성 언어이다. 이는 HTML페이지에 Java문법을 사용 가능하게 한다.
### JSP 동작원리
JSP는 어떻게 동적 페이지를 생성할까?
기본적으로 웹 서비스는 클라이언트/서버의 요청과 응답으로 동작한다 배웠다.
여기서 더 들어가면 서버 내부는 두 개의 영역으로 나뉜다.
+ 웹 서버
+ 웹 컨테이너
웹 서버는 정적 페이지 요청에 대한 응답을 담당하고, 웹 컨테이너는 동적페이지를 정적 페이지로 재생성 한다. 레스토랑에 웨이터와 주방장이 역할을 분담하듯 말이다.
주문(요청)이 들어왔을 때, 이미 완성된 요리(페이지)가 있다면 웨이터(웹 서버)는 서빙(응답)을 할 것이고, 요리(페이지)가 아직 없다면 주방장(웹컨테이너)은 요리(페이지)를 만들 것이다.
그럼 실습을 통해 개념을 체득해보자.
## JSP 따라하기
### 개발환경 만들기
먼저 개발환경을 만들자.
+ 참조링크: http://cloudstudying.kr/lectures/111)
설치를 정리하면 아래와 같다.
1. JDK 설치
2. 환경변수 설정
3. STS 설치
4. Tomcat 설치 및 연동
5. PostgreSQL 설치
### 헬로 JSP
그럼 헬로월드를 찍어볼까? STS를 실행하면 다음 화면이 뜬다.
새 프로젝트 생성 > Dynamic Web Project를 클릭한다.
프로젝트 이름을 작성하고 Finish!
그 다음 JSP 파일을 생성한 뒤,
`hello.jsp`를 다음과 같이 작성한다.
WebContent/hello.jsp
```
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Hello JSP</title>
</head>
<body>
<div class="jumbotron">
<h1>헬로 JSP!</h1>
<!-- 반복문 -->
<% for (int i = 0; i < 3; i++) { %>
<p>hello.jsp</p>
<% } %>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<Script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<Script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<Script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
```
아래와 같이 나왔다면 성공!
## 연습 문제
아래와 같은 시간정보를 JSP페이지로 출력하자.
> 구글링 힌트: JSP 시간출력
## 요약
1. 동적 페이지는 요청을 받으면 새롭게 해석된다.
2. JSP는 HTML문서 내부에 Java문법을 사용하는 기술이다.