[JSP/스프링] - JSP의 기초

*JSP의 개요

- JSP의 특징과 구성요소

JSP의 특징

• HTML 페이지에 자바 코드 직접 사용
• 서블릿 컨테이너에 의해 관리되는 내장객체의 생명주기를 이용해 페이지 간 속성 관리
• 커스텀 태그 기술을 사용해 코드를 태그화(action, JSTL 등)
• EL - Expression Language를 통해 데이터 표현

 

JSP의 구성요소

• 지시어(Standard directives)

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

• 액션(Standard Action)
• 템플릿 데이터(Template Data)
• 스크립트 요소(Script Element)
• 커스텀 태그(Custom Tag)와 EL(Expression Language)

 

 

 

---

 

 

 

- JSP의 동작 과정

JSP가 서블릿으로 컴파일되고 실행되는 과정

① 'hello.jsp' 소스코드를 작성하고 웹 애플리케이션 배포

② 클라이언트 요청에 컨테이너는 해당 .jsp의 클래스 변환 여부 확인

③ 변환되지 않았다면 'hello_jsp.java' 파일 생성하고 .class로 컴파일

④ jspInit() 메서드를 통해 서블릿 실행

⑤ _jspService() 메서드를 통해 클라이언트 요청 처리

⑥ 컨테이너 종료 혹은 관리 도구에 의해 서블릿 jspDestroy() 호출로 종료

 

 

 

---

 

 

 

- JSP의 장단점

 

JSP 장점

• HTML 파일에 자바 기술을 거의 무한대로 사용 가능 / 비교적 쉽게 프로그래밍 가능
• 커스텀 태그 라이브러리 등 확장 태그 구조 사용 가능
• 서블릿으로 변환되어 실행되므로 서블릿 기술의 장점 모두 가짐
• MVC 패턴, 스프링 프레임 워크 등 잘 설계된 구조 적용 가능 -> 개발 생산서어 향상, 성능 보장
• 모든 개발이 서버에서 이루어지므로 개발의 집중화를 통한 효율 오름

 

JSP 단점

• 화면 구성요소를 변경하면 JSP -> 자바 -> 클래스 -> 서블릿 실행과정을 거치므로 개발 과정에서 사소한 UI 변경일지라도 매번 확인하는 데 시간 소요됨
• 개발자와 디자이너 간 역할 분담에 제약이 있음
• JSP 파일의 화면 디자인 확인에도 반드시 서블릿 컨테이너의 실행이 필요

 

 

---

 

 

*JSP 지시어

- 지시어란?

지시어(Directives)

• JSP 파일의 속성을 기술하는 요소
• JSP 컨테이너에 해당 페이지를 어떻게 처리해야 하는지를 전달하는 내용을 담음
• 지시어는 크게 page, include, taglib 으로 나눌 수 있으며 각각 속성이 다름
• 지시어 기본 형식

<%@ 지시어 속성="값" %>

 

 

---

 

 

- page 지시어

page 지시어

• 현재 JSP 페이지를 컨테이너에서 처리(서블릿으로 변환)하는 데 필요한 각종 속성을 기술
• 소스코드 맨 앞에 위치하며 이클립스에서 JSP 파일을 생성할 때 자동으로 생성됨
• page 지시어의 구문과 사용 형식

• page 지시어
  • language : 현재 페이지의 스크립트 언어 지정
  • contentType : 현재 페이지의 파일 형식 지정하는 속성 (클라이언트 요청에 응답할 때 전달하는 HTTP 헤더 정보가 됨)
  • pageEncoding : JSP 파일을 컨테이너가 처리할 때 사용하는 캐릭터 인코딩을 지정하는 속성 (올바른 한글 처리를위해 UTF-8로 지정)
  • import : JSP 파일 내에서 자바 코드(스크립트릿)를 직접 사용하는 경우 일반 자바 코드와 마찬가지로 클래스에 대한 패키지 import가 필요
  • errorPage: 현재 JSP 요청 처리 중에 에러가 발생하는 경우 서버 에러를 클라이언트에 전달하지 않고 별도의 페이지에서 처리하기 위한 속성 (JSP에서 에러 페이지 설정을 넣는 것보다는 서버 설정을 사용하는 것을 권장)

 

 

---

 

 

- include 지시어

include 지시어

• 다른 파일을 포함하기 위한 지시어
• 사용된 위치에 특정 파일(html, jsp)을 불러옴
• 컨테이너에서는 포함된 파일을 하나로 처리하며 자바소스를 생성한 뒤 서블릿으로 컴파일 함 ( include에 사용된 파일의 내용을 모두 포함한 하나의 서블릿 코드로 생성되어 컴파일됨)
• 포함되는 파일의 경우 해당 파일을 직접 요청해서 실행하는 것이 아니라면 개별 구성요소를 갖출 필요는 없음(page 지시어, HTML 기본 태그 구성요소 등)
• include 지시어는 원하는 위치에 자유롭게 사용 가능
• include 지시어 사용 형식

 

 

하나의 JSP 파일(화면)이 실제로는 여러 파일의 조합으로 구성되는 경우 

 

• include 액션
  • include 지시어와 비슷한 목적으로 사용할 수 있는 include 액션도 있음
  • 액션의 경우 지시어와 달리 각각의 파일을 실행한 결과를 포함하며 보여주는 구조

 

 

---

 

 

 

- taglib지시어

taglib 지시어

• JSP의 태그 확장 매커니즘인 커스텀 태그를 사용하기 위한 지시어 
• taglib 지시어의 구문과 사용 형식

• taglib 지시어
  • uri : 태그 라이브러리 위치로 태그를 정의하고 있는 .tld 파일 경로를 나타냄
  • tagdir : 태그 파일로 태그를 구현한 경우 태그 파일 경로 나타냄
  • prefix : 해당 태그를 구분해서 사용하기 위한 접두어

 

태그 파일로 커스텀 태그를 구현한 예시

• [WEP-INF/tags] 폴더에 있는 'prinData.tag' 파일에 태그에서 처리할 내용이 작성되어 있음

 

 

 

---

 

 

 

*템플릿 데이터와 스크립트 요소

- 템플릿 데이터란?

템플릿 데이터

• JSP의 화면 구성요소를 의미
• 시작 부분의 page 지시어를 제외하면 JSP 파일의 전반적인 구조는 HTML의 문서 구조를 따름 => 따라서 일반적인 HTML 파일처럼 CSS, 자바스크립트 사용 가능
  • 기본적으로 HTML5 사용하며 문서 구조 중심으로 간략하게 작성하고 데이터 표현은 JSTL, EL 사용
  • 화면 디자인을 위해 자체적인 CSS 정의 이외에도 Bootstrap과 같은 라이브러리를 사용할 수 있음
  • REST API 호출을 위해 Axios 같은 자바스크립트 라이브러리 역시 사용할 수 있음
• 주의할 점 : React, Vue와 같은 자바스크립트 요소는 프론트엔드 개발 기술로 JSP와 함께 사용하지 않음

 

 

---

 

 

 

- 스크립트 요소

스크립트 요소

• JSP는 HTML과 자바 코드를 섞어 사용할 수 있는데 이때 사용되는 자바 코드를 의미
• 자주 쓰이는 스크립트 요소 : <%! %> , <%= %>, <% %>, <%-- --%>

 

<%! %>

• 선언(Declaration) 태그
• JSP가 서블릿 코드로 변환될 떄 _jspService() 메서드 안에 들어가게 되므로 JSP에서는 일반 자바 코드와 달리 멤버 변수나 메서드 선언은 기본적으로 불가능 
• 멤버 변수나 메서드 선언이 필요하다면 사용할 수는 있으나 권장하지는 않음

 

<%= %>

• 표현(Expression) 태그
• 웹 브라우저를 통해 클라이언트에 전달될(HTML 응답에 포함될) 자바 표현식을 포함
• out.println()의 인자로 적합한 모든 자바 코드가 가능
• 사칙연산, 메서드 호출, 변숫값 출력 등에 사용됨
• EL로 대체 가능

 

 

<% %>

• 스크립트릿(Scriptlet) 태그
• 모든 자바 코드의 사용 가능 ( 단, _jspService() 메서드 내에 포함되는 것 고려해야 함)
• 서블릿 코드로 변환될 때 모든 HTML은 out.write() 형태로 변경됨
• HTML과 스크립트릿을 중간에 섞어 사용하는 것도 가능
• MVS 패턴 적용과 JSTL + EL로 대체 가능

 

로그인 페이지에서 입력한 이름을 가져와 화면에 출력한 다음 사용자 목록을 for문을 이용해 출력하는 코드

• 주의할 점 : for문에서 out.println()을 이용해 이름과 이메일을 출력하지 않고 표현 태그를 사용함

 

• out.println()을 사용한다면 <table>...</table> 부분만 수정