[SpringBoot] SpringBoot 시작하기 및 Test

심진주·2024년 10월 25일

Extention Springboot vscode 환경설정

SpringBoot

목록 보기

1/3

JAVA 버전은 17로 설치한다는 전제

1. 📘 VSCode Extention 설치

1-1. Spring Boot Extension Pack

익스텐션	개발자	설명
Spring Boot Extension Pack	VMware	Spring Boot 확장팩

2. 📗 Spring Boot Project 생성

2-1. Creat Project

Ctrl + Shipt + P > spring initializr: Create Gradle Project 선택

2-2. Spring Version 선택

Spring 버전 선택
첫 번째 항목이 추천항목이므로 첫 항목 선택함

가장 최신 버전 선택.
3.3.4 선택
참고 : 24/10/27 기준 3.3.5 버전이 가장 최신

2-3. 사용할 언어 선택

Java 선택

2-4. GroupId 지정

회사 이름의 도메인 역순
kr.jinju

2-5. ArtifactId 지정

버전 없는 Jar파일 이름
특수문자는 사용할 수 없고, 소문자만 사용되어야 한다.
즉, 프로그램 이름을 의미함(소문자) : hellospring

4,5에 의해 프로그램의 패키지 이름이 kr.jinju.hellospring으로 지정됨

2-6. 배포 타입 지정

Jar 선택

2-7. Java Version 선택

17 선택
현재 Spring Boot를 지원하는 JAVA 버전은 17이다.
본인이 설치한 JDK 버전이 17인지 확인

2-8. dependency 선택

기본으로 탑제할 라이브러리를 의미

Spring Web
Spring Boot DevTools
Spring Boot Acturator
Thymeleaf

참고

이후에 추가될 라이브러리 다수

검색 기능 활용 권장 (키워드 검색 활용한다.)

본인이 선택한 라이브러리 확인
자동으로 build.gradle 에 의존성 추가됨

참고 :

SpringBoot에서는 JSP를 권장하지 않는다.
JSP자리를 Thymeleaf Template Engines 가 대체함

JAVA는 JavaME,JavaSE,JavaEE(JSP+SERVLET)
Oracle에서 개발 중단 -> JakartaEE..

2-9. 작업 폴더 지정

작업폴더 지정 - 선택 ( Generate into this folder )
작업 폴더를 지정하면 그 안에 ArtifactId 이름으로 폴더가 생성됨

지정한 폴더 밑에 프로젝트 폴더( ArtifactId ) 생성

2-10. ArtifactId 폴더명 변경

생성이 완료되면 VSCode 우측 하단에 로드할지를 묻는 창이 표시됨
여기서 폴더를 바로 열지 말고
윈도우 탐색기를 통해 생성된 프로젝트의 폴더이름을 변경한 후 프로젝트 오픈한다.

여기서 폴더 이름을 01-HelloSpring으로 변경함
바로 Open하지 않고 폴더명 수정한다.

vscode에서 폴더 열기한다.

프로젝트 생성이 완료될때 까지 대기한다.

3. 📕 JAVA Error?

Java Error가 뜬다.

Ctrl+, 로 설정에 들어간다.
우측 상단 두 번째에 설정열기(JSON)을 연다.

"java.import.gradle.java.home": "c:\\jdk-17.0.2"

settings.json에 위 코드를 추가한다.
본인의 jdk폴더 경로를 추가해준다.

저장하고 Restart

좌측 육각형 모양의 Spring Boot Dashboard 를 클릭해서 로드된걸 확인한다.
Java:Ready 확인

프로젝트 생성 완료

4. 📗 Test

4-1. mainclass.java

${ArtifactId}Application.java에 내용 추가

src/main/java/kr/jinju/hellospring/HellospringApplication.java

클래스 정의문 상단에 @Controller 추가
메서드 추가

// 리턴하는 문자열을 웹 브라우저에게 전달함
// 이 항목을 명시하지 않을 경우 리턴하는 문자열은 view의 파일이름이 됨
// --> import org.springframework.web.bind.annotation.ResponseBody;
@ResponseBody
// 이 메서드가 연결될 URL 경로를 지정
@GetMapping("/test")
public String hello() {
   String message = "<h1>Hello Spring</h1>";
   message += "<p>안녕하세요~ 스프링~!!</p>";
   System.out.println(message);
   return message;
}

5. 📙 Auto Reload 설정

5-1. Chrome 웹 스토어

크롬 웹스토어 : RemoteLiveReload

크롬 웹스토어 - RemoteLiveReload 설치

5-2. settings.json

VSCode에 아래 설정값 추가

"java.debug.settings.hotCodeReplace": "auto",
"spring.dashboard.openWith": "external"

리로드 : 자동
브라우저 열기 : 기본설정 따름 (크롬으로 설정했으면 크롬으로 뜬다.)

6. 📗 Spring Boot 실행

Spring Boot Dashboard의 Apps 섹션에서
프로젝트 이름 우측에 표시되는 Debug 클릭 (또는 실행 버튼)
http://localhost:8080/hellospring 의 URL을 통해 결과 확인

Java Class나 HTML이 수정된 경우 별도의 재시작 없이
컴파일 내용이 갱신되므로 웹 브라우저만 새로고침 하여 결과를 확인한다.
하지만 build.gradle이 변경된 경우는 프로그램을 재시작 해야 한다.

7. 📗 View 사용하기

7-1. View

실습을 위한 두 개의 View 파일 추가
View에서 다른 페이지로 링크를 적용할 때는
Controller에서 정의한 URL을 대상으로 해야 한다.

/src/main/resources/templates/now.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
     .server-time {
       color: red;
       font-size: 16px;
     }
   </style>
</head>
<body>
   <h1>Hello SpringBoot</h1>
   <p>지금은 <span th:text=${nowtime} class="server-time"></span>입니다.</p>
</body>
</html>

/src/main/resources/templates/myview.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <h1>Hello SpringBoot</h1>
   <h2 th:text=${message1}></h2>
   <h3 th:text=${message2}></h3>
   <p th:text=${message3}></p>
</body>
</html>

7-2. 컨트롤러 메서드 추가

HellospringApplication.java에 아래 내용 추가함
이후에는 src/main/java/GroupId/ArtifactId/Controllers아래에 추가할 것.

	/** 2) 자동으로 View의 이름을 찾는 컨트롤러 */
	// -> import org.springframework.ui.Model;
	@GetMapping("/now")
	public void world(Model model) {
		// -> import java.util.Date;
		model.addAttribute("nowtime", new Date().toString());

		// void형의 메서드이므로 이 메서드가 사용하는 view의 이름은
		// URL 이름과 동일한 now.html이 된다.
	}

	/** 3) View의 이름을 반환하는 컨트롤러 */
	@GetMapping("/myview")
	public String nice(Model model) {
		model.addAttribute("message1", "스트링부터 View 테스트입니다.");
		model.addAttribute("message2", "안녕하세요~");
		model.addAttribute("message3", "반갑습니다~");

		// String 형의 메서드 이므로 이 메서드가 리턴하는 문자열이 View의 이름이 된다.
		return "myview";
	}

8. 📗 정적 폴더 사용하기

/src/main/resources/static 폴더는
정적 자원(html, css, js, 이미지등)을 웹에 노출하기 위한 폴더
예를들어 /src/main/resources/static/hello/world/test.html은
http://localhost:8080/@{contextPath}/hello/world/test.html 경로로
접근할 수 있음.
View에서 /@{contextPath}/hello/world/test.html 형태로
링크, <img>, <script> 태그 등을 통해 정적자원을 활용할 수 있음

8-1. 이미지 배치하기

/src/main/resources/static/img 폴더를 생성하고 그 안에 임의의 이미지 파일을 배치
View에서 사용하기

<img th:src="@{/img/spring.png}" alt="springboot" width="300" />

심진주

다음 포스트

[SpringBoot] SpringBoot 시작하기 및 Test

SpringBoot

1. 📘 VSCode Extention 설치

1-1. Spring Boot Extension Pack

2. 📗 Spring Boot Project 생성

2-1. Creat Project

2-2. Spring Version 선택

2-3. 사용할 언어 선택

2-4. GroupId 지정

2-5. ArtifactId 지정

2-6. 배포 타입 지정

2-7. Java Version 선택

2-8. dependency 선택

2-9. 작업 폴더 지정

2-10. ArtifactId 폴더명 변경

3. 📕 JAVA Error?

4. 📗 Test

4-1. mainclass.java

5. 📙 Auto Reload 설정

5-1. Chrome 웹 스토어

5-2. settings.json

6. 📗 Spring Boot 실행

7. 📗 View 사용하기

7-1. View

7-2. 컨트롤러 메서드 추가

8. 📗 정적 폴더 사용하기

8-1. 이미지 배치하기

React를 Spring 프로젝트에 통합

0개의 댓글