[SpringBoot]2. View만들어보기-Controller와 View에 대하여
안녕하세요
오늘은 저번 글에 이어서 Controller와 View에 대하여 다뤄보도록 하겠습니다.
1. 스프링의 동작 구조
스프링은 서버 프레임 워크이기 때문에 클라이언트와 상호작용을 해야 합니다.
이 과정에서 필요한 것이 View와 Controller 인데, 이 둘을 간단히 말하면
view는 우리가 보는 웹페이지 형식의 html 파일(정적 리소스)를 말하는 것이고
controller는 서버에서 온 요청을 받아서 서버 로직을 수행한 뒤 그 결과를 다시 클라이언트에 넘기는 역할을 합니다.
예를 들어 우리가 컨트롤러에
localhost:8080/home 이라고 요청을 보내면 서버 프로젝트 내에 있는 index.html이라는 파일을 반환해주고 동시에 hello라는 데이터를 보내주는 코드를 만들었다고 가정해 봅시다.
그 동작 환경을 그림으로 정리해보면 다음과 같습니다.
그림을 설명하면 다음과 같습니다.
웹 브라우저가 요청을 보내면 우리가 만들어 놓은 cmmnController라는 녀석의 컨트롤러가 요청을 받아서
hello라는 데이터를 넣어주고 서버 내에 index라는 페이지를 찾아서 브라우저에 반환해라! 라는 코드를 수행합니다.
그러면 그 요청을 받아서 viewResolver라는 녀석이 컨트롤러가 말한 index라는 페이지를 찾아서 보내주게 됩니다.
아직 무슨말인지 잘 감이 안오셔도 괜찮습니다.
직접 코드를 짜보고 이 부분을 다시 읽으시면 이해가 되시리라 생각합니다.ㅎㅎ
2. View 페이지 제작하기
먼저 그러면 view를 만들어보도록 하겠습니다.
이 view 페이지를 다루는 언어가 여러가지가 있는데 저희는 thymeleaf(타임리프)라는 템플릿 언어를 사용합니다.
만약 처음들어보셨다면 아래 글을 한번 읽어보고 오시면 도움이 되실겁니다:)
https://chung-develop.tistory.com/3
[Thymeleaf] SpringBoot에 Thymeleaf 적용하기
[Thymeleaf] SpringBoot에 Thymeleaf 적용하기 기존에 JSP환경에서 뷰를 제작하다가 한계를 느껴 다른 템플릿을 적용해보기로 마음을 먹었다. 스프링이 지원해주는 템플릿 엔진을 알아보던 중 FreeMarker Groo
chung-develop.tistory.com
타임리프는 기본적으로 src/resources/templates 폴더 아래에 뷰 페이지들을 만들게 됩니다.
아래 사진과 같이 templates 폴더 아래에 index.html페이지를 만듭니다.
(참고로 templates 폴더 아래에 index라는 이름으로 html파일을 넣어놓으면 스프링 부트가 해당 파일을 welcome page(사이트에 들어왔을 때 뜨는 첫 페이지)로 인식하게 됩니다.)
그리고 html 헤더에 타임리프를 적용한 뒤 아래와 같이 코드를 적당히 짭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>나만의 게시판 만들기!</title>
</head>
<body style="text-align: center">
안녕하세요 게시판 입니다.
<p th:text="${data}"></p>
</body>
</html>
|
cs |
특별한 기능은 없고 th:text에서 서버에서 넘겨준 data라는 속성의 값을 띄워주는 코드만 있습니다.
3. Controller 제작하기
이번엔 클라이언트의 요청을 받아 처리할 컨트롤러 로직을 만듭니다.
이 때 반드시 src/main/java/프로젝트 패키지 경로 아래에 폴더를 만들어야 합니다.
(SpringBoot는 애플리케이션이 실행 될 때 스프링 고유의 기능인 의존성 주입을 위한 Bean탐색이 Main이 실행되는 파일 경로 아래부터 탐색이 이루어지기 때문에 다른 곳에 만들면 에러가 날 수 있습니다! 지금은 무슨말이지 모르셔도 괜찮습니다ㅎㅎ)
코드는 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
|
@Controller
public class CmmnController {
@GetMapping("home")
public String home(Model model){
model.addAttribute("data","어서오세요!");
return "index";
}
}
|
cs |
그냥 home이라는 url로 요청이 들어오면 model에 data라는 이름의 value값을 세팅해주고
viewResolver에게 index라는 파일을 찾으라고 요청하고 끝입니다.
참고) ViewResolver가 파일을 찾는 방법
컨트롤러에서 리턴값으로 문자를 반환하면 뷰 리졸버가 파일을 찾는데 그 규칙은 다음과 같습니다.
resources/templates/ +{ViewName}+ .html
이런 식으로 우리가 리턴한 viewName앞뒤로 값을 디폴트로 붙여서 찾게 되니 이를 감안해서 viewName을 반환하셔야 됩니다.
저는 templates폴더 바로 밑에 index.html 파일을 만들었기 때문에 index만 반환해준 것입니다.
4. 컨트롤러에 요청 보내기
이제 웹 브라우저를 열어서 http://localhost:8080/home 으로 요청을 보내줍니다.
그러면 아래와 같이 의도한 대로 잘 뜨는 것을 볼 수 있습니다.
+ 혹시 로그인 창이 뜨시는 분들은 springSecurity때문에 그런 것이니 build.gradle에 가셔서 아래 부분을 주석처리하시고 refresh 돌리고 서버 실행해보면 로그인 창 없어질 겁니다.
implementation 'org.springframework.boot:spring-boot-starter-security'+ 한글이 깨지시는 분은 인텔리제이 내부의 파일 인코딩 설정일 수 있습니다.
File-Setting으로 가서 FileEncodings 항목을 찾습니다(사진 참조)
아래 이미지에서 모두 UTF-8로 되어있지 않다면 UTF-8로 변경하고 한글 작성한 부분을 가보시면 한글이 깨져있을건데 다시 한글로 쳐주면 제대로 나오는 모습을 볼 수 있습니다.
(컴파일하면서 UTF-8이 아닌 다른 형식으로 인코딩되어 한글이 깨진 것으로 보입니다)
이번 포스팅은 여기서 마치도록 하겠습니다.
보시면서 잘못된 점이나 이해가 잘 안가셨던 부분이 있으시다면 댓글로 알려주세요:)
감사합니다!
▶다음 글
[SpringBoot]3. DB구축을 위한 MySQL 및 Workbench 설치하기!(feat.게시판을 만들어보자!)
https://chung-develop.tistory.com/18
[SpringBoot]3. DB구축을 위한 MySQL 및 Workbench 설치하기!(feat.게시판을 만들어보자!)
[SpringBoot]3. DB구축을 위한 MySQL 및 Workbench 설치하기!(feat.게시판을 만들어보자!) 안녕하세요! 오늘은 백엔드 개발을 할 때 DB설치가 꼭 필요한데, 그 중에서 MySQL에 관해서 포스팅 해보려고 합�
chung-develop.tistory.com
▶이전 글
[SpringBoot]1. 스프링부트 프로젝트 시작하기(feat.게시판을 만들어보자!)
https://chung-develop.tistory.com/12
[SpringBoot]1. 스프링부트 프로젝트 시작하기(feat.게시판을 만들어보자!)
[SpringBoot]1. 스프링부트 프로젝트 시작하기(feat.게시판을 만들어보자!) 안녕하세요! 오늘은 SpringBoot를 이용한 게시판 만들기 프로젝트의 첫 포스팅을 시작해볼까 합니다. 개발에 사용될 예정��
chung-develop.tistory.com
'Backend > 게시판만들기' 카테고리의 다른 글
| [SpringBoot]SpringDataJPA를 활용하여 회원가입 예제- Controller,Service,Repository의 역할및 구현 (3) | 2020.08.10 |
|---|---|
| [SpringBoot]SpringDataJPA를 활용한 회원가입 예제- View제작하기 (0) | 2020.08.08 |
| [SpringBoot] 개발용으로 가볍고 편리한 H2 데이터베이스 설치 및 SpringBoot에 연동하기 (0) | 2020.08.06 |
| [SpringBoot]DB구축을 위한 MySQL 및 Workbench 설치&SpringBoot 연동 (0) | 2020.08.05 |
| [SpringBoot]스프링부트 프로젝트 시작하기 (0) | 2020.07.29 |
