[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션 0~1 (프로젝트 생성, 라이브러리 살펴보기, View환경설정, 빌드하고 실행하기)

티스토리 뷰

Spring

[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션 0~1 (프로젝트 생성, 라이브러리 살펴보기, View환경설정, 빌드하고 실행하기)

chaewonni 2023. 11. 7. 13:18

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8

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

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

www.inflearn.com

강의링크

IntelliJ 설치 및 프로젝트 생성

https://www.jetbrains.com/idea/download/?section=windows

Download IntelliJ IDEA – The Leading Java and Kotlin IDE

Download the latest version of IntelliJ IDEA for Windows, macOS or Linux.

www.jetbrains.com

IntelliJ Community Edition버전을 다운로드 해주었다.

💡스프링 부트 스타터 설정

위와 같이 선택해주었다. Spring Boot에서 SNAPSHOT은 아직 만들고 있는 버전이고, M3은 아직 정식으로 release되지 않은 버전이기 때문에 정식버전(뒤에 아무런 영어가 없는)을 선택해주었다. 3.0이상부터는 강의 내용과 달라지는 점이 조금 있어서(Java17과 호환..) 2.7.17을 선택해주었는데, 이것도 자바 17과 호환되는 거라 나중에 코드를 바꿔주어 Java11과 호환되게 해주었다.

Denpendencies는 어떤 라이브러리를 쓸건지를 뜻하는데, web을 building하기 위한 Spring Web라이브러리, html을 만들어주는 Thymeleaf 라이브러리 2개를 선택해주었다.

다 설정해준 후에 좌측 하단에 있는 GENERATE 버튼을 누르면 압축 파일을 다운로드 받을 수 있다. 원하는 폴더에 압축을 푼 뒤에 IntelliJ로 불러오면 된다.

💡프로젝트 살펴보기

IntelliJ를 실행하여 build.gradle파일을 선택하여 프로젝트를 열면, 위와 같은 화면을 볼 수 있다.

src안에는 main폴더와 test폴더가 있다.

build.gradle파일을 클릭하면 위와 같은 코드가 적혀있는데, 이 코드들은 버전을 설정하고 라이브러리들을 땡겨오는 코드들이 있다. 나는 Java11이 다운받아져있기 때문에 sourceCompatibility를 11로 수정해주었다.

dependencies를 보면 아까 선택한 thymelaft와 web을 확인할 수 있다.

💡프로젝트 실행

HelloSpringApplication을 선택해서 실행하면 밑에 Tomcat ~.. localhost::8080과 같은 것이 뜨는 걸 확인할 수 있는데,

실행을 한 후 http://localhost:8080 에 들어가면

위와 같은 화면이 뜬다. 이 화면이 뜨면 프로젝트가 정상적으로 잘 실행이 된 것이다. 만약, 실행을 하지 않고 위 링크에 들어간다면 알 수 없는 웹페이지라고 뜰 것이다.

💡라이브러리 살펴보기

오른쪽 측면에 코끼리 아이콘을 누르면 다양한 라이브러리들을 살펴볼 수 있는데, 다양한 의존관계를 확인할 수 있다.

이를 통해 스프링부트와 관련된 라이브러리를 쓰면 스프링 코어까지 다 땡겨서 스프링과 관련된 게 다 setting되어 돌아감을 알 수 있다.

💡View 환경설정

💻정적 페이지 만들기

페이지를 직접 만들어주기 위해 main/resources/static 폴더 안에 index.html이라는 새로운 파일을 만들어 주었다.

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

index.html에 위와 같은 코드를 작성해준 후에 프로젝트를 실행하고, 다시 http://localhost:8080 링크로 들어가면

위와 같은 화면이 뜨는 것을 확인할 수 있다.

💻정적 페이지 만들기

이번에 동적 페이지를 만들어 볼 것인데, 동적 페이지는 말 그대로 동작하고 프로그래밍 할 수 있는 페이지를 말한다.

따라서 main/java/hello.hellospring 폴더에 Controller라는 새로운 패키지를 생성하고 그 안에 HelloController라는 새로운 java class 파일을 만들어주었다.

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 hell(Model model){
        model.addAttribute("data", "hello!!");
        return "hello"; //hello.html가서 실행시켜라
    }

}

HelloController 클래스에 위와 같은 코드를 작성해주었고,

main/resources/templates 폴더에 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>
<!--${data}가 hello!!로 치환-->
</body>
</html>

위와 같은 코드를 작성해주었다. 이 과정은 HelloController가 hello.html파일을 control해주는 것을 의미한다.

이제 다시 프로젝트를 실행하여 http://localhost:8080/hello링크로 들어가면

위와 같은 화면이 뜨는데, 이는 코드 주석에 작성하였듯이 ${data}가 hello!!로 치환된 것이다.

동작 원리는 이러하다.

웹 브라우저에서 http://localhost:8080/hello 에 들어가면 스프링부트는 톰켓이라는 웹서버를 내장하고 있다.
/hello 페이지는 get 방식으로 들어왔기 때문에 @GetMapping("hello") 코드를 가지고 있는 HelloController를 톰켓을 통해 부르며, 이 컨트롤러 안에 있는 메서드가 실행된다.
해당 메서드에서 key는 "data", value는 "hello!!" 라는 model을 만들고 return "hello"; 를 통해 값이 들어간 model을 가지고 hello.html 의 화면을 렌더링 시켜준다.

'Spring' 카테고리의 다른 글

[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션6 (스프링 DB 접근 기술) (3)	2023.12.29
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션5 (회원 관리 예제 - 웹 MVC 개발) (2)	2023.12.24
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션4 (스프링 빈과 의존관계) (0)	2023.11.27
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션3 (회원 관리 예제 - 백엔드 개발) (0)	2023.11.08
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션 2 (정적컨텐츠, MVC와 템플릿 엔진, API) (1)	2023.11.07

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

글 보관함

자라자

티스토리 뷰