스터디/스프링

스프링 공부 일지 - Thymeleaf 를 사용한 View 페이지 만들기!

sleesm 2022. 10. 5. 21:21

 

 

오늘은 저번에 이어서 view 페이지를 만들어보고자 한다!!!

2022.08.06 - [스터디/스프링] - 스프링 공부 일지 - 스프링 프로젝트 처음 오픈!!

 

스프링 공부 일지 - 스프링 프로젝트 처음 오픈!!

오늘은 계속 미루던 스프링 공부!!!! 를 했다!!!!! 일단은 지현이에게 추천받은 강의를 먼저 보기로 했다!! https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84..

sleecode.tistory.com

 

 

 

 

 


 

 

 

저번 강의에 이어서 error page가 나왔던

페이지 만들기!!!

를 해보고자 한다!

 

 

resources > static > index.html 추가

먼저, resources > static 폴더 아래에 index.html 파일을 만들어준다!

코드는 강의 자료를 참고했다!!

 

 

화면에

 

그러면 오른쪽 화면처럼 localhost:8080 에서

코드로 설정한 화면이 뜬다!!

 

하지만 이때 hello를 선택하면 localhost:8080/hello로 연결되는데

아직 만들어진 페이지가 없어서 Error Page로 연결된다!

 

 

 

 

 

 

 

 


 

spring boot는 Welcome Page 기능을 제공하기 때문에

static / index.html 을 만들면 자동으로 연결된다!!! 

 

spring boot 사이트에서 welocme page 기능 관련 설명

 

참고 : https://docs.spring.io/spring-boot/docs/current/reference/html/web.html#web.servlet.spring-mvc.welcome-page

 

Web

Graceful shutdown is supported with all four embedded web servers (Jetty, Reactor Netty, Tomcat, and Undertow) and with both reactive and servlet-based web applications. It occurs as part of closing the application context and is performed in the earliest

docs.spring.io

 


 

 

 

 

 

 

 

 

 

 

 

 

localhost:8080/hello 를 위한 hello 페이지를 만들기 위해서

 

우리는 Controller를 사용하고자 한다!!!

 

 

  • hello.hellospring 밑에 controller라는 패키지를 만들어준다!
    • 이는 관리를 편하게 하기 위해 패키지를 만들어주는 것이다






  • controller 아래 HelloController라는 클래스를 만든다
    • @Controller 어노테이션 사용

    • 클래스 내부
      • @GetMapping(" [/아래의 api 주소] ")
        • localhost:8080/hello를 위한 것이므로 "hello" 로 설정
        • Get 함수와 같은 존재!


      • Model model
        • MVC의 Model에 해당한다.
        • .addAttribute() 함수를 통해 필요한 속성들을 뷰에 넘겨준다!


      • return " [랜더링할 템플릿 이름] "
        • Tymeleaf 템플릿 엔진을 통해 templates/hello.html 에 전달시킬 것이기 때문에 "hello"로 설정







  • resources > templates > hello.html 생성
    • hello view를 책임질 html 이다
    • 아래 코드를 통해 tymeleaf 템플릿 엔진을 사용 가능하다
    • model을 통해 받은 속성을 통해 data 속성의 값인 hello!!로 치환되어 나타난다!
<html xmlns:th="http://www.thymeleaf.org">
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>

 

 

 

Controller 구조와 코드

 

 

 

 

 

 

그러면 이렇게 실행이 잘 되는 것을 확인할 수 있다!!!!

조금 신기하다! 이 강의가 기초를 하나하나씩 알려줘서 좋은 것 같다!!!!!

localhost:8080/hello 실행 결과

 

 

 

 

 

 

 

 

 

 

 

 

윈도우즈 환경에서 빌드하고 실행하는 것 까지 해봤는데,,,

사실 jar 를 실행하는 부분에서 이상하게 안되어서 조금 확인을 해봐야할 것 같다😂😂😂😂

 

실행이 잘 되면,, 확인 정보를 올리는 것으로!!!

 

 

환경변수를 재설정해주고 컴퓨터 재부팅 후 실행하니 원할하게 됐다!!!

실행 전, java -version 과 javac -version을 통해 확인하는 것이 좋을 듯!!

jar 파일을 통해 원할하게 돌아가는 것을 확인할 수 있다!

 

 

 

 

 

 

 

 

 

 


오랜만에 공부를 하려니 머쓱하긴 한데

오랜만이니까 재밌다!!!

 

이클립스로 안하고 인텔리제이로 하려니까 넘나 어색하고

스프링 너무 어색한데 조금씩 익숙해지길 바라면서,,,

 

아직까지는 재밌어서 다행~~~~~~~

 

 

그럼 안녕🙌🙌🙌🙌🙌🙌🙌🙌🙌🙌🙌🙌🙌🙌