[스프링부트]JSP와 Thymeleaf 사용하기(스프링부트 3.x)

allnight5·2023년 8월 23일
0

스프링

목록 보기
60/62

build.gradle에 들어갈 내용
jsp사용을 위해 JSTL 부분을 추가해 주시면 됩니다.
Thymeleaf 사용을 위해서 Thymeleaf 부분을 추가해 주시면 됩니다.
웹 사용을 위해서 tomcat부분을 추가합니다.

3.x 이상의 gradle

	//web
	implementation 'org.springframework.boot:spring-boot-starter-web'
    
	//	JSTL
	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 이상

	//tomcat
	implementation 'org.springframework.boot:spring-boot-starter-tomcat'
	implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'

	//thymeleaf
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

2.x 이하

	//tomcat
	implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
    providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
    
    //jstl
    implementation 'javax.servlet:jstl'
    
	//thymeleaf
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

음.. 2.x이하면 jsp만 사용할때 굳이..
.yml에

  mvc:
    view:
      prefix: /WEB-INF/views/
      suffix: .jsp

이렇게 추가해주지 않아도 알아서 잘 찾아간다.
gradle에서 jstl이 잘 알아서 잘해준다..

.yml부분

spring: 

  thymeleaf:
    prefix: classpath:/templates/  #시작할 부분
    suffix: .html				#형식
    view-names: thymeleaf/*		
    #templates에서 시작할 위치 원래 templates에서 
    #바로 찾을 거라면 그냥 사용하면 되지만 
    #jsp와 같이 사용하고 있기때문에 추가해줘야합니다.
    #view-names 작성해 주지 않을 경우
    #jsp와 충돌날 수 있습니다.

  mvc:
    view:
      prefix: /WEB-INF/views/
      suffix: .jsp

저같은 경우는 타임리프와 jsp를 같이 사용하려고 하는것이지 일반적으로는 같은 서버내에서 사용하지 않습니다.

타임리프를 사용하는 경우가 많을 것 입니다.

파일들 위치

templates.thymeleaf

라고 .으로 폴더 2개가 하나로 합쳐져 있습니다!
templates에 아무 것도 없기 때문이에요

** 만약 수정할 경우 **

  mvc:
    view:
      prefix: /WEB-INF/

로 작성하셨다면 WEB-INF폴더내로 .jsp파일을 두시거나
views폴더를 만드시고 /views/login 형식으로 작성하시면 됩니다.

다른이름이 좋다 하시면
modules(생성하실 이름)폴더를 만드시고 /modules/login 형식으로 작성하시면 됩니다.

작성 되는 내용

위와 같이 해당 페이지를 불러오는 것이 Get이며
타임리프의 경우 그냥 해당 페이지를 불러와도 상관없으나
jsp의 경우 우선 @GetMapping을 통하여
해당 페이지를 호출하여 해당 페이지 내에서
@PostMapping을 사용하여 데이터를 전송할 수 있으니 Get과 Post를 주의하여 사용하시기 바랍니다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>회원가입</title>
</head>
<br>
<h2>회원가입</h2>
<!-- 상대경로 사용, [현재 URL이 속한 계층 경로 + /save] -->
<p>*표시가 있을경우 필수 입력입니다.</p>
<form action="/member/signup" method="post">
    *이메일: <input type="text" name="email" />
    *비밀번호: <input type="text" name="password" />
    *닉네임: <input type="text" name="nickName" />
    <br>
    나이: <input type="text" name="age" />
    거주지: <input type="text" name="liveRegion" />
    <br>
    <button type="submit">전송</button>

</form>
<br>
<a href="/index.html">메인으로 이동</a>

</body>
</html>

위와 같이 컨트롤러에 @RequestParam("email")써준다면 내용을 받아가며
해당 name의 값이 없다면 오류가 발생합니다.

예시를 들자면

컨트롤러 부분

public String signup(@RequestParam("email") String email,
                         @RequestParam("password") String password,
                         @RequestParam("nickName") String nickName,
                         @RequestParam("testRequest") String request,
                         Model model)

JSP부분

<form action="/member/signup" method="post">
    *이메일: <input type="text" name="email" />
    *비밀번호: <input type="text" name="password" />
    *닉네임: <input type="text" name="nickName" />
    <br>
    나이: <input type="text" name="age" />
    거주지: <input type="text" name="liveRegion" />
    <br>
    <button type="submit">전송</button>

</form>

위에 컨트롤러에 @RequestParam("testRequest") String request라는 파라미터가 있는데
아래 .jsp에 name = "testRequest" 라는 것이 없기때문에 전송시 에러가 발생하여 에러처리를 해두셨다면 해당 페이지로 아니면 문제가 발생하거나 응답이 없을 수 있습니다.

물론 컨트롤러에 @RequestParam("email")와 같이 추가해주지 않는다면
작성해도 해당값을 받아서 작성하지 않으니 주의 하시기 바랍니다.

@RequestBody를 사용하여 HTML 폼 데이터를 매핑하려고 하고 싶으시다면
먼저 폼 데이터를 JSON 또는 XML 형태로 변환한 후에 이를 자바 객체로 매핑해야 합니다.

물론 자바 스크립트를 활용하여 .ajax로 처리를 하는 것도 가능합니다!

생각보다.. 익숙하지 않아서 그런지 오래걸리고 있다.

내일부터는 뉴스에서 JSP와 타임리프를 활용하여 채팅과 뉴스 갱신을 해볼 예정이다.

내일은 우선 로그인을 완성하고 나서다!

로그인의 경우 redis를 사용할 것 같은데..

전체 채팅창에 redis를 사용할지.. RabbitMQ를 이용할지는 많이 고민해봐야 할것 같다.

전체 채팅창도 jsp 2개로 할지.. 하나에 복잡하게 넣을지.. 유지 보수를 위해서라면 2개로 나누는게 좋다고 생각하는데
하나로 할 경우 페이지 로딩 및 상호작용에 대한 컨트롤을 간소화할 수 있다고 한다.

profile
공부기록하기

0개의 댓글