2024. 2. 17. 18:29ㆍ스프링
이전까지 웰컴 페이지를 만들어봤다.
https://just-do-it-man.tistory.com/155
스프링부트 웰컴페이지 - welcome page
스프링부트 프로젝트를 생성해서 실행하면 아래와 같은 화면이 뜬다. 스프링부트 프로젝트를 처음에 실행했을때 처음으로 나오는 웰컴 페이지를 만들어보자. 스프링부트 프로젝트가 실행되면
just-do-it-man.tistory.com
이제 웰컴페이지 뿐만아니라 url로 다른 화면들도 연결해보자.
컴퓨터를 하다 보면 사용자들이 페이지에서 다른 페이지로 이동을 한다. 이렇게 페이지가 변할 수 있는거는 사용자가 서버에 원하는 화면을 request(요청)했고 서버는 거기에 맞는 화면으로 response(응답)을 해준다. 그럼 사용자가 어떤 화면을 원하는지 어떠한 요청을 보낼지 서버에게 요청하는 방법은 url을 이용하는 방법이다. url은 어떤 서버 컴퓨터에 어떠한 요청을 보내는지 작성하는 방식이라고 생각하면 된다. 예를들어 네이버에서 뉴스 채널에 들어갔다고 해보자 그때 브라우저 상단에 있는 url 주소는
https://news.naver.com/section/105
IT/과학 : 네이버 뉴스
모바일, 인터넷, SNS, 통신 등 IT/과학 분야 뉴스 제공
news.naver.com
위와 같다.
https는 서버 컴퓨터에 사용자가 request를 보내는 양식이 https로 한다고 생각하면 된다. 우리가 친구들이랑 편지를 주고 받을때 어떠한 방식으로 편지를 작성해서 보낼지 약속을 해서 보내듯이 사용자 컴퓨터와 서버간의 통신을 https 방식으로 통일해서 통신을 하겠다고 생각하면 된다.
news.naver.com은 컴퓨터의 주소이다. 우리가 친구한테 편지를 붙일때 받는 친구의 집 주소를 넣어줘야 한다. 똑같이 사용자 컴퓨터가 서버 컴퓨터에게 통신을 보낼려면 서버 컴퓨터의 주소를 입력해줘야 한다. 컴퓨터간의 주소는 ip주소를 이용한다. ip 주소는 숫자.숫자.숫자.숫자 의 형태로 되어 있다. 예를들어 127.0.0.1은 자기 자신의 컴퓨터 주소이다. 우리가 네이버 뉴스 화면을 보려면 네이버 서버 컴퓨터의 ip 주소를 넣어줘야 한다. 그런데 news.nave.com 을 보면 숫자.숫자.숫자.숫자 형식이 아니다. 이것은 도메인을 이용해 우리가 익숙한 단어로 주소를 입력할 수 있게 한거다. 도메인은 인터넷에 연결된 컴퓨터를 사람이 쉽게 기억하고 입력할 수 있도록 문자(영문, 한글 등)로 만든 인터넷주소이다. 즉 숫자 형태의 주소는 기억하기도 힘드니 특정 도메인 명을 등록해서 그 도메인 명을 주소로 넣으면 도메인 등록한 컴퓨터 주소로 요청이 가게 되는거다.
/section/105 는 서버컴퓨터에게 원하는게 무엇인지 적어주는 곳이다. 네이버 서버 컴퓨터의 /section/105 경로에 가면 네이버 뉴스 화면으로 연결해주느 소스가 있을거다. 위에 네이버 링크는 IT/과학 뉴스를 요청한 경로이다. 만약 세계 뉴스를 원한다면
https://news.naver.com/section/104
세계 : 네이버 뉴스
아시아, 미국, 유럽 등 세계 뉴스 및 사진, 영문 기사 등 제공
news.naver.com
/section/104 경로로 요청을 보내면 해당 화면으로 이동시켜 준다.
그럼 직접 개발하면서 url 경로에 맞게 화면을 연결하는 작업을 해보자.
일단 "src/main/java/패키지경로" 밑에 controller 패키지를 만들어주고 거기에 controller 파일을 만들어주자.
controller 는 사용자의 요청이 처음으로 도착하는 지점이다. 여기서 사용자의 요청을 받아 데이터를 처리하거나 어떠한 화면으로 응답할지 결정한다고 생각하면 된다.
아래에 controller 파일 소스가 있다.
package groupInfo.study.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class StudyController {
@GetMapping("study")
public String study(Model model) {
model.addAttribute("data", "study");
return "study";
}
}
우리가 controller 파일을 만들었다. 그런데 컴퓨터는 이게 controller 파일인지 아닌지 모른다. 해당 java 파일을 controller로 만드려면 @Controller 어노테이션을 class이름 위에 작성하면 된다. 그럼 이게 사용자의 요청을 받는 서버 컴퓨터가 된거다. 이제 사용자의 요청이 서버 컴퓨터의 controller 까지 들어왔다. 이제 url 끝에 있는 경로에 무엇을 원하는지 적혀있는거를 처리해줘야 한다. 사용자가 url을 "http://localhost/study" 라고 요청을 보냈으면 /study에 대한 처리를 해줘야 한다. 이러한 요청에 대한 매핑을 @GetMapping으로 매칭을 해준거다. 사용자가 서버 컴퓨터에 요청을 하는 방식은 get 방식과 post 방식이 있다. 그중에 get 방식으로 보낸 요청은 @GetMapping을 통해 매핑을 해주고 post 방식으로 보낸 요청은 @PostMapping으로 매핑을 해주면된다. 거기에 대한 자세한 설명은 길어지니 찾아보기 바란다.
@GetMapping으로 매핑된 메소드의 반환 타입을 보면 String이다. 반환 타입을 String으로 해주면 src/main/resources/templates 경로에 반환되는 문자열과 같은 html 파일을 반환해준다. "study"를 return하였으니 study.html 이 사용자에게 response 된다.
반환 타입이 String 뿐만 아니라 다양한 방식으로 반환할 수 있다. 메소드의 반환 타입에 따라서 처리하는 방식이 다른데 아래 링크를 참조하면 된다.
https://devlogofchris.tistory.com/54
[Spring] Spring MVC Controller return 타입에 대해서
String Spring + View template을 사용할 때 흔히 사용하는 타입입니다. @GetMapping("/test") public String test(Model model) { model.addAttribute("data", data); return "/test/data"; } //@getMapping("")은 //@RequestMapping(value = "", method =
devlogofchris.tistory.com
그리고 파라미터 부분을 보면 Model 이 있다. 이거는 우리가 사용자에게 response하는 화면에 같이 보내주는 데이터이다. 즉 반환되는 화면에 데이터를 전달해주는데 Model 객체에 담아서 보내준다고 생각하면 된다. Model 객체에 데이터를 담아줄때는 addAttribute로 담아준다. 위에 소스를 보면 Model에서 "data"를 이용해 데이터를 찾으면 "study"가 나오도록 담겼다.
이제 사용자에게 반환되는 study.html 파일을 보자
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>타이틀이닷!</title>
</head>
<body>
<h1 th:text="'Hellow!! The thing you have to do is ' + ${data}"></h1>
</body>
</html>
위에 소스를 thymeleaf 템플릿 엔진을 이용해 서버에서 같이 반환해주는 데이터를 적용했다.
결과화면!!!!!
'스프링' 카테고리의 다른 글
| 스프링부트 프로젝트 빌드하고 실행하기 (0) | 2024.02.18 |
|---|---|
| 스프링부트 서버 재시작 없이 반영(spring-boot-devtools) (0) | 2024.02.18 |
| 스프링부트 웰컴페이지 - welcome page (0) | 2024.02.17 |
| 스프링부트 라이브러리 (0) | 2024.02.17 |
| 스프링부트 프로젝트 구조 및 설정파일 (1) | 2024.02.03 |