정적 컨텐츠 (Static Content)
서버에서 하는것없이 /static폴더 위치한 정적 파일 그대로 클라이언트에 제공 방식.
스프링 부트 정적 컨텐츠 기능.
- http://localhost:8080/hello-static.html 요청
- 요청 서버가 스프링에 던진 후 우선 스프링 컨테이너에서 매핑된 컨트롤러있는지 확인 (일단 여기선 간단하게 씀)*
- 없으면 resources/static에 있는 해당 정적파일(hello-static.html) 있으면 그대로 반환
*컨트롤러가 정적 파일보다 우선순위 높음
MVC와 템플릿 엔진 (MVC + Template Engine)
서버에서 동적으로 HTML을 생성하여 클라이언트에게 반환하는 방식.
서버에서 템플릿 엔진(Thymeleaf,JSP)을 사용해 데이터를 동적으로 HTML에 삽입해 생성 후, 결과를 클라이언트에게 전송.
-Controller
java/hello.hello_spring/controller/HelloController
@Controller
public class HelloController {
@GetMapping("hello-mvc")
# 또는 (@RequestParam(value = "name", required = false)
public String helloMvc(@RequestParam("name") String name, Model model) {
model.addAttribute("name", name);
return "hello-template";
}
}
-View
resources/templates/hello-template.html
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!-- th:text 속성은 <p> 태그 안의 기존 내용을 대체함 -->
<p th:text="'hello ' + ${name}">hello! empty</p>
</body>
</html>
localhost:8080/hello-mvc?name=spring접속
1. 클라이언트가 브라우저에 url(/hello-mvc) 요청
2. DispatcherServlet이 요청 맞는 컨트롤러의 메서드 호출
3. "hello-template"을 반환시 ViewResolver가 resources/templates/{ViewName}.html 찾음
4. 찾은 후, Model의 데이터를 적용하여 최종 HTML을 생성해 브라우저에 응답
API (API-based)
서버에서 REST API나 GraphQL API를 이용해 JSON 형식으로 데이터 제공하고,
클라이언트(주로 JavaScript 기반 프론트엔드)는 이를 받아서 화면 렌더링해 동적으로 처리하는 방식.
@ResponseBody 문자 반환
-Controller
@Controller
public class HelloController {
@GetMapping("hello-string")
@ResponseBody //HTTP의 body에 내용 직접 반환. viewResolver사용x
public String helloString(@RequestParam("name") String name) {
return "hello " + name;
}
}
http://localhost:8080/hello-string?name=spring실행시
태그도없고 바로 문자 hello spring 뜸
@ResponseBody 객체 반환
@Controller
public class HelloController {
@GetMapping("hello-api")
@ResponseBody
public Hello helloApi(@RequestParam("name") String name) {
Hello hello = new Hello();
hello.setName(name);
return hello; //객체를 반환시 JSON방식으로 데이터 변환 반환
}
static class Hello { //Static 중첩 클래서(외부클래스 인스턴스생성없이 독립 동작 가능)
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
}
http://localhost:8080/hello-api?name=spring실행시
변환된 JSON형식 뜸 {"name":"spring"}
1. 클라이언트가 브라우저에 url(/hello-api) 요청
2. DispatcherServlet이 요청 맞는 컨트롤러의 메서드 호출
3. @ResponseBody 동작 (ViewResolver 대신 HttpMessageConverter가 개입 실행)
- 반환 타입이 문자열(String) → StringHttpMessageConverter 사용
- 반환 타입이 객체(Object) → MappingJackson2HttpMessageConverter(JSON 변환) 사용
4. JSON 변환 후 응답
*참고 프론트
React
REACT_APP_API_URL=http://localhost:8080
function App() {
const [data, setData] = useState(null);
useEffect(() => {
axios.get((`${process.env.REACT_APP_API_URL}/hello-api?name=야옹`) // API 호출
.then((response) => setData(response.data)) // JSON 데이터 저장
.catch((error) => console.error("Error fetching data:", error));
}, []);
return (
<div>
<h1>Spring Boot API 응답:</h1>
{data ? <p>이름: {data.name}</p> : <p>로딩 중...</p>}
</div>
);
}
CORS 설정 필요
@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class HelloController { ... }또는
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000");
}
};
}
}
'Spring' 카테고리의 다른 글
| [Spring] AOP(Aspect-Oriented Programming) (0) | 2025.01.22 |
|---|---|
| [Spring] 스프링 DB 접근(JDBC,JdbcTemplate,JPA,스프링 데이터 JPA) (0) | 2025.01.12 |
| [Spring] From 입력, 조회 (0) | 2024.12.22 |
| [Spring] 스프링 빈 등록과 의존관계 (0) | 2024.12.19 |
| [Spring] 웹 계층 구조, Test (0) | 2024.12.17 |