스프링과 Thymeleaf

-view 환경 설정하는데 Thymeleaf엔진을 사용할 것이다.

-스프링은 Thymeleaf를 권장하는 편이고,

Thymeleaf도 스프링과 관련된 지원하는 기능들이 많다.

-스프링에서 권장하는 Template Engines

(Apache Freemarker, Mustache, Groovy Templates)

 

Thymeleaf Templates Engine

-웹과 standalone 환경을 위한 modern 서버사이드 자바 템플릿 엔진

*https://www.thymeleaf.org/ Thymeleaf 공식 홈페이지 참고

 

Thymeleaf 의 장점

-마크업을 깨지고 않고 그대로 사용 한다.

-보통 다른 Engine은 웹브라우저에서 열리지 않지만, Thymeleaf는 열린다.

-버전 2에서는 <BR></BR> 태그를 달아주는 스타일로 매칭해주지 않으면 에러가 났었지만

현재 버전 3.0에서는 <BR>작성해도 에러가 발생하지 않는다.

 

Thymeleaf 의 단점

-아직 그래도 불편한점이 있기 때문에 매뉴얼을 참고하면서 개발을 해야 한다.

 

 

스프링 

-스프링 공식 가이드

https://spring.io/guides/

-스프링 관련하여 개념이 혼란스러울 때에는 공식 가이드에서 검색을 통해

개념을 익히면 좋다.

*Serving Web Content with Spring MVC 검색을 해서 나와 있는 가이드 대로

따라해보면 좋다.

-스프링부트 매뉴얼 : 에러핸들링이나 기능이용시 궁금한점들을 공부할 수 있다.

https://docs.spring.io/spring-boot/docs/2.1.6.RELEASE/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-template-engines

 

Thymeleaf Template Engine을 위해 세팅해야 할 것은?

-스프링부트에서는 하기의 것을 이미 설치함으로,

자동으로 모든 세팅이 전부 되어 있으므로 오직 개발만 하면 된다.

org.springframework.boot:spring-boot-starter-thymeleaf

 

실습

스프링 부트 thymeleaf viewName 매핑

설명

-@Controller를 해줌으로써 annotation은 달아주어야 한다.

-@GetMapping의 (“hello”)라는 url로 오면 controller가 호출된다라는 뜻

-스프링 ui에 있는 Model이 model에다가 어떤 데이터를 실어서 controller에서

  view로 데이터를 보낼 수 있다.

-attributeName이 "data"라는 키의 값(attributeValue)을 hello로 넘긴다.

-return의 hello는 화면이름이다.

 spring initializer가 만들어 놓은 resources 안에 templates->new->file에

 view name용으로 hello.html 생성한다.

 hello.html 파일생성후 추후 보이지 않아도 return hello.html 형태로 변환한다.

-return hello결과가 화면렌더링 할 때에 hello.html 화면으로 이동한다.

 

Thymeleaf 템플릿엔진 동작 확인(hello.html)

설명

-<html>의 xmlns:th(네임스페이스)를 "http://www.thymeleaf.org"로 주었다.

-<p th:text에 ${data}로 아까 hello라고 적어 두었던 데이터가 넘어온다.

  데이터(hello) 렌더링 된 것이 >안녕하세요. 손님</p>로 넘어간다.

 

 

내부경로를 인터넷주소칸에 입력해서 hello.html에 접속 및 소스코드확인

설명

-다른 template engine이면 if절부터 들어가는 것이 많은데

 thymeleaf template engine은 간결한 코드구성으로 화면렌더링이 가능하다.

 

 

서버사이드 렌더링=스프링부트메인실행

 

-스프링부트가 내장톰캣을 가지고 실행시킨다.

 

#마주한문제

hello.html 화면이 위에처럼 나와야 하는데 처음에는 나오지 않아 무엇이 문제인지 확인했다.

해본 것들

1. cmd창에서 실행한 프로세스를 taskkill /f /pid 프로세스넘버를 통해 종료

   ->실행 안됨

2. hello.html에서 복붙 없이 직접 작성해서 넣었기 때문에 확인해 보았더니

   두 번째 라인에 <html 안에 “ / ” 가 있어서 삭제하고

  <html xmlns:th="http://www.thymeleaf.org"> 로 수정

   -> 실행안됨..

3.서버사이드렌더링하는 스프링부트메인파일과 Hello.Controller파일이 같은 폴더내에 있는지 확인했더니, test폴더안에    있었다..

  스프링부트메인파일이 있는 jpabook.jpashop으로 Hello.Controller파일을 이동

->화면이 보인다.

해결!!!

 

 

어떻게 데이터 hello가 hello.html에 찾아가는건가?

화면렌더링 경로

 

>HelloController

attributeName인 데이터의 attributeValue인 hello는 hello.html에 있는 ${data}로 넘어간다.이때 찾아서 가는 요인은 HelloController의 return hello이 화면렌더링 할 때에 hello.html로 화면이 넘어가도록 한다.

 

서버사이드템플릿엔진이 내장톰캣 실행시킬 때에

스프링부트 thymeleaf viewName 매핑을 하기처럼 해주어서

resources:templates/ +{ViewName}+ .html

데이터 hello가 hello.html을 최종적으로 찾아갈 수 있게 된다.

 

 

127.0.0.1:8080 메인 화면에 정적화면 구현해보기

resources->static->file만들기->index.html 파일생성

*resource 폴더에 파일이 생성되었기 때문에 기본적으로 서버를 다시 실행시켜주어야 한다.

설명

href 가 데이터 hello로 넘어가는 하이퍼링크 역할을 한다.

*127.0.0.1:8080/hello에서 hello가 @GetMapping(“hello")가 url hello 역할을 한다.

 

 

devtools 라이브러리 역할

-html화면을 수정해야 할 일이 많은데 그때 마다 서버를 리스타트 하면 힘드니

 spring-boot-devtools 라이브러리를 추가한다.

-이 라이브러리가 cache제거와 reloading을 되게 해주는 역할을 한다.

 *build.gradle->dependencies->spring-boot-devtools추가->reimport

 

devtools추가후 다시 서버리스타트하면 restartedMain이라고 뜬다.

 

 

devtools와 recompiler를 이용한 수정화면

#마주한 문제 2

devtools 라이브러리가 설치되었다는 restartedmain 화면이 안보여서

계속 찾아보았더니.. spring-boot-starter-devtools로 되어 있었다.

spring-boot-devtools로 수정하고 reimport, 서버restart를 하니 작동이 된다.

 

 

View환경설정 끝!!!

'신입개발자로 취업하기까지 > JPA쇼핑몰기능구축' 카테고리의 다른 글

20200430 프로젝트 환경설정_JPA와 DB설정 및 동작확인_5-1  (0) 2020.05.07
20200429 프로젝트 환경설정_H2데이터베이스 엔진 설치_4  (0) 2020.04.29
20200422 프로젝트 환경설정_라이브러리살펴보기_2  (0) 2020.04.23
20200421 프로젝트 환경설정_프로젝트생성_1-2  (0) 2020.04.22
20200421 프로젝트 환경설정_프로젝트생성_1-1  (0) 2020.04.22

프로젝트 환경설정

1. 프로젝트 생성(https://start.spring.io/ 로 들어간다.)

프로젝트 생성

-프로젝트를 만들고 라이브러리를 살펴본다.

-html 화면렌더링하기 위해 뷰와 관련된 환경설정

-H2 DATABASE를 설정하고

-JPA랑 데이터베이스 설정하고

실제로 돌아가는지 확인할 예정

 

프로젝트

-Gradle

*Maven에서 Gradle로 많이 넘어 가는 추세이다.

*2.2버전 이상으로 설정 할 경우에는 조금 환경이 달라질 수 있다.

 

Spring Boot 버전

-안정화된 2.1.7버전으로

 

Dependencies - 라이브러리 추가

Spring web starter

-Build web Restful App, Spring MVC, Apache Tomcat as default embedded container

 

Thymeleaf

-modern server side jave template engine

*서버사이드

*JSP는 요즘 사용하지 않는다. 성능이나 여러 가지 이슈들이 있기 때문.

스프링부트 내장톰캣에서도 권장하지 않는다.

 

Spring Data JPA (유틸리티 성 라이브러리)

-스프링 데이터 jpa 대해서 설명을 하지 않을 예정

-스프링 jpa로 어떻게 잘 어플리케이션 만드는 법을 아는 것이 중요

그래서 jpa에 대해서 개인적으로 깊이 알고 공부하는 것이 좋고, 이번에는 도움용으로 사용하는 것이 좋음

 

H2 DATABASE

-개발하거나 테스트할 때 유용하다.

-H2 데이터베이스 설치는 간단하다. MYSQL을 어렵다.

-메모리를 내장상태에서 실행할 수도 있다. 간단하게 교육용 장점이 있따.

 

Lombok

-지루하게 반복하는코드(boilerplate code)를 줄여준다라는 의미

 

 

2. Intelli J 설치

https://www.jetbrains.com/ko-kr/idea/

 

IntelliJ IDEA: JetBrains가 만든 전문 개발자용 Java IDE

Enterprise Java, Scala, Kotlin 등을 지원하며 강력한 기능을 제공하고 인체 공학적으로 설계된 Java IDE

www.jetbrains.com

3. build.gradle import

4. build.gradle 알아보기

plugins{ }

안에 내용은 다음과 같다.

-springboot 2.1.13버전 설치 표기

*plugin이 라이브러리 까지 관리를 해주기 때문에 2.1.14로 변경할 경우

 다른 라이브러리 버전까지 전부 업그레이드 된다.

-springboot에 필요한 dependency 필요한 라이브러리 추가 되었다는 내용

-java언어 설치 표기

 

sourceCompatibility ='1.8'

-자바 버전

 

configurations {	
               compileOnly {	 
                extendsFrom annotationProcessor	
               }

-Lombok으로 인해 생성된 코드들. annotation processor가 핵심!

 

repositories {	
             mavenCentral()
}

-repositories mavenCentral에서 라이브러리를 다운로드 받겠다라는 의미

 

dependencies {	
implementation 'org.springframework.boot:spring-boot-starter-data-jpa'	
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'	
implementation 'org.springframework.boot:spring-boot-starter-web'	
compileOnly 'org.projectlombok:lombok'	
runtimeOnly 'com.h2database:h2'	
annotationProcessor 'org.projectlombok:lombok'	
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

-내가 프로젝트 생성시 선택한 dependencies 라이브러리들이 나와 있다.

 

5. 환경세팅  확인_1

JpashopApplication에서 generation code에 main method가 있으니 실행시켜보자.

-Tomcat started on port(s): 8080(http) with context.. 가 보인다.

 

제대로 시작이 되었는지 실행해보자. 지금까지 아무것도 만들지 않았으니 흰색페이지에

글자 몇개만 나와야 정상이다. 실행시켜 보니 정상세팅이 되었음을 확인!

6. 환경세팅  확인_2

테스트케이스 실행

External libraries에 라이브러리가 왜이렇게 많은가

-예를 들어 JPA 라이브러리가 있다면

 JPA와 의존된 라이브러리들을 다운로드 받는 행위가 다른 라이브러리에서도 일어나기 때문에 많아지게 된 것이다.

 

*예전에는 웹어플리케이션 개발을 위해 세팅만 1주일이 걸렸다고 한다.

지금까지 실행하는 것들을 쉬지 않고 이행했다면 몇분도 걸리지 않았을 것 같다..

 

7. Lombok세팅확인 (#마주한에러해결)

-Lombok 사용하면 작성해야 할 코드양을 줄여준다.

 

객체를 만들때 변수선언, 기본생성자 Getter, Setter까지 메소드를 작성해줘야 하지만,

Lombok 플러그인은 생성을 한번에 해결가능하다. 사용할 변수 선언만 해주고

클래스명 위에 @Data라는 annotation을 선언해주면 끝이다.

 

*Lombok을 사용하기 위해서 plugin을 설치해야 한다.

 

Lombok 세팅확인 : 세팅확인순서

File->Setting->Plugins->lombok검색->install->restart IDE->

*Lombok설치후 꼭 해주어야 할 것

File->Setting->Plugins->Compiler->annotation processor에서 enable 클릭

 

Lombok 실제 동작 확인

다시한번 Lombok설정이 잘 작동되는지 코드를 실행(RUN)으로 확인

#마주한에러해결1

다음과 같은 에러 발생

Caused by: java.net.BindException: Address already in use: bind

확인해보니 톰캣 서버의 포트가 열려 있는 상태에서 코드실행하면 발생하는 에러라고 한다.

 

CMD창에서

netstat -ano 또는 netstat -a -n -o로 활성연결된 톰캣의 8080포트확인

taskkill /f /pid 2536 (8080포트로 활성화된 프로세스를 종료함)

이후 다시 실행해도 코드실행완료되지 않아 무슨 문제인지 보았더니

그리고 SpringApplication.run(JpashopApplication.class, args)을 삭제하지 않은 것이었다.

지웠더니 코드실행 및 출력이 에러 없이 완료 되었다.

 

 

다시 재실행 하니 data = hello가 보인다.

 

환경설정 추가

최근 IntelliJ 버전은 Gradle로 실행을 하는 것이 기본 설정이다.

이러한 기본설정은 실행속도가 느리기 때문에 다음과 같이 변경하기로 한다.

Setting-> Build, Execution, Deployment-> Build Tools -> Gradle

Gradle Build and run using: Gradle -> IntelliJ IDEA

Run tests using: Gradle -> IntelliJ IDEA

 

프로젝트생성까지 완료!!

'신입개발자로 취업하기까지 > JPA쇼핑몰기능구축' 카테고리의 다른 글

20200430 프로젝트 환경설정_JPA와 DB설정 및 동작확인_5-1  (0) 2020.05.07
20200429 프로젝트 환경설정_H2데이터베이스 엔진 설치_4  (0) 2020.04.29
20200423 프로젝트 환경설정_view 환경설정_3  (0) 2020.04.24
20200422 프로젝트 환경설정_라이브러리살펴보기_2  (0) 2020.04.23
20200421 프로젝트 환경설정_프로젝트생성_1-1  (0) 2020.04.22

+ Recent posts

티스토리툴바