[Spring Boot 스터디] 한준교 #1 주차 - 섹션 1, 2 "다음부턴 요약을 해볼게..."

🦫Section 1. 프로젝트 환경설정

프로젝트 생성

준비해야할 것.

~~Java 11 설치~~ → 버전 이슈 때문에 Java 17
IDE (InteliJ) 설치

https://start.spring.io/

(옛날에는 Spring 프로젝트를 밑바닥 부터 만들었지만 요즘은 Spring-boot 를 기반으로 Spring 프로젝트를 만듬!!)

Spring-boot 기반으로 Spring 프로젝트를 만들어주는 사이트이다 (Spring 에서 운영중임!!)

과거에는 Maven을 주로 사용했지만 요새는 거의다 Gradle 을 사용한다고 한다…

SNAPSHOT은 아직 출시 전이므로 SNAPSHOT 이 아닌것들중 제일 높은 버전을 선택!

Group은 회사 이름을 작성하는 곳인데 대학생인 관계로 hello 로 채운다!

Artifact 는 프로그램명 이라고 생각하면 된다!! (빌드했을 때 나오는 결과물~?)

Dependencies 는 어떤 라이브러리를 땡겨서 쓸 것인가를 설정!

→ Web 프로젝트를 만들것이므로 Spring Web 를 사용

→ HTML 을 만들어주는 템플릿 엔진인 Thymleaf 를 사용

GENERATE 로 다운받아주고 InteliJ 에서 bulid.gradle 을 열어준다!!

구조를 살펴보면 .idea 는 inteliJ 가 사용하는 설정 파일이고, gradle 은 gradle 과 관련해서 gradle을 사용하는 폴더이고

src 안에 main 과 test 폴더가 나눠져 있어서 main 에는 java 와 그 밑에 실제 소스파일들이 있고 test 안에는 test 코드들과 관련된 소스들이 들어있다!! (요즘 개발 트렌드에서는 test가 중요하다!)

resources 안에는 실제 java 코드 파일들을 제외한 xml 이나 html, 설정파일 등이 들어있음!

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.1.1'
	id 'io.spring.dependency-management' version '1.1.0'
}

// java 언어를 선택했던 것들과 관련된 내용이 plugins 에 들어가 있음

group = 'hello'
version = '0.0.1-SNAPSHOT'

java {
	sourceCompatibility = '17'
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

tasks.named('test') {
	useJUnitPlatform()
}

입문 단계에서는 gradle 이 버전을 설정하고 라이브러리를 가져오는구나!! 만 이해하고 넘어가면 됨

dependencies 는 아까 다운받았던 라이브러리들임!!

→ repositories 에 있는 mavenCentral 라는 공개된 사이트에서 다운받으라고 설정해놓은 것임! (자기가 원하는 특정 사이트를 넣어도 됨)

package hello.hellospring;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class HelloSpringApplication {

	public static void main(String[] args) {
		SpringApplication.run(HelloSpringApplication.class, args);
	}

}

💡 강의에서는 JAVA 11을 사용하지만 버전 이슈 때문에 실행이 안 되는 관계로 17로 다운로드해서 진행했습니다…

main 함수를 실행시키면 이렇게 쫙 뜨는걸 확인할 수 있습니다~

실행되는 원리는 main 메서드를 실행하면 SpringApplication.run 을 통해 SpringBootApplication 이 실행되면서 Tomcat 이라는 웹서버를 내장하고 있는데 그것을 자체적으로 띄우면서 SpringBoot도 같이 올라온는 머시기 그런..

설정에서 Gradle 을 검색한 후 다음과 같이 InteliJ 로 바꿔주게 되면 Gradle 을 통해 run이 실행되지 않고 바로 InteliJ 에서 JAVA를 실행하므로 훨씬 빠름! (꿀팁)

여러 내용들중에서 Tomcat started on port(s): 8080 (http) with context path '’ 가 중요한데

localhost:8080 에 접속하면 아래와 같은 화면이 뜨면 프로젝트 환경설정이 성공적으로 된 것입니다!!

라이브러리 살펴보기

Gradle은 의존(연관) 관계가 있는 라이브러리를 함께 다운로드 한다!

스프링 부트 라이브러리

spring-boot-starter-web
- spring-boot-starter-tomcat : 톰캣 (웹서버)
- spring-webmvc : 스프링 웹 MVC
spring-boot-starter-thymeleaf : 타임리프 템플릿 엔진(View)
spring-boot-starter(공통) : 스프링 부트 + 스프링 코어 + 로깅
- spring-boot
  - spring-core
- spring-boot-starter-logging
  - (실무에서는 System.out.println 을 안쓰고 애플리케이션의 실행 중에 발생하는 이벤트들을 추적하고, 문제 해결과 성능 분석에 도움을 주는 logging 을 쓴다고 하네요..)
  - logback, slf4j (요새 추새는 이 2가지 조합으로 logging 을 함)

테스트 라이브러리

spring-boot-starter-test
- junit : 테스트 프레임워크
- mockito : 목 라이브러리
- assertj : 테스트 코드를 좀 더 편하게 작성하게 도와주는 라이브러리
- spring-test : 스프링 통합 테스트 지원

Gradle 의 경우 라이브러리의 연관 관계를 따져서 모든 라이브러리를 다 불러오기 때문에 실제 우리가 선택한 starter-web 과 starter-thymeleaf 외에도 여러 라이브러리들이 있는 것을 확인할 수 있다!!

inteliJ 맨 오른쪽에 보면 Gradle 이라고 있는데 클릭해보면 라이브러리들을 볼 수 있음!

라이브러리 강의는 그냥 한번 쭉 보시는 거 추천드려요…

(이런 게 있구나만 알고 넘어가면 된답니다!!)

View 환경설정

아까 localhost:8080 에 들어갔을 때는 에러가 발생했다! (당연히 아무것도 안했으니까…)

그래서 이번에는 Welcom Page 를 만들건데 src / main / resources / static 에 index.html 을 만들면 그것을 Welcom page 로 해줌 (도메인을 누르고 왔을 때 첫 화면)

<!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>

요렇게 만들어 주신 다음에 서버를 키고 localhost:8080 에 접속해보면

이렇게 잘 나오는 걸 확인할 수 있습니다~

💡Welcom page 는 어떻게 만들지..? 라는 생각이 드는데 잘 모르겠다면?!

-> Srping.io 에 들어가서!! projects → Spring Boot 에 들어간 후 메뉴얼에서 열심히 찾아본다… (Spring Boot 가 제공해줌!!)

스프링 부트가 제공하는 Welcom Page 기능은 그저 파일만 넘겨주는 정적 페이지의 느낌 이지만!!

thymeleaf (처음에 가져왔던 라이브러리!!) 와 같은 템플릿 엔진을 사용하면 페이지를 변경할 수 있음!!

-> 스프링 부트 메뉴얼, thymeleaf 공식 사이트 등에서 찾아보세요~

웹 애플리케이션에서 첫번째 진입점이 컨트롤러(controller) 이다!!

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"> <!-- 이 줄을 넣어줘야 thymeleaf 문법을 사용할 수 있다. -->
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p> <!-- th 는 thymeleaf 이다! -->
<!-- data 는 아까 controller 의 model.addAttribute 에서 넘겨준 hello!! 의 값으로 치환된다. -->
</body>
</html>

package hello.hellospring.controller;

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

@Controller //controller 어노테이션을 적어줘야 한다.

public class HelloController {
    @GetMapping("hello") // Map 어플리케이션에서 /hello 가 들어오면 이 메서드를 호출해준다 (Spring 이 해줌)
    public String hello(Model model) {
        model.addAttribute("data", "hello!!");
        return "hello";
    }
}

자 이렇게 파일 2개 만들어준 다음에! 서버를 키고 localhost::8080/hello 에 들어가보면!!

이렇게 잘 뜨는걸 확인해볼 수 있습니다~

그러면 이쯤에서 아니 이게 어떻게 작동이 되는거지..? 하는 궁금증이 생기는데

쉽게 풀어보자면!!

웹 브라우저에서 (여기서는 localhost:8080/hello) /hello 를 던지면 스프링 부트는 내장된 톰켓 웹서버에서 이걸 받아서 Spring 에게 물어봄

-> 그러면 Spring 의 controller (여기서는 HelloController) 에서 GetMapping(”hello”) 의 “hello” 와 url이 매칭되어 메서드가 실행되고 Spring 이 model (key는 data 이고 value 는 hello!!) 이라는 것을 만들어서 넣어주게 된다 이 때 return 은 hello 이다!!

(return 이 hello 인 것은 templates/hello.html 의 파일 이름과 동일한데 이것은 우연이 아니라 Thymleaf 템플릿 엔진 처리를 위해 hello.html 을 찾아서 model(data 가 hello! 인) 을 넘겨주고 화면에 실행시키라는 의미이다!)

Controller 에서 return 값으로 문자를 반환하면 뷰 리졸버(viewResolver) 가 화면을 찾아서 처리한다.

→ 스프링 부트 템플릿 엔진은 기본적으로 viewName 을 매핑하여 resources/templates/ + ViewName.html 와 같이 동작하므로 hello 를 return 하면 hello.html 파일을 찾아서 화면에 그려준다!!

💡 spring-boot-devtools 라이브러리를 추가하면 ‘html’ 파일을 컴파일만 해주면 서버 재시작 없이 View 파일 변경이 가능하다.

InteliJ 컴파일 방법 : build → Recompile

빌드하고 실행하기

빌드를 해서 실제 실행할 수 있는 파일을 만들어보자!

터미널에

./gradlew build
cd build/libs
java -jar hello-spring-0.0.1-SNAPSHOT.jar
실행확인

순서로 진행!!

→ 나중에 jar 파일 하나만 넣어놓고 실행시키면 끝남.. (완전 간단)

🦫Section 2. 스프링 웹 개발 기초

웹을 개발하는데는 크게 3가지 방법이 있다!!

정적 컨텐츠

Welcom Page 처럼 그냥 서버에서 하는거 없이 파일을 웹 브라우저에 그대로 내려주는 것이다.

스프링 부트는 정적 컨텐츠 기능을 자동으로 제공한다.

→ resources/static 에 파일을 만들면 됨

<!DOCTYPE HTML>
<html>
<head>
    <title>static content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
정적 컨텐츠 입니다.
</body>
</html>

url 을 파일명 그대로 들어오면 된다.

어째서 이렇게 될까..? 라는 생각이 들텐데

웹 브라우저에서 localhost:8080/hello-static.html 을 치게되면 내장 톰켓 서버가 이 요청을 받고 스프링에게 넘겨줌!

그러면 controller (컨트롤러가 우선 순위를 가짐) 에서 먼저 hello-static.html 이 있나 확인해봄 (매핑 된게 없음!)

→ resources / static 에서 hello-static.html 을 찾아봄

이렇게 해서 만약 찾게 된다면 hello-static.html 을 반환해주는 원리임!

MVC와 템플릿 엔진

가장 많이 하는 방식이다!!

템플릿 엔진으로 서버에서 프로그래밍 해서 html을 동적으로 바꿔서 내려주는 것이다.

(템플릿 엔진을 MVC = model, view, controller 로 쪼개서 사용한다.)

정적컨텐츠와 다르게 서버에서 변형을 한다!!

옛날에는 View에서 모든걸 다했지만 요새는 MVC 방식을 사용한다.

(View 는 오직 화면을 관리하는 일만!! 서버 관련은 controller 에서 처리하고 model 에 화면에 필요한 것 들을 담아서 넘겨주는 느낌)

*Controller*

@GetMapping("hello-mvc")
    public String helloMvc(@RequestParam("name") String name, Model model) { 
		//RequestParam 을 통해 외부에서 url parameter 로 받는다.
        model.addAttribute("name", name);
				//parameter 를 받아서 name 으로 model에 담겨져서 temmplate로 넘어감
        return "hello-template";
    }

*View*

<html xmlns:th="http://www.thymeleaf.org">  <!--thymeleaf 템플릿 엔진을 사용해야함 -->
<body>
<p th:text="'hello ' + ${name}">hello! empty</p> <!-- -->
</body>
</html>

💡 thymeleaf 의 장점은 경로를 복사해서 서버 없이 html만 열어서 껍데기 (소스) 를 확인 할 수 있다!

→ hello-template.html 에서 p 태그에 있는 hello! empty 는 서버 없이 html만 볼 때 확인하려고 하는 것이고 실제 서버를 타서 돌면 th:text="'hello ' + ${name}" 로 값이 바뀌게 된다!!

그렇게 해서 서버를 키고 localhost:8080/hello-mvc 를 해보면…

왜 오류가??!

윈도우 기준 ctrl + p 를 눌러보면 required 가 true로 default 되어 있기 때문에 에러가 발생한 것을 알 수 있다. (아무것도 안넘겼으니까!!)

http get 방식으로 ? 뒤에 parameter 를 넘겨주면

아주 잘 나오죠??

원리를 알아보자면!!

웹 브라우저에서 localhost:8080/hello-mvc 를 넘기면 스프링부트가 내장 톰켓 서버 띄우고 스프링한테 던지고!

그러면 아까 말했듯이 Controller 부터 우선순위가 있기에 확인을 해보는데..!!

hello-mvc 메서드에 매핑이 되어있으니까 호출하고 return 을 hello-template 로 스프링에게 넘겨준다

→ 그렇게 되면 viewResolver (view 를 찾아주고 템플릿 엔진을 연결시켜줌) 가 return 값과 이름이 같은 templates/hello-template.html 을 찾아서 HTML 을 변환한 후에 웹 브라우저에 반환함!!

API

json 이라는 데이터 포맷으로 client 에게 전달하는 것을 API 방식이라고 한다!

@GetMapping("hello-string")
    @ResponseBody //http 에서 header 부분과 body 부분이 있는데 body 부분에 직접 데이터를 넣어주겠다는 의미이다.
    public String helloString(@RequestParam("name") String name) {
        return "hello " + name; //name 에 spring 을 넣는다면 "hello spring" 이 되는데 이게 요청한 클라이언트에게 그대로 내려감
    }

서버를 킨 후에 페이지 소스 보기를 눌러보면!!

html 이 하나도 없이 문자만 있는걸 확인할 수 있다.

(템플릿 엔진은 화면을 가지고 view 라는 템플릿으로 조작하는 방식이지만 @ResponseBody 를 사용하면 viewResolver 를 사용하지 않고 HTTP 의 BODY에 문자 내용을 직접 반환 한다!!)

@GetMapping("hello-api")
    @ResponseBody
    public Hello helloApi(@RequestParam("name") String name) {
        Hello hello = new Hello();
        hello.setName(name); //parameter 로 넘어온 name을 넣어줌
        return hello; // 객체를 넘김!
    }
    static class Hello {
        //class 안에서 또 class를 사용할 수 있음!!
        private String name;

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

@ResponseBody 를 사용하고, 객체를 반환하면 JSON으로 변환된다!

다시 서버를 켜보면!!

요렇게 json 이 등장하는 것을 확인할 수 있다!

동작하는 방식을 차례차례 알아보자..

웹 브라우저에서 localhost:8080/hello-api 를 넘겨주면 톰켓 내장 서버에서 스프링에 hello-api 를 던지고~

Controller 에서 hello-api 를 찾았는데 @ResponseBody 가 적혀있으므로

Spring은 viewResolver 에게 템플릿을 찾으라고 던지는데 적혀있으므로 바로 Http 응답에 그대로 넣은것으로 동작한다.

return이 문자라면 http 응답에 바로 넣어서 주면 되지만 return 이 객체라면 기본 default 가 그냥 json 방식으로 데이터를 만들어서 http 응답에 반환하게 된다!

→ ViewResolver 가 아니라 HttpMesaageConverter 가 동작한다 (만약 문자라면 , StringHttpMessageConverter 가 객체라면, JsonConverter 가 동작함)

간단하게 보면!!

@ResponseBody 를 사용?

→ HTTP의 BODY에 문자 내용을 직접 반환

→ viewResolver 대신에 HttpMessageConverter 가 동작

→ 기본 문자 처리 : StringHttpMessageConverter

→ 기본 객체 처리 : MappingJackson2HttpMessageConverter

(Jackson 이라는 라이브러리는 객체를 json으로 바꿔주는 역할이다!

→ 스프링에 기본 탑재)

→ byte 처리 등등 기타 여러 HttpMessageConverter 가 기본으로 등록되어 있음

저작자표시 동일조건

'WINK-(Web & App) > Spring Boot 스터디' 카테고리의 다른 글

[Spring Boot 스터디] 이지원 #2 주차 - 섹션 3 (0)	2023.07.20
[Spring Boot 스터디] 조현상 #2 주차 - 섹션 3 (0)	2023.07.19
[Spring Boot 스터디] 황현진 #1 주차 - 섹션 1, 2 "👋 🌸" (1)	2023.07.14
[Spring Boot 스터디] 이지원 #1 주차 - 섹션 1, 2 "Hello Spring" (0)	2023.07.14
[Spring Boot 스터디] 이정욱 #1주차 - 섹션 1, 2 ".... . .-.. .-.. ---" (0)	2023.07.13

KMU_SW_CLUB

[Spring Boot 스터디] 한준교 #1 주차 - 섹션 1, 2 "다음부턴 요약을 해볼게..."

🦫Section 1. 프로젝트 환경설정

프로젝트 생성

라이브러리 살펴보기

View 환경설정

빌드하고 실행하기

🦫Section 2. 스프링 웹 개발 기초

정적 컨텐츠

MVC와 템플릿 엔진

API

'WINK-(Web & App) > Spring Boot 스터디' 카테고리의 다른 글

티스토리툴바

[Spring Boot 스터디] 한준교 #1 주차 - 섹션 1, 2 "다음부턴 요약을 해볼게..."

🦫Section 1. 프로젝트 환경설정

프로젝트 생성

라이브러리 살펴보기

View 환경설정

빌드하고 실행하기

🦫Section 2. 스프링 웹 개발 기초

정적 컨텐츠

MVC와 템플릿 엔진

API

'WINK-(Web & App) > Spring Boot 스터디' 카테고리의 다른 글

'WINK-(Web & App)/Spring Boot 스터디' Related Articles

티스토리툴바