코딩 자율학습 스프링 부트 3 자바 백엔드 개발 입문 1~2장

spring boot를 intellij와 연동

spring boot 템플릿 만들기

 

intellij 에 불러왔을 때 탐색창

 

개발 연습

 

 

 

 

 

 

<localhost:8080/hello.html>

 

- localhost: '내 컴퓨터'라는 서버의 주소(집 주소)

- 8080: 방 번호

- hello.html: 클라이언트에서 요청한 파일

→ 스프링부트가 "src > main > resources > static" 디렉토리에서 파일을 찾음

→ 찾은 html 코드를 응답으로 보냄

 

* 톰캣: 스프링 부트를 담은 웹 서버

→ 8080에서 수행되고 있다는 뜻

 

 

뷰 템플릿

 

 

- Model: 데이터 관리

- View: 화면에 보여주기

- Controller: 클라이언트 요청 처리

→ 컨트롤러가 클라이언트의 요청을 받고, 뷰가 최종페이지를 만들고, 모델이 최종페이지에 쓰일 데이터를 뷰에 전달

View

뷰 템플릿은 "src > main > resources > templates"에 저장

뷰 템플릿 만들기

 

 

Controller

"src > main > java > com.example.프로젝트명"

 

FirstController는 다음과 같은 역할을 한다.

1. 이 클래스가 컨트롤러임을 선언하는 @Controller 어노태이션을 작성

→ Controller 클래스 패키지 (org.springframework.stereotype.Controller)가 자동으로 임포트됨

* 어노태이션: 컴파일 및 실행 과정에서 코드를 어떻게 처리해야 할지 알려 주는 추가 정보

 

2. 반환형이 문자열인 niceToMeetYou() 메서드를 선언 & 공백 문자열(" ")을 반환하도록 return ""; 문 추가

→ 뷰 템플릿 반환 가능(앞에서 정의한 greetings.mustache)

@Controller → 컨트롤러를 선언

@GetMapping("/hi") → 페이지 "greetings.mustache"를 반환해달라는 url 요청 접수

return "greetings"; → 서버가 알아서 templates 디렉터리에서 greetings.mustache 파일을 찾아 웹 브라우저로 전송해준다.

 

▶ localhost:8080/hi로 접속하면 greetings.mustache 파일을 찾아 반환

 

 

Model

→ html은 정적이라면, mustache는 동적으로 바꿀 수 있는 코드다.

 

이렇게 다른 것은 그대로 하고 사용자 이름을 바꾸기 위해서는 다음과 같이 {{변수}} 를 사용하면 된다.

그리고 이 변수는 MVC 패턴에서 데이터를 관리하는 '모델'을 사용한다.

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

 

→ username이라는 변수를 추가하고 Model 타입의 model 매개변수 추가 및 변수 등록

변수 추가

→ 변수와 변수에 들어가는 내용을 각각 적어준다. username에 언제든 원하는 이름을 넣을 수 있다.

 

요약

MVC 패턴 실습 요약

 

1. 컨트롤러가 @GetMapping("/hi")를 통해 클라이언트의 요청 받음

2. niceToMeetYou() 메소드 수행

3. 모델을 통해 변수 등록 → greetings.mustache(뷰 템플릿) 파일 반환

 

실습

 

클라이언트가 localhost:8080/bye 페이지 요청했을 때

 

1. 컨트롤러에 해당 컨트롤러 적어주고

 

2. 뷰 템플릿(mustache) 추가

 

 

뷰 템플릿 페이지에 레이아웃 적용하기

 

헤더-푸터 레이아웃

 

header - 사이트 안내를 위한 내비게이션

content - 내용

footer - 사이트 정보

 

Bootstrap

: 웹 페이지를 쉽게 만들 수 있도록 작성해 놓은 코드 모음

: 각종 레이이웃, 버튼, 입력창 등 디자인 미리 구현 → HTML, CSS, JS 코드를 가져와 사용하기만 하면 됨

* 각자 최신 버전 사용하면 됨

Bootstrap의 starter template를 greetings.mustache 템플릿에 복사한다.

1. header-content-footer 영역 구분

 

2. header에는 bootstrap의 navigation 템플릿 가져와 사용

 

 

3. footer에는 <hr>과 <p>를 사용해 다음과 같이 적어보자.

 

4. bootstrap에서 다른 기능들도 마음껏 골라 사용 가능

 

5. 다른 뷰 템플릿과 같은 header, footer 사용할 경우

→ 다음과 같이 header ,footer를 변수화해서 사용하면 된다.

 

header와 footer 영역을 변수를 만들기 위해서는 각 영역을 각각 발췌해 템플릿 파일로 만들어야 한다.

 

layouts 아래 header와 footer 템플릿을 따로 빼놓고

 

goodbye.mustache 파일에 변수를 두면 된다. 그러면 해당 템플릿을 간결하고 목적이 보이도록 해놓을 수 있다.