2025.4.4 39일차
server 2일차
JSP1 프로젝트 만들때!!!
6.0인지, 아파치 톰캣 잘 확인하고
이건 필수로
EL JSTL
index.html
다시 이클립스 와서 main.src 폴더에서 eljstl.class 파일 만들기
<서블릿이 되려면>
1.상속부터 받기
2.어노테이션 : 웹서블릿 : 매핑 태그들 대신 써주는 a태그 누르면 eljstl이 매핑되서
수행해주길 바라는거임
소괄호 () 필수로 작성 & "/"필수!!!!!
=> 내가 원하는 화면 창 보여주려면 views.jsp 파일
http://localhost:8080/el_jstl?name=홍길동&age=20 이 부분을 쿼리스트링으로
작성해주어야함!!!
jsp와 el표현식
jsp 표현식은 age를 안썻을때 null이뜨고
el 표현식은 age를 안썻을때 그냥 공백이뜸
jsp: get 으로 파라미터를 가져옴
el : 단순출력 : get이라는 단어 안씀 파람.key값!!!
나이가 20미만이면 성인이 아닙니다.20이상이면 성인입니다 출력
* 단 : age라는 파라미터가 없는 경우에는 exception 발생!!!!
jsp에서 사용하는 스크립틀릿에서는 age가 있다고 가정하고 , if문을 쓰겠다고 가정한건데
파라미터가 없으니 exception발생!
JSTL 구문
1.extends
2.어노테이션() 웹서블릿 (매핑 태그들을 대신 써주는)
3.서버는 새로 만들수잇음.
4. 항상 프로젝트명에서 run as run on server
5. 응답 잘 안뜨면 ctrl+shift+r : dom 다시 불러오기
회원가입
index.html
controller->signUp servlet
- httpservlet상속 & 어노테이션 필수!!!!
어노테이션 안에 들어오는 주소는 반드시/로 시작해야하고, 폼태그 액션과 같아야함!!!
그리고 post방식 이니까 get post사용해야함!!!
signUp result .jsp
- lib 폴더에 jstl있는지 확인하기
- 그다음 상단에 지시자태그로
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>사용한다고
적어주기!!
그래야 태그라이브러리에서 c로 시작하는 태그를 쓸수있게 되는것임!!
get post타입이라서 주소창에 안보임!!!
비밀번호와 비밀번호 확인이 같아서 가입 성공!
비밀번호와 비밀번호 확인이 같지 않을땐 가입 실패!
다이나믹프로젝트 : jsp2
context root :/로 바꾸기 필수!!!!
context root :/로 못바꿨을시에!!
여기서 바꿀수 있음!!!web.xml파일을 안만들었을땐
여기서 만들수있음!!(지금은 만든상태라서 선택안되는것임)
web.xml
위에서 부터 순서대로 읽는데, 오늘은 index.jsp파일로 만들어 보겠다!!
index.html과 index.jsp파일의 차이
- html : 정적 페이지 : 내가 만들어둔 형태 그대로 뜨는것!!!
- jsp : el + jstl까지 사용가능 : 서버에서 가져온거 출력가능 => 동적페이지
ex) 네이버 같은 경우도 새로고침 할때마다 새로 보여줌 = jsp파일 일거다.
index.jsp
form태그 action에 2레벨로 적힌 주소를 어노테이션 내부에 적어주기
controller-> ELTestServlet1
/WEB-INF/views/el/test1.jsp 만들어서 넘어가기
test1.jsp
강력 새로고침 : ctrl+ shift+ r
EL은 자동형변환을 자동 수행 해준다.
el은 문자열, 숫자 비교 둘다 == 사용한다.
내가 입력한 값은 지드래곤 사랑해 != abc
0818 != 100
88.0818!= 3.14니까 false false false 뜸!!!
주소창을 abc,100,3.14로 수정하니까 true,true,true로 뜸!!!
- HTML에서 얻어온 데이터는 모두 String 하지만 EL에서 연산되는 자료형이 다를 경우
자동으로 자료형 반환 진행해서 비교해준다!
"100"이 아니고 100이여도 잘 읽힘!!
같은 key값을 지닌 파라미터 얻어오기
a,b,c를 모두 체크함!!
param.check: ${param.check}는 여러개일 경우 무조건 제일 처음의 1개만 얻어옴!!
paramValues.check : ${paramValues.check}: 배열의 주소
paramValues.check[0]:${paramValues.check[0]} paramValues.check[1]:${paramValues.check[1]} paramValues.check[2]:${paramValues.check[2]}는 배열의 값!!
내가 표시한 ABC옵션 다 볼수잇는 배열!
Servlet/JSP 범위 (scope)별 내장객체 + EL 사용법
index.jsp
a태그는 무조건 get방식임!!!!!
eltestServlet2클래스 (a태그 클릭시 요청을 받을 서블릿 클래스 만들기!!!)
- httpServlet extend
- 어노테이션 webServlet() 소괄호 안에 "/el/scope"
둘이 같아야함!!! 그리고 a태그 요청은 get방식이니까 do get을 오버라이딩 하기!!
요청처리 : scope종류는 4가지
- 1.page scope -> servlet단에서는 이용못함 =>위임받음 jsp에서만 확인가능(딱 1페이지)
다음페이지에서는 유효하지않음 사라짐.
-
2.request scope -> 우리가 지금까지 이용함
요청받은 servlet과 요청이 위임된 JSP에서 유지되는 객체
-
3.Session scope - 클라이언트가 서버에 첫 요청시 서버쪽에 생성되는 객체
클라이언트가 브라우저를 종료하거나 지정된 세션 만료시간이 지나면 사라짐 -> 위 상황이 아니면 계속 유지되는 객체만약에 로그인을 session에 넣지않고 다른데(오디더라)에 넣으면 페이지 이동마다
로그인 풀릴것임 -
4.application scope -서버 전체에 1개만 존재하는 객체
모든 클라이언트가 공유
서버 시작시 생성, 서버 종료시 소멸
페이지 스코프는 우리 jsp에서 못만드니까 2번부터 만들어보자.
request : set attribute : 속성을 세팅 : 키와 밸류
콘솔창에서 출력가능!!
그리고 forward해보자!
응답처리
-> scope.jsp로 forward해서 확인해보자 scope를 !
scope.jsp
eltestcheck : 클래스
extends. 어노테이션 해주기!!
a태그라서 do get!
ELTESTServlet2에서 유효했음, scope.jsp에서 유효했음
ELTESTCheck 에서 유효하지 않아서 null이라고 뜸!
위임 위임 위임 위임!!!!
request scope는 scope.jsp까지만 유효함
확인해보니 다음장에서 안열림
세션보다 리퀘스트가 더 작은범위다
여기서는 다 열림
한번더 들엉가면 소멸되서 없음!!
check.jsp
scope범위 이미지로 정리
page scope -> servlet단에서는 이용못함 =>위임받음 jsp에서만 확인가능(딱 1페이지)
다음페이지에서는 유효하지않음 사라짐.
request scope -> 우리가 지금까지 이용함
요청받은 servlet과 요청이 위임된 JSP에서 유지되는 객체
JSP내장 객체와 우선순위
req.setAttribute("menu", "짬뽕(request)");
session.setAttribute("menu", "짜장(session)");
application.setAttribute("menu", "볶음밥(application)");
page.scope는 scope.jsp파일에서 설정 가능
나머지는 ELTESTSERVLET2에서 세팅함.
한가지 메뉴에 전부다 넣었다면 그냥 메뉴를 출력시
우선순위가 가장 큰 : page에 적힌 짬짜면이 나오게 됨 menu :짬짜면
page scope가 없다면 requeset꺼가 뜨겠지.
JSTL간단히 다뤄보기
index.jsp
JSTLServlet
- extends
2.어노테이션 내부 주소 값 같게!
3.a태그는 get방식이니까 do get!
1. 변수 선언.
test.jsp
2. 변수 제거
- 변수명을 지정 안하면 전부 제거.
scope = session 으로 적어주었더니 session 삭제!!
scope를 적어주지 않았더니 전부 삭제!!!
3.단일 조건문
- -JAVA 의 if 문을 태그 형태로 만든것
- 주의사항 : else 구문이 없다.
[속성]
1)test : 조건식을 작성하는 속성
- 작성법 1: 대입되는 값은 무조건 EL구문으로 작성 !
- 작성법 2: 작성된 조건식의 결과는 무조건 T/F
밖을 '' 로 바꾸고 안에는 "월요일"로 문자열
월요일 너무 싫다!!!!
4. 연속된 조건문
c:choose, c: when, c: otherwise는 세트로 같이 다녀야함!!
c: choose 문 내부에는
html 주석 작성시 오류 발생!! jsp용 주석 사용해야함!
13살: 어린이
17살 : 청소년
25살 : 성인
age가 주소값에 없을때
age가 없습니다.
향상된 for문 + 추가 기능
1) var : 현재 반복 횟수에 해당하는 변수 (int i)
2) begin : 반복 시 var 시작 값
3) end : 반복이 종료될 var 값
4) step : 반복 시 마다 var의 증가 값 (기본값 1)
5) items : 반복 접근한 객체(배열, 컬렉션 객체)
6) varStatus : 현재 반복 상태와 관련된 정보를 제공하는 변수 선언
varStatus="변수명" -> c:forEach 구문 내에서 "변수명"을 통해 원하는 값을 얻을 수 있다.
- varStatus에서 제공되는 값
- current : 현재 반복 횟수(현재 var 값)또는 현재 반복 접근 중인 객체(컬렉션/배열 요소)
- index : 현재 인덱스값 반환 (0부터 시작)
- count : 현재 몇바퀴째인지 반복 횟수 반환 (1부터 시작)
- first : 첫 번째 반복이면 true, 아니면 false
- last : 마지막 반복이면 true, 아니면 false
5-1) 일반 포문처럼 사용하기
1~6까지 1씩 증가하는 for문
6~1까지 1씩 감소하는 for문
7-i를 해야지 h6~h1이 되니까 머리를 말랑하게 해야해!!!
5-2) 일반 for문 + 컬렉션 List 사용하기
name list = []
fn:length(nameList) = 10
1)짱구,2)훈이... 이런식으로 하고싶으니까 i=0 부터, (인덱스번호니까 0부터 시작.)
end는 name list length의 -1 까지! 1씩 증가!
5-3) 향상된 for문 + List 사용하기
varstatus를 사용하면 current,index,count,first,last를 쓸수 있음!
current : 현재 반복 횟수(현재 var 값)또는 현재 반복 접근 중인 객체(컬렉션/배열 요소)
index : 현재 인덱스값 반환 (0부터 시작)
count : 현재 몇바퀴째인지 반복 횟수 반환 (1부터 시작)
first : 첫 번째 반복이면 true, 아니면 false
last : 마지막 반복이면 true, 아니면 false
=> 반복문의 첫번째 순회이면 ---시작---이라고 출력하기 true면 출력.
=> 반복문의 마지막 순회이면 ---종료--이라고 출력하기 true면 출력.
현재 요소를 찍는 방법 : 3가지
1.현재 요소(var): ${name}
2.현재 접근 중인 객체 : ${vs.current}
3.현재 요소 (index) : ${nameList[vs.index]}
아래 두개는 varstatus를 사용하지 않으면 못 씀!!
crome으로 서버 띄우기
c: 언어
| 태그 | 설명 | 주요 속성 | 예시 |
|---|---|---|---|
<c:if> | 조건문 | test | <c:if test="${user != null}">환영</c:if> |
<c:choose> | if-else 블록 | 없음 | <c:choose>...</c:choose> |
<c:when> | if 조건 | test | <c:when test="${x > 0}">양수</c:when> |
<c:otherwise> | else | 없음 | <c:otherwise>기본</c:otherwise> |
<c:forEach> | 반복문 | var, items, begin, end 등 | <c:forEach var="i" begin="1" end="3">...</c:forEach> |
<c:set> | 변수 설정 | var, value | <c:set var="msg" value="안녕" /> |
<c:out> | 출력 (escape 처리됨) | value, default | <c:out value="${user.name}" default="이름 없음"/> |
📘 Thymeleaf 핵심 구문 요약
✅ 주요 속성 정리
| 구문 | 설명 | 예시 |
|---|---|---|
th:text | 태그의 내용을 값으로 치환 (HTML 태그 해석 X) | <span th:text="\${name}">기본값</span> |
th:utext | 태그 내용을 HTML로 출력 (HTML 해석 O) | <div th:utext="\${htmlContent}"></div> |
th:each | 반복문 (향상된 for문과 유사) | <li th:each="fruit : \${fruitList}" th:text="\${fruit}">과일</li> |
th:if / th:unless | 조건문 (if / else) | <div th:if="\${item != null}">있음</div> |
th:switch, th:case | switch 문 | <div th:switch="\${value}"><p th:case="1">하나</p></div> |
th:object, *{} | 객체 기준 접근 | <ul th:object="\${student}"><li th:text="*{name}">이름</li></ul> |
th:block | 자체 태그 없음. 조건/반복 등에 사용 | <th:block th:each="i : \${list}"><p th:text="\${i}"></p></th:block> |
th:href / @{} | URL 링크 처리 | <a th:href="@{/board(key=\${key})}">링크</a> |
th:src | 이미지 경로 처리 | <img th:src="@{/images/logo.png}"> |
th:replace / th:include | 프래그먼트 삽입 (화면 조각) | <th:block th:replace="~{fragments/footer :: footer1}"/> |
th:fragment | 프래그먼트 정의 | <div th:fragment="footer1">내용</div> |
th:classappend | class 속성 동적 추가 | <h4 th:classappend="'red'">테스트</h4> |
\${param.변수명} | request 파라미터 읽기 | <li th:text="\${param.inputName}">이름</li> |
[[\${변수}]], [(\${변수})] | 간단 출력 문법 (text / utext) | <p>이름 : [[\${name}]]</p> |
\${객체?.필드} | 안전 탐색 연산자 (null 체크) | <p th:text="\${member?.memberNo}"></p> |
\${#numbers.sequence(시작,끝[,step])} | 숫자 시퀀스 생성 | <li th:each="i : \${#numbers.sequence(1,5)}">[[\${i}]]</li> |
th:inline="javascript" | JS 내에서 타임리프 변수 사용 | const msg = /*[[\${msg}]]*/ "기본"; |
🔹 조건 분기 & 연산자
| 연산자 | 설명 | 예시 |
|---|---|---|
삼항 연산자 (? :) | 조건식 결과에 따라 출력 분기 | th:text="\${age == 30} ? '서른' : '서른아님'" |
Elvis 연산자 (?:) | 값이 없을 때 기본값 출력 | th:text="\${member} ?: '없음'" |
No-Op 연산자 (?:_) | 값이 없을 경우 해석하지 않고 HTML로 출력 | <p th:text="\${data} ?: _">기본 텍스트</p> |
🧩 기타 개념
🌱 템플릿 엔진이란?
HTML 템플릿에 데이터를 결합하여 최종 결과 HTML을 생성하는 기술
→ JSP, Thymeleaf 등
🌿 타임리프 특징
- HTML5 친화적
- Spring Boot 공식 권장
- HTML 단독 실행 가능 (Natural Template)
📚 참고 예시
<ul th:each="fruit : ${fruitList}">
<li th:text="${fruit}">기본값</li>
</ul>
<p th:text="${param.inputName}">이름</p>
<a th:href="@{/example/{id}(id=${item.id})}">상세보기</a>
<h4 th:if="${member != null}">회원 정보 있음</h4>
