❗️이 포스팅은 인프런의 [스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술] 강의를 정리한 내용입니다.❗️

 

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의

스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확인해주세

www.inflearn.com

[스프링 입문기 5] 스프링 웹개발 기초

  • 정적 컨텐츠
  • MVC와 템플릿 엔진
  • API 방식

정적 컨텐츠

  • 서버에서의 변형 없이 정적 파일을 그대로 웹 브라우저에게 넘겨줌
  • Spring Boot에서는 /static 폴더에서 정적 컨텐츠를 사용할 수 있도록 제공한다.

정적 컨텐츠 작동 방식

  1. 웹 브라우저에서 localhost:8080/hello-static.html 경로로 들어가면 내장 톰켓 서버가 요청을 받는다.
  2. 가장 먼저 hello-static과 관련된 컨트롤러가 존재하는지 찾아본다. (컨트롤러가 우선순위)
  3. 없다면 resources : static/hello-static.html를 찾는다.

MVC와 템플릿 엔진 

  • MVC란 하나의 애플리케이션을 만들 때의 개발 패턴으로, Model(모델), View(뷰), Controller(컨트롤러)이라는 세 가지 구성 요소로 소프트웨어를 구조화하는 방법을 말한다. 
  • Model : 모델이란 데이터와 비즈니스 로직을 담당하는 부분으로서, 애플리케이션의 데이터를 처리하고, 상태를 유지하는 역할을 말한다.
  • View : 뷰는 사용자 인터페이스(UI)를 담당하는 부분으로, 데이터를 시각적으로 표현하여 사용자에게 보여주는 역할을 담당한다.
  • Controller : 컨트롤러는 모델과 뷰 사이의 상호작용을 관리하는 부분이다.
  • "name"을 파라미터로 받고, 리턴은 templates/hello-template.html인 컨트롤러를 만들었다.
@GetMapping("hello-mvc")
    public String helloMvc(@RequestParam(value = "name") String name, Model model){
        model.addAttribute("name", name); // key : name, value : name
        return "hello-template";
    }
  • "hello-template.html"에서는 모델의 attribute인 name값을 파라미터로 받은 value로 변경하여 html 내용을 동적으로 바꿀 수 있다. 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaft.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p th:text="'hello '+ ${name}">hello! empty</p>
</body>
</html>
  • 파라미터는 GET 방식처럼 "http://localhost:8080/hello-mvc?name=spring!"처럼 설정해 줄 수 있다. 

API 방식

  • @ResponseBody를 사용. 
@GetMapping("hello-api")
@ResponseBody
public Hello helloAPI(@RequestParam("name") String name){
    Hello hello = new Hello();
    hello.setName(name);
    return hello; //hello라는 객체 자체를 반환
}

static class Hello{
    private String name;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

API 작동 방식

  • API 방식은 템플릿 방식과 다르게 viewResolver 대신에 HttpMessageConverter가 작동한다. (JSON 포맷으로 변형)
  • 기본 문자는 StringHttpMessageConverter, 기본 객체는 MappingJackson2HttpMessageConverter가 처리한다. byte처리와 같은 다른 형식들도 기본적으로 HttpMessageConverter가 탑재되어 있다.
반응형
SMALL

❗️이 포스팅은 인프런의 [스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술] 강의를 정리한 내용입니다.❗️

 

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의

스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확인해주세

www.inflearn.com

[스프링 입문기 4] 빌드 및 실행하기

빌드하고 실행하기

  1. 터미널로 이동 
  2. './gradlew build' -> build 폴더가 생성됨
  3. 'cd build/libs' 로 이동 
  4. 'java -jar hello-spring-0.0.1-SNAPSHOT.jar' 
  5. 실행되는지 확인

+) 빌드 파일 지웠다가 다시 실행하고 싶을 때에는? './gradlew clean build'

잘 실행되었다면 다음과 같은 화면이 뜬다.

 

 

 

 

 

 

 

 

 

 

반응형
SMALL

❗️이 포스팅은 인프런의 [스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술] 강의를 정리한 내용입니다.❗️

 

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의

스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확인해주세

www.inflearn.com

[스프링 입문기 3] Welcome 페이지 만들기

Welcome Page 만들기

  • 사용자가 도메인을 타고 들어왔을 때 보이는 첫 화면이 된다.
  • 경로 : src/main/resources/static/index.html
  • index.html 파일 추가해주기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    hello
    <a href="/hello">hello</a>

</body>
</html>
  • 서버를 다시 실행해주면 다음과 같은 화면을 확인할 수 있다. 

Welcome 페이지 추가

  • 이와 같이 static 폴더 안에 index.html 파일을 추가하면, 스프링 부트에서 자동적으로 이 index.html 파일을 홈화면으로 기능한다. 

thymeleaf 템플릿 엔진

  • index.html은 정적(static) 페이지이기 때문에, 내가 원하는 대로 페이지를 수정하기 위해서는 템플릿 엔진이 필요하다.
  • Spring Boot 템플릿 엔진 종류
    • FreeMarker
    • Groovy
    • Thymeleaf (가장 많이 사용되는 템플릿 엔진 중 하나)
    • Mustache

Controller 만들기

  • Controller는 web application의 첫 진입점이 된다.

controller 위치

  • hellospring 폴더 내부에 controller 패키지를 하나 만들어준다. 

conroller 패키지 만들기

  • controller 패키지 안에 HelloController 클래스를 생성해준다.

HelloController 클래스 만들기

  • 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")  // 웹 어플리케이션이 /hello로 들어오면 이 함수를 실행
    public String hello(Model model ) {
        model.addAttribute("data", "hello");
        return ("hello"); // template 중에서 hello.html을 실행하라는 의미
    }
}

템플릿 추가하기

  • src/main/resources/templates 폴더 안에 hello.html 파일을 추가한다.

hello.html 파일 위치

  • hello.html 파일에 다음 코드를 작성해준다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaft.org">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Hello</title>
</head>
<body>
  <p th:text="'안녕하세요. '+ ${data}">안녕하세요 손님.</p>
</body>
</html>
  • localhost:8080/hello로 들어가보면 다음과 같이 "data" 속성에 저장했던 "hello"값으로 바뀌어 출력되는 것을 볼 수 있다.

작동 원리

동작 원리

  1. 웹 브라우저에서 /hello 로 접근 하면 스프링 부트에 내장되어 있는 톰켓 서버에서 이를 받아 spring 컨테이너에 던져줌.
  2. 컨트롤러 내부에 @GetMapping("hello")를 찾아서 해당 메서드를 실행
  3. model에는 key:value 값을 저장 (여기서는 data:hello!!)
  4. return "hello"를 하면 templates/hello.html를 찾아감. (thymeleaf 템플릿 엔진 처리)
    • 컨트롤러에서 리턴 값으로 문자를 반환하면 viewResolver가 화면을 찾아서 처리한다.
    • 스프링 부트 템플릿엔진 기본 viewName 매핑 
    • 'resources/templates/' + {viewName} + '.html' 
반응형
SMALL

❗️이 포스팅은 인프런의 [스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술] 강의를 정리한 내용입니다.❗️

 

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의

스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확인해주세

www.inflearn.com

[스프링 입문기 2] 라이브러리 살펴보기

라이브러리 살펴보기

  • Gradle은 의존 관계에 있는 라이브러리를 함께 다운로드 한다.
  • Gradle이란 오픈소스 빌드 자동화 툴이다. 거의 모든 타입의 소프트웨어를 빌드할 수 있다고 한다.
  • 오른쪽 사이드바에 있는 Gradle 버튼을 눌러서 Dependencies를 확인할 수 있다.

라이브러리 확인 방법

스프링 부트 주요 라이브러리 

  • spring-boot-starter-web 
    • spring-boot-starter-tomcat : 톰캣 -> 웹서버를 담당
    • spring-webmvc : 스프링 웹 MVC
  • spring-boot-starter-thymeleaf : 타임리프 템블릿 엔진 -> 뷰를 담당
  • spring-boot-starter(공통) : 스프링 부트 + 스프링 코어 + 로깅
    • spring-boot
      • spring-core
    • spring-boot-starter-logging 
      • logback, slf4j

테스트 주요 라이브러리

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

 

 

 

 

 

 

 

반응형
SMALL

❗️이 포스팅은 인프런의 [스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술] 강의를 정리한 내용입니다.❗️

 

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의

스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확인해주세

www.inflearn.com

[스프링 입문기 1] 프로젝트 환경설정

준비

  • Java 17 설치
  • IntelliJ 설치

스프링 프로젝트 생성

https://start.spring.io/ : 스프링 부트 스타터

Spring Boot Starter 페이지

  • Project : Gradle - Groovy
  • Spring Boot : 3.1.2 (SnapShot이라고 되어 있는 것은 아직 정식 출시가 안 된 버전을 의미)
  • Language : java
  • Java : 17
  • Dependencies : Spring Web(웹 기반 프로젝트), Thymeleaf(템플릿 엔진 중 하나) 추가해주기

-> 하단에 Generate 버튼 눌러주기

-> 다운받은 폴더를 압축 풀기해주기

-> 폴더 안에 있는 build.gradle 파일을 IntelliJ에서 열어주기

폴더 계층 살펴보기

1. src 폴더

  • main 폴더와 test 폴더로 나누어져 있음.
    • main 폴더 : java 폴더 / resources 폴더(실제 자바 코드를 제외한 xml, html파일이나 설정 파일이 포함)
    • test 폴더 : test code가 들어 있음. (요즘 개발 트렌드에서는 Test code가 매우 중요하다.)

2. .gitignore

  • git에는 딱 필요한 소스코드만 올라가야 함. 
  • build된 결과물 등은 필요하지 않기 때문에 이를 관리해주는 파일.

3. build.gradle 파일

  • 초기 설정한 version이나 dependencies 내용이 들어 있는 파일.

build.gradle 파일

Spring Boot 실행해보기

  • src -> main -> hello -> hellospring -> HelloSpringApplication 파일 
  • main 함수 실행 (왼쪽에 초록색 run 버튼 클릭)

 

반응형
SMALL

+ Recent posts