📃 요약
실무에서는 MVC 디자인 패턴 속해서 스프링부트를 사용해 코딩을 진행함. 파일관리 시 파일을 용도에 맞게 정리하듯이 MVC 디자인 패턴도 패키지 및 클래스를 용도에 맞게 분류해서 코딩을 진행함
고전적인 개발방식인 JSP 가 있으며 과거에는 스크립트릿을 이용해서 코딩했으며, 요즘은 el / jstl 표현식을 이용해서 코딩하고 있음
요소 기술 :
– Basic : java & spring boot & jsp
📃 기술 구현
스펙 :
- intellij - java - spring boot - jsp
📃 MVC 디자인 패턴
1. M : Model
- 정의 : Entity, Service, Repository(DAO), DTO 등을 사용하는 영역
- 역할 : 정보의 저장/검색이 목적인 순수 클래스
1) Entity : Value Object(정보 저장 목적) 와 유사, 정보저장이 목적인 클래스
속성(필드)/생성자/Setter/Getter 만 사용함
DB 테이블의 데이터를 객체에 저장함 (엔티티 == 테이블)
2) Service : 업무 로직이 정의된 함수들이 있는 클래스
3) Repository : 실제 DB 에 접속해서 CRUD 를 하는 함수들이 있는 클래스
4) DTO : Entity 의 속성을 가공(확장(속성의 개수 증가), 축소(개수 감소)) 할 목적으로 사용되는 클래스
2. V : View
- Frontend(클라이언트)의 화면을 의미하면 주로 Vue / React / JSP 등을 사용함 - 화면에 데이터를 표시하는 영역
3. C : Controller
- View 와 Service 를 연결해주는 역할을 담당하는 클래스 - View의 URL 를 통해서 화면과 연결되고 Service 의 결과를 다시 View 에게 전달함
📃 어노테이션 정의 :
- 주로 특별한 기능을 부여하기 위해 사용 - 클래스나 함수(메소드), 변수 위나 앞에 추가하여 사용함 - 자동 Setter/Getter 생성, 생성자 생성 등 - 장점 : 코드량이 감소하고, 유지보수가 쉬우며, 생산성이 증가함
📃 JSP :
- HTML 태그를 확장해서 화면에 표시하는 언어로서 벡엔드 자바와(주로 스프링부트) 연결하고 결과를 표시할 수 있음
- 사용방법으로 el 표현식과 jstl 표현식을 이용해서 화면에 표시함
- 과거에는 스크립틀릿이라는 표현식을 사용했으나 가독성이 저하되고 유지보수성이 떨어져서 현재는 위의 방법으로 코딩되고 있음
- JSP 는 자바언어가 기본적으로 지원됨
1) 과거에는 서블릿이라는 자바 클래스를 이용해서 웹 브라우저에 결과를 출력했으나 코딩이 길고 가독성이 현저히 떨어져
html 태그와 같이 쉽게 사용이 가능한 JSP 언어가 개발됨
2) JSP 는 html 태그가 같이 사용가능하고 내부적으로 서블릿이라는 클래스로 변경되어(컴파일) 저장됨
3) 서블릿이 웹브라우저에 출력되기 위해서는 서블릿을 인식하는 WAS 프로그램이 필요하고 대중적이고 무료인 톰켓이 주로 사용됨, 스프링부트에 내장되어 있음(실행버튼 클릭하면 자동으로 톰캣이 실행됨)
📃 JSP el 표현식 & jstl 표현식 :
0) JSP 환경설정 : 스프링부트 프로젝트 생성시 아래와 같이 설정하면 됨
- build.gradle 파일 : 아래 추가
// jsp 라이브러리 추가 implementation 'org.apache.tomcat.embed:tomcat-embed-jasper' // 추가 implementation 'jakarta.servlet:jakarta.servlet-api' //스프링부트 3.0 이상 implementation 'jakarta.servlet.jsp.jstl:jakarta.servlet.jsp.jstl-api' //스프링부트 3.0 이상 implementation 'org.glassfish.web:jakarta.servlet.jsp.jstl' //스프링부트 3.0 이상
- application.properties 파일 : 아래 추가
# jsp 파일 경로 지정 : jsp 폴더 경로 추가
spring.mvc.view.prefix=/WEB-INF/views/
- 폴더경로 :
webapp
-> WEB-INF
-> views
-> xxx.jsp
0) JSP 문서 만들기 : page 지시자를 첫머리에 넣고 문서파일명을 아래와 같이 만들면 JSP 를 사용할 수 있음
페이지 지시자
sample.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Hello JSP & Spring boot
</body>
</html>
1) el 표현식
- 화면에 출력하는 JSP 기본 표현식 - 문자열, 숫자 등 자바의 모든 자료형을 출력가능 (int, double, boolean, 배열 등) - 스프링부트의 컨트롤러 함수에서 model 의 키이름(변수명)으로 전달받아 화면에 출력할 수 있음
사용법 :
${변수명}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<%-- bootstrap css cdn --%>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<%-- TODO: spring 에서 전송한 값으로 사칙연산 , 논리연산 해보기 --%>
<div class="container p-3">
<h2>산술연산자</h2>
<div class="ms-3 mt-3">
<%-- TODO: 문자열로 생긴 숫자는 자동으로 형변환 됨 (사칙연산시) --%>
<%-- jsp : java server page , 자바 문법 모두 사용가능 --%>
<%-- jsp(.jsp) -> servlet(.java) --%>
<p>문자열 : ${"문자열 출력됩니다."}</p>
<%-- <p>문자열 : ${"문자열 출력됩니다." + "문자열 붙이기는 안됩니다."}</p>--%>
<p>${"문자열 출력됩니다."} ${"이렇게 하면 됩니다."}</p>
<p>덧셈 : ${strNum + 10}</p>
<p>뺄셈 : ${strNum - 10}</p>
<p>곱셈 : ${strNum * 10}</p>
<p>나눗셈 : ${strNum / 10}</p>
<p>나머지 : ${strNum % 10}</p>
<p>숫자 연산 : ${iNum + 10}</p>
<p>논리합 : ${bVal || false}</p>
<p>논리곱 : ${bVal && false}</p>
<p> 같음 : ${iNum == 100}</p>
<p> 같지않음 : ${iNum != 100}</p>
<p> 보다큼 : ${iNum >= 100}</p>
<p> 보다작음 : ${iNum <= 100}</p>
<p>조건(3항) : ${(iNum == 100)? "100임" : "100이 아님"}</p>
<%-- TODO: empty(빈) : 변수의 값이 비었으면(null, 0, "") true, 아니면 false --%>
<p>empty : ${empty iNum}</p>
<p>not empty : ${not empty iNum}</p>
</div>
</div>
</body>
</html>
2) jstl 표현식
- 반복문/조건문 등을 JSP 에서 사용 가능하게하는 표현식 - 다양한 라이브러리가 있으며 JSP 맨 위에
(1) 반복문
- c:forEach => 반복문 태그 - 여는 태그 / 닫는 태그 사이의 태그가 반복됨 - 배열의 끝까지 자동으로 반복됨 - 배열의 첫번째 값부터 순차적으로 꺼내서 일반변수에 저장하고 그것을 화면에 반복해서 출력함 - 자바의 향상된 for 문 및 vue 의 v-for 문과 비슷함
사용법 : <c:forEach var="일반변수" items="${배열}">
태그
</c:forEach>
- 중간의 태그가 반복됨
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%--TODO: jstl 표현식 사용을 위한 import --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<%-- bootstrap css cdn --%>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>예제2 : URL 매개변수를 ArrayList 로 View 에 전달</h2>
<table class="table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">name</th>
</tr>
</thead>
<tbody>
<tr>
<%-- TODO: jsp 반복문 : jstl 표현식 --%>
<%-- 사용법 : <c:forEach var="일반변수" items="${배열}"> --%>
<c:forEach var="data" items="${list}">
<td>${data}</td>
</c:forEach>
</tr>
</tbody>
</table>
</div>
</body>
</html>
(2) 조건문
- 조건식이 참이면 태그가 화면에 보임 - JSP 조건식은 if문과 choose문이 있음 - if 문은 단독으로 사용하고 , else if/ else 가 없음 - choose 문은 else if 와 else 에 해당되는 when / otherwise 태그가 있음
2-1) if 문
사용법 : 사용법 : <c:if test="${조건식}">실행문</c:if>
2-2) choose 문
사용법 <c:choose>
<c:when test="조건문">태그</c:when>
...
<c:otherwise>태그</c:otherwise>
</c:choose>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%--TODO: jstl 표현식 사용을 위한 import --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<%-- bootstrap css cdn --%>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<%-- TODO: 매개변수(파라메터) 배열 전달받아 출력하기 --%>
<h2>매개변수(파라메터) 배열 전달받아 출력하기</h2>
<p>${name}</p>
<p>${color}</p>
<p>${kind}</p>
<%-- TODO: if 조건문으로 출력하기 : jstl 표현식, else 없음 --%>
<%-- 사용법 : <c:if test="${조건식}">실행문</c:if> --%>
<c:if test="${name == '삼식이'}">
<p>삼식이가 맞습니다.</p>
</c:if>
<%-- TODO: choose 조건문으로 출력하기 , else 있음 --%>
<%-- 사용법 <c:choose> --%>
<%-- (if, else if): <c:when test="조건문">실행문</c:when> --%>
<%-- (else): <c:otherwise>실행문</c:otherwise> --%>
<%-- </c:choose> --%>
<c:choose>
<c:when test="${color == 'brown'}">
갈색입니다.
</c:when>
<c:when test="${color == 'yellow'}">
노란색입니다.
</c:when>
<c:otherwise>
다른색입니다.
</c:otherwise>
</c:choose>
</div>
</body>
</html>