mojo's Blog

IntelliJ로 프로젝트 생성 및 view 환경설정 본문

Spring

IntelliJ로 프로젝트 생성 및 view 환경설정

_mojo_ 2022. 1. 10. 23:22

프로젝트 생성

 

※ 스프링 프로젝트 생성방법

1. https://start.spring.io 사이트에 들어간다.

 

2. Project, Language, Spring Boot, 그리고 Project Metadata 에 대한 선택이 필요하다.

 

 

  • Project : Gradle Project 를 선택한다.
  • Language : Java 를 선택한다.
  • Spring Boot : 2.6.2 를 선택한다. (SNAPSHOT은 선택하지 않기)
  • Project Metadata : 위와 같이 수정한다.

 

3. 오른쪽에 Dependencies 의 ADD DEPENDENCIES... 를 선택하여 아래와 같이 Spring Web, Thymeleaf 를 선택한다.

 

 

4. GENERATE 버튼을 클릭한다.

 

 

5. 아래와 같은 파일이 생성됨을 알 수 있다.

 

 

※ 프로젝트 생성

1. IntelliJ를 킨 후에 Open 버튼을 클릭한다.

 

 

2. 위에서 설치한 hello-spring에서 build.gradle를 선택 후 OK 버튼을 클릭한다.

 

 

3. Open as Project 버튼을 클릭한다.

 

 

4. hello-spring 프로젝트의 [src] -> [main] -> [java] -> [hello.hellospring] 을 선택하면 HelloSpringApplication 클래스가 보이는데 이를 선택한다.

 

 

5. 그 후 [Run] 을 눌러서 다음과 같이 java 11와 hello-spring.main을 선택해주고 OK 버튼을 클릭한다.

 

 

6. 그 후에 실행을 시키면 아래와 같은 문구가 뜬다.

 

 

7. 실행된 것인지를 확인하기 위해 크롬에 localhost:8080 을 입력해본다.

아래와 같은 사진이 뜨면 성공한것이다!

 

 

 

View 환경설정

 

 

※ Welcome Page 만들기

1. resources 아래에 static 폴더가 있다.

해당 폴더에 index.html 파일을 만들어준다.

 

 

2. 아래와 같이 index.html 를 채워주도록 한다.

 

<!DOCTYPE HTML>
<html>
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
Hello
<a href="/hello">hello</a>
</body>
</html>

 

3. 실행시킨후 크롬에 localhost:8080 를 입력하면 다음과 같은 화면이 뜬다.

 

 

※ thymeleaf 탬플릿 엔진

 

1. hello.hellospring 아래에 controller 폴더를 형성한다.

그 후에 controller 폴더 아래에 HelloController 자바 코드를 형성한다.

 

 

2. HelloController 자바 코드는 다음과 같이 작성한다.

 

package hello.hellospring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

    @GetMapping("hello")
    public String hello(Model model){
        model.addAttribute("data", "hello!");
        return "hello";
    }

}

 

3. templates 아래에 hello.html 파일을 형성한다.

 

 

4. hello.html 의 코드는 아래와 같이 입력한다.

 

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}"> 안녕하세요. 손님 </p>
</body>
</html>

 

5. 실행한 후 크롬에 http://localhost:8080/hello 를 들어가면 다음과 같은 화면이 뜬다.

 

 

위 과정을 아래와 같이 정리할 수 있다.

 

 

  • 컨트롤러에서 리턴 값으로 문자열을 반환하면 뷰 리졸버('vieResolver')가 화면을 찾아서 처리한다.
  • 스프링 부트 템플릿엔진 기본 viewName 매핑
  • 'resources:templates/' + {ViewName} + '.html'

 

[추가 실습]

  - localhost:8080/bye/bye 에서는 다음과 같이 화면을 띄울 수 있도록 추가해본다.

 

 

우선 controller 에서 @GetMapping("bye/bye") 를 추가해야 한다.

그리고 메서드는 이름 및 날짜를 세팅할 수 있도록 해야 한다.

 

    @GetMapping("bye/bye")
    public String bye(Model model){
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss (E)");
        Calendar c1 = Calendar.getInstance();
        String today = sdf.format(c1.getTime());

        model.addAttribute("name", "조명재");
        model.addAttribute("date", today);

        return "bye";
    }

 

마지막으로 bye.html 에서 해당 데이터가 반영이 되면서 웹 브라우저가 위와 같이 나타나게 된다.

 

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'잘가세요. ' + ${name} + ' 현재 날짜 : ' + ${date}"> 잘가세요. 손님 </p>
</body>
</html>

 

'Spring' 카테고리의 다른 글

회원 관리 - 백엔드 개발  (0) 2022.01.12
스프링 웹 개발 기초  (0) 2022.01.11
스프링 기반 뉴스 기사 관리 웹 서비스  (0) 2022.01.07
스프링 MVC 컨트롤러 및 RestController 구현  (0) 2022.01.07
스프링 프레임워크 개요  (0) 2022.01.06
'Spring' Related Articles more
Comments