스터디/back

Part1 ) 스프링 부트 개요

ㅈㅣ니 2023. 11. 15. 01:48

새롭게 시작하는 책!

매일 조금씩 공부하겠다고 다짐했다.

1장 스프링 부트 시작하기

1) 스프링 부트란?

스프링 부트는 스프링 프레임워크(Spring Framework)를 개선한 것이다.

  • 개발 환경 설정을 간소화
    • 미리 설정된 스타터 프로젝트로 외부 라이브러리를 최적화해 제공한다.
  •  웹 애플리케이션 서버를 내장
    • WAS 서버인 톰캣을 내장하고 있어서, 웹 서비스를 .jar 파일로 간편하게 배포할 수 있다.

2) 개발 환경 설정

1. JDK 17 설치

스프링 부트 3는 JDK 17이상만 지원하기 때문에 JDK 17 설치 필수!

 

https://yegenie2.tistory.com/2

 

[JAVA] JAVA 8에서 JAVA 11로 변경하기

최근 듣고있는 스프링 강의에서 강사님이 java 버전을 11로 쓰라고 권장하셨지만 고집을 부리고 8 버전으로 강의를 시작했다. 그 결과,,, 각종 오류들이 생겨서 강의를 따라가는 속도가 너무 느려

yegenie2.tistory.com

이거 보고 버전을 바꾸면 된다.

버전은 cmd 창을 키고 java -version 입력하면 나온다.

 

2. IDE 설치

책에서는 인텔리제이 Community 버전을 쓴다.

But, 나는 Ultimate 버전이 좀 더 편해서 유료 버전으로 쓴다. (설치 방법은 아래 링크에 있다.)

 

https://yegenie2.tistory.com/18

 

[IntelliJ] 인텔리제이 Ultimate 설치 및 실행

오늘은 인텔리제이 설치방법을 정리해보겠다. 예전에 월단위로 구독했다가 취소하고 이번에 다시 쓸 일이 생겨서 재구독하려고 한다. 1. 사이트 접속 https://www.jetbrains.com/ko-kr/idea/download/?section=wi

yegenie2.tistory.com

 

3. 스프링 부트 프로젝트 만들기

Spring Initializr 홈페이지 접속 https://start.spring.io/

여기에 들어가서 프로젝트 만들기

 

이렇게 세팅하고 프로젝트를 생성한다.

 

탐색기

프로젝트 탐색기에서 src 디렉터리를 펼치면 main에 java (자바 코드 저장) 와 resources(외부 파일 저장) 폴더가 나온다.

메인 메서드는 FirstprojectApplication 을 열면 확인할 수 있다. ( 메서드 실행시키면 서버가 구동된다. )

 

서버 동작 확인.

스프링부트 프로젝트가 실행된 서버에 접속했다.

에러가 뜨는 이유는 view 가 없어서 뜨는거임! ( hello.html 파일을 static 폴더에 만들어줬더니 창이 뜬다. )

 

2) 웹 서비스의 동작 원리 

클라이언트 - 서버 구조

 

웹 브라우저는 클라이언트로서 동작하고, 스프링 부트는 서버 역할로 동작.

( 서버가 실행되어야 웹 브라우저를 통해 웹 서비스에 접근할 수 있다. )

 

localhost:8080/hello.html 의 의미

  • localhost : 내 컴퓨터의 IP 주소를 지칭한 것 (127.0.0.1)
  • 8080 : 포트번호를 의미 // 프로젝트가 톰캣에 담겨 8080에서 수행되고 있다는 의미.
  • hello.html : 서버에 요청하는 파일 ( 보통 src > main > resources > static 디렉터리에서 찾음 )

 

퀴즈)

1. localhost:8080/hello.html과 같이 웹 사이트 주소에 파일명을 직접 명시할 경우 서버는 어떤 디렉터리에서 파일을 찾을까요?

src > main > resources > static

 

2. localhost:8080/hellworld.html로 접속했을 때 다음과 같이 출력되도록 만들어 보세요.

결과)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HELL</title>
</head>
<body>
  <h1>Hell로 월드!!!!!!</h1>
</body>
</html>

 

결과

 

2장 MVC 패턴 이해와 실습

뷰 템플릿 : 화면을 담당하는 기술.  머스테치 ( Mustache ) 

-> 그 외에 Thymeleaf , JSP 등이 있다.

 

MVC 패턴 ( Model - View - Controller Pattern )

MVC 패턴

view : 화면을 담당

controller : 클라이언트의 요청에 따라 서버에서 처리하는 역할

model : 데이터를 관리하는 역할

 

실습 )

src > main > resources > templates 디렉터리에 뷰 템플릿 페이지를 만들었다.

이 페이지를 웹 브라우저에서 보려면 컨트롤러와 모델이 있어야한다.

 

1) 컨트롤러 생성

src > main > java 디렉터리에 있는 기본 패키지에 controller 패키지 추가 및 클래스 파일 생성

 

보통 컨트롤러의 이름은 ' ooooController '라고 작명한다.

컨트롤러) 

package com.example.firstproject.controller;

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

@Controller
public class FirstController {

@GetMapping("/hi") //URL 요청 접수
 public String niceToMeetYou() {
return "greetings"; // greetings.mustache 파일 반환 ( 파일 이름만 적어준다.)
 }
}

 

어노테이션

@Controller : 해당 클래스가 컨트롤러임을 선언

@GetMapping() : URL 요청을 접수한다. 웹 브라우저가 /hi를 입력해서 서버에 요청해야 페이지가 반환된다.

 

결과

 

2) 모델 추가

템플릿에 변수를 쓰면 출력값을 다양하게 바꿀 수 있다. 이럴 때 모델을 써서 변수를 선언한다.

 

우선 템플릿에 변수명을 적어준다.

 

[greetings.mustache]

<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <h1>{{username}}님, 반갑습니다!!!!!!!</h1> <!--이름을 변수로 지정.-->
</body>
</html>

 

모델은 컨트롤러의 메서드에서 매개변수로 받아온다.

모델에서 변수를 등록할 때는 addAttribute() 메서드를 사용한다.

model.addAttribute("변수명", 변숫값)

 

[FirstController.java]

package com.example.firstproject.controller;

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

@Controller
public class FirstController {

@GetMapping("/hi") //URL 요청 접수 (내맘대로 지정)
 public String niceToMeetYou(Model model) { // model 객체를 받아온다. Model 클래스 패키지 임포트.
 model.addAttribute("username", "핑구");
 return "greetings"; // greetings.mustache 파일 반환 ( 파일 이름만 적어준다.)
 }
}

 

이렇게 선언한 변수가 나온다.
mvc 실습 요약

 

 

3) 뷰 템플릿 페이지에 레이아웃 적용

부트스트랩에서 스타일 코드를 가져와서 header-content-footer를 만들었다.

 

코드를 템플릿화하면 가독성을 높일 수 있다. + 유지보수도 용이함.

/goodbye 페이지에 적용했다.

templates 디렉터리 안에 layouts 디렉터리를 만들어주고 거기에 header, footer를 분리해서 넣어줬다.

 

[ goodbye.mustache ]

{{>layouts/header}}
<div class="bg-secondary text-white p-5">
 <h1>{{nickname}}님, 다음에 또 만나요!!!!</h1>
</div>
{{>layouts/footer}}
</body>
</html>

 

뷰 템플릿 파일을 불러올 때는 {{>파일경로/파일명}} 으로 작성한다. 

 

코드 템플릿화 해서 적용

퀴즈 정답)

1번 : 

ㄱ : 뷰 템플릿

ㄴ : 컨트롤러

ㄷ : 모델

ㄹ : @Controller

ㅁ : @GetMapping()

2번 :  3 ( 컨트롤러의 메서드 반환값은 뷰 템플릿 페이지의 확장자를 포함하지 않고 파일명만 작성한다.)

3번 : 

ㄱ : 레이아웃

ㄴ : 부트스트랩

ㄷ : 템플릿화

 

셀프체크 ) 랜덤 명언 페이지

[ SecondController.java]

package com.example.firstproject.controller;

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

@Controller
public class SecondController {
    @GetMapping("random-quote")
    public String randomQuote(Model model) {
        String[] quotes = {
                "행복은 습관이다. 그것을 몸에 지니라." +
                        "-허버드-",
                "고개 숙이지 마십시오. 세상을 똑바로 정면으로" +
                        "-헬렌 켈러-",
                "고난의 시기에 동요하지 않는 것, 이것은 진정 " +
                        "칭찬받을 만한 뛰어난 인물의 증거다. -베토벤-",
                "당신이 할 수 있다고 믿든 할 수 없다고 믿든" +
                        "믿는 대로 될 것이다. -헨리 포드-",
                "작은 기회로부터 종종 위대한 업적이 시작된다. " +
                        "-데모스테네스-"
        };
        int randomInt = (int) (Math.random() * quotes.length);
        model.addAttribute("randomQuote", quotes[randomInt]);
        return "quote";
    }
}

 

결과

반응형