서버가 뭐냐면
서버가 뭐냐면 그냥 유저가 데이터 요청하면 그 데이터 보내주는 프로그램일 뿐입니다.
이거 해줘 그러면 진짜 그거 해주는 프로그램이 서버일 뿐임
Q. 유튜브 서버가 뭐임?
- 누가 동영상달라고 요청하면 동영상 보내주는 프로그램일 뿐입니다.
Q. 네이버 웹툰 서버가 뭐임?
- 누가 웹툰달라고 요청하면 웹툰보내주는 프로그램일 뿐입니다.
Q. 웹서버는 뭐임?
- 그냥 누가 웹페이지 달라고 하면 웹페이지 보내주는 서버일 뿐입니다.
그래서 서버개발이 어려운게 아니고
누가 메인페이지달라고 하면 메인페이지 보내주고
로그인페이지 달라고 하면 로그인페이지 보내주고
그런 식으로 코드짜면 웹서버개발 끝입니다.
실은 글 저장 수정 삭제 이런것도 처리해주는 기능도 있을 수 있는데 이런 것들은 나중에 해보고
이번 시간엔 간단하게 웹페이지 보내주는 서버와 그 기능부터 만들어봅시다.
서버기능 만들려면 Controller
일단 코드짜게 .java 파일을 아무데나 새로 만들어봅시다.
BasicController.java 라고 맘대로 작명해봤습니다.
(BasicController.java)
package com.apple.shop;
@Controller
public class BasicController {
}원래 .java 파일안엔 보통 파일명과 똑같은 클래스부터 넣고 시작해야하는데
클래스는 에디터에서 알아서 생성해줍니다.
여기다가 이제 서버기능만들면 됩니다.
서버기능을 만들고 싶으면 아무 클래스에 @Controller 써놓고 시작하면 됩니다.
@Controller
public class BasicController {
@GetMapping("/경로")
@ReponseBody
String hello(){
return "유저에게 보내줄데이터";
}
} @GetMapping() 안에 페이지 경로 마음대로 적고
@ResponseBody 쓰고
return 오른쪽에 유저에게 보내줄 데이터를 적으면
이제 /경로로 방문했을 때 그 데이터를 보내줍니다.
참고로 @ 붙은걸 작성할 땐 엔터키 잘 쳐서 상단에서 import 해와야 동작합니다.
Q. 왜 그래야함?
- Spring boot 프레임워크 사용법일 뿐이라 이렇게 쓸 뿐입니다.
골뱅이 잘 넣으면 알아서 서버기능이 되도록 만들어놓은 프레임워크임
심지어 골뱅이만 잘 붙이면 main 함수에 안넣어도 알아서 제때 잘 실행해줍니다.
@Controller
public class BasicController {
@GetMapping("/")
@ReponseBody
String hello(){
return "안녕하쇼";
}
} 그래서 저는 누가 / 메인페이지로 접속했을 때
"안녕하쇼"라고 유저에게 메세지를 보내는 기능을 만들어봤습니다.
그래서 프로젝트 실행해본 다음에 브라우저켜서 localhost:8080으로 접속해봅시다.
이게 여러분 메인페이지인데 접속해보면 "안녕하쇼"가 잘 나오는군요.
다른 페이지도 만들어보자
다른 웹사이트들 보면 메인페이지 말고 다른 페이지도 많지 않습니까 예를 들면
comic.naver.com/webtoon 으로 접속하면 요일웹툰 볼 수 있는 페이지를 보내주고
comic.naver.com/challenge 로 접속하면 도전만화 페이지 보내주고요
그런 식으로 URL을 다르게 입력하면 다른 페이지를 각각 보여줍니다.
우리도 이런 식으로 다른페이지하나 만들어봅시다.
예를 들면 누가 /about으로 접속하면 이 사이트 소개글같은거 보내주고 싶으면 어떻게해요?
@Controller
public class BasicController {
@GetMapping("/")
@ReponseBody
String hello(){
return "안녕하쇼";
}
@GetMapping("/about")
@ReponseBody
String hello(){
return "피싱사이트에요";
}
} 새로운 서버 기능이 하나 필요할 때 마다 @GetMapping() 덩어리 복붙해서 쓰면 되겠습니다.
html 보내기
@Controller
public class BasicController {
@GetMapping("/")
@ReponseBody
String hello(){
return "<h4>안녕하쇼</h4>";
}
} 간단한 문자 말고 html을 보내고 싶으면 return 오른쪽에 html 적어도 됩니다.
근데 보통은 보내고 싶은 html이 매우 긴 경우엔
별도의 파일 만들어서 html 집어넣어두고 그 파일을 전송할 수도 있습니다.
(resources/static/index.html)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h4>메인페이지인데요</h4>
</body>
</html><html css js 파일들은 resources 폴더안의 static 폴더에 보관하면 됩니다.
index.html 파일을 만들어서 위처럼 채워봤는데 ! 느낌표 입력하고 탭키 누르면 기본 양식이 자동완성됩니다.
.html 파일은 그냥 html 담는 파일이고 html은 웹페이지 만들 때 쓰는 언어임
@Controller
public class BasicController {
@GetMapping("/")
String hello(){
return "index.html";
}
} 유저에게 html 파일을 보내주고 싶으면 @ResponseBody 빼고 return 오른쪽에 "html파일경로" 적으면 됩니다.
@ResponseBody 를 쓰면 return 오른쪽에 있는걸 유저에게 보내라는 뜻이고
@ResponseBody 를 안쓰면 return 오른쪽에 있는 경로의 파일을 전송하라는 뜻이 됩니다.
파일경로는 static 폴더가 기본입니다.
오늘의 결론 :
웹페이지 하나 보내주는 기능 만들고 싶으면
@Controller 클래스 안에 함수하나 만들고 이거저거 채우면 만들 수 있습니다.
쇼핑몰을 만든다고 했는데
가장 중요한 '상품목록 보여주는 페이지'부터 하나 만들어봅시다.
누가 /list로 접속하면 list.html 같은 페이지를 하나 전송해주면 될 것 같군요.
그 안엔 상품들을 집어넣고요.
list.html 보내주는 기능을 만들어보자
(ItemController.java)
package com.apple.shop.item;
import org.springframework.stereotype.Controller;
@Controller
public class ItemController {
@GetMapping("/list")
String list(){
return "list.html"
}
} 그래서 파일 하나 새로 만들어서 API를 만들어봤습니다.
- 상품과 관련된 API들을 한 곳에 모아놓으려고 새로 파일 만들어봤습니다.
- 아무 클래스에 @Controller 붙이면 API들 안에 만들 수 있습니다.
- 원래 파일 상단에 package 파일경로; 라고 적어줘야 다른 파일에서도 여기 있던 코드를 사용가능합니다.
(list.html)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<img>
<h4>바지</h4>
<p>7억</p>
</div>
<div>
<img>
<h4>셔츠</h4>
<p>8억</p>
</div>
</body>
</html> list.html 파일도 만들어서 상품들을 채워봤습니다.
그럼 진짜로 /list 방문시 html 보이나 테스트해봅시다.
매번 다른 상품 보내줘야하는거 아님?
근데 이러면 접속할 때 마다 항상 같은 내용의 html 페이지만 보내주는거 아닙니까?
쇼핑몰은 맨날 다른 상품명이랑 가격을 보내야하는거 아님?
그러고 싶으면 템플릿 엔진이라는걸 사용합니다.
템플릿 엔진은 서버의 데이터를 html에 집어넣어주는걸 도와주는 외부 라이브러리입니다.
여러가지 템플릿 엔진들이 있는데 우리는 Thymeleaf 템플릿 엔진을 사용해보도록 합시다.
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}build.gradle 파일에 차이점만 잘 붙여넣고
load gradle changes 버튼누르면 외부 라이브러리 설치가 가능합니다.
라이브러리 설치했으면 서버 중지했다가 재시작해야 잘 적용됩니다.
이제 html 파일을 templates 폴더 안에 만들어야 Thymeleaf 문법으로 html을 만들 수 있습니다.
Thymeleaf 써도 기존 html 파일이랑 똑같이 작성하고 사용할 수 있는데
html 곳곳에 Thymeleaf 문법으로 서버데이터를 집어넣을 수 있다는게 차이점입니다.
Thymeleaf로 서버데이터 html에 박아서 보내주려면
이제 서버에서 특정 html 파일에 서버의 데이터를 집어넣을 수 있는데 어떻게 하냐면
1. 서버 API 함수의 파라미터에 Model model 넣고
2. API안에서 model.addAttribute("작명", 전송할데이터)
3. html 태그에 th:text="${작명}"
이런거 차례로 쓰면 됩니다.
@GetMapping("/list")
String list(Model model) {
model.addAttribute("name", "홍길동");
return "list.html";
} 1. 서버 API 함수의 파라미터에 Model model 넣고
2. model.addAttribute("작명", 전송할데이터) 쓰면 됩니다.
그럼 앞으로 list.html에서 name이라고 사용하면 "홍길동"이 출력됩니다.
(list.html)
<h4 th:text="${name}">바지</h4> 3. html 태그에 th:text="${작명}" 이라고 써야 서버에서 보낸 데이터 출력이 가능합니다.
그래서 위 html을 유저에게 전송할 땐 앞으로 <h4>태그에 "홍길동"이 박혀서 전송됩니다.
Thymeleaf 문법을 사용하고 싶으면 templates 폴더로 html 파일을 옮겨야 잘 동작합니다.
/list 페이지 방문해서 진짜인지 실험해봅시다.
'Spring Boot' 카테고리의 다른 글
| MySQL Database 호스팅 받기, 서버에서 Database 연결 & JPA 설치 (4) | 2025.03.24 |
|---|---|
| 자바 기본 문법 (변수, 함수, if, for, class, constructor) (1) | 2025.03.18 |
| Spring Boot란 (2) | 2025.03.16 |