Spring Boot
: 프로젝트를 간편하게 설정할 수 있는 자바 웹 프레임워크
서버의 분리
Spring boot를 더 효율적으로 사용하기 위해 아래와 같이 서버를 분리하였다.
웹 서버는 브라우저에 HTML, CSS, JavaScript 등 정적 파일을 제공하고,
API 서버는 직접 DB와 연결하여 브라우저에게 데이터를 제공한다.
이때, 실제로 API 서버를 호출하는 것은 JS 파일을 받은 클라이언트이다.
⇒ 프론트엔드와 백엔드가 물리적으로 분리되기 때문에 인프라를 각자 관리할 수 있으며, 개발 역할이 분리되고 작업의 비효율성이 개선된다.
cf) 기존 프론트엔드에서는 Javascript가 동적 로직을 처리하지만, 기본적으로 클라이언트 브라우저에서 동작한다는 측면 때문에 정적 리소스로 분류된다.
REST (Representational State Transfer, RESTful)
: 클라이언트가 서버 데이터에 접근하는데 사용할 수 있는 GET, POST 등의 함수 집합을 정의한 아키텍처 제약 조건
(리소스 상태에 대한 표현을 요청자 또는 엔드포인트에 전송)API (Application Programming Interface)
: 두 애플리케이션 간의 통신 방법을 규정하고 도와주는 매개체REST API
: REST 제약 조건을 준수한 통신 매개체→ 백엔드 서버의 Controller는 RESTful 서비스만 제공해주도록 역할이 축소되었다!
CSR 기반의 SPA(Single Page Application)
SPA는 하나의 페이지로 구성된 어플리케이션으로, 모던 웹의 패러다임이다.
SPA에서 클라이언트가 초기 요청을 보내면, 프론트엔드 서버는 미리 준비해둔 정적 파일들을 클라이언트에게 제공한다.
페이지 렌더링 과정에서 DB 데이터가 필요한 경우에는, 브라우저가 백엔드 서버에게 API 요청을 보낸다. 백엔드 서버는 필요한 데이터를 JSON형태로 전달해주는 역할만 수행하므로 API 서버라고도 부른다.
이때 렌더링을 서버가 하는게 아닌, 클라이언트가 받은 JSON을 토대로 하기 때문에
CSR(Client Side Rendering) 방식으로 렌더링한다고 말한다.
이후, 사용자의 버튼 클릭과 같은 액션을 감지하여, JavaScript가 백엔드 서버로부터 필요한 부분만 받아서 페이지 리로딩 없이 데이터만 변경한다.
SPA는 처음에만 페이지를 받아오고 이후에는 받아오지 않는데, 그럼에도 데이터가 수정되고 조회되게 하고 싶어서 CSR이란 방식을 채택한 것이다.
1. Spring Boot 프로젝트 생성
STS4 실행 → 인코딩 설정(utf-8)
→ 메뉴 File → New → Spring Starter Project
→ 프로젝트 이름과 타입, 패키지를 설정 → [Next]
→ 의존성을 선택하여 쉽게 추가 가능하나, 이번에는 직접 설정해보고자 한다.
→ 아래와 같이 프로젝트가 생성되었다.
2. Spring Boot 초기 설정
pom.xml에 아래 2가지 의존성을 추가
- spring-boot-starter-web
: Spring MVC를 사용한 RESTful 서비스를 개발하는데 사용 - spring-boot-starter-tomcat
: tomcat 내장 서버 제공
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
</dependency>
→ java폴더에 생성되어 있는 프로젝트명+Application.java 파일을 열면 main 메소드를 확인할 수 있다. (Spring Boot를 가동하기 위해서는 main 메소드가 필요)
→ "Spring Boot App"으로 실행
→ 콘솔을 보면, 기본적으로 8080포트를 사용하고 있음을 확인할 수 있음
→ resources 폴더에 생성되어 있는 application.properties 파일을 수정하여 포트 변경 가능
→ 해당 포트로의 접속을 허용해주기 위해 WebConfigurer.java 생성
package com.sample.a;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration // 자동 호출되어 설정됨
public class WebConfigurer implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 모든 client 접속 허가
registry.addMapping("/**").allowedOrigins("*");
}
}
3. 백엔드 서버 구축
Controller에 문자열 또는 객체를 반환하는 두 종류의 메소드를 작성
@RestController // = Controller + ResponseBody
public class HelloController {
@GetMapping(value = "/hello")
public String hello() {
System.out.println("hello() " + new Date());
return "hello";
}
@GetMapping(value = "/gethuman")
public HumanDto gethuman() {
System.out.println("getDto() " + new Date());
return new HumanDto(0, "이름", "주소");
}
}
4. 프론트엔드 서버 구축
Eclipse IDE 실행 → 프로젝트 인코딩(utf-8), 서버(tomcat) 설정
→ Dynamic Web Project 생성
→ webapp에 index.html 생성
→ JavaScript와 JQuery를 사용하여 AJAX 통신 작성
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
.
.
.
<button type="button" id="btn">
hello ajax
</button>
<button type="button" onclick="btnclick()">
getName js
</button>
<p id="result"></p>
<script type="text/javascript">
/* JQuery 사용 */
$(document).ready(function() {
$("#btn").click(function() {
$.ajax({
url:"http://localhost:3000//",
type:"get",
success:function(str) {
$('#result').text(str);
},
error:function(){
alert('error');
}
});
});
});
/* JavaScript 사용 */
function btnclick() {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(xhttp.readyState == 4 && xhttp.status == 200) {
let json = JSON.parse(xhttp.responseText);
document.getElementById("result").innerText = json.name;
}
}
xhttp.open("get", "http://localhost:3000/human", true);
xhttp.send();
}
</script>
→ 백엔드 서버와 프론트 서버 실행시키기
→ 버튼을 클릭하면 데이터를 받아와 p 태그만 변경됨
