프론트엔드 클라이언트를 반환하는 서버가 있다. 이 서버는 React.js 애플리케이션을 반환한다. 스프링 부트를 통해 백엔드 애플리케이션인 REST API를 구현한다. 이 API는 프론트엔드 애플리케이션이 사용한다. 프론트엔드와 백엔드를 분리하는 이유는 모바일 앱으로 만들 때 별도의 백엔드 개발 없이 이 REST API를 사용할 수 있다. 즉, 마이크로서비스 아키텍처로 서비스를 확장하는 데 용이하다.
HTTP: 클라이언트-서버 간의 통신 방법
HTTP request로 브라우저에 URL을 입력하면, URL에 해당하는 서버로 HTTP GET 요청을 전송한다. 그 결과인 HTTP response를 브라우저에 렌더링(화면에 디스플레이)한다.
HTTP request 요청에는 GET, POST, PUT, DELETE 같은 메서드를 지정할 수 있다. 위 메서드는 대체로 정해진 기능이 있지만, 개발자가 HTTP 메서드를 통해 실행할 API를 작성할 수 있다.
HTTP reponse 첫 줄에 200은 응답 코드로 성공적으로 요청을 처리했음을 의미한다. Reponse body에는 랜딩할 페이지의 HTML같은 요청 처리 결과를 보낸다.
자바스크립트 오브젝트 노테이션, JSON
JSON은 오브젝트를 표현하는 문자열이다. object는 메모리 상에 존재하는 어떠한 자료구조다. 예를 들면, 아래와 같은 클래스로 object를 만들 수 있다.
public class TodoItem{
String title;
boolean done;
public TodoItem(String title, boolean done){
this.title = title;
this.don = done;
}
}
new TodoItem("myTitle", false);
메모리 상에는 'myTitle'과 false가 연속된 주소에 저장되어 있을 것이다. 오브젝트는 아키텍처와 언어에 따라 달라서 서로 다른 app이 통신하려면 일정한 형식으로 오브젝트를 변환해야 한다.
메모리 상의 오브젝트를 다른 형태로 변환하는 작업을 직렬화(serialization), 반대를 역직렬화(deserialization)이라 한다. JSON으로 직렬화하면 key-value 형태로 오브젝트를 표현한다.
{
"title":"myTitle",
"done":false
}
브라우저 상에서 실행될 React Application은 JSON을 요청 바디에 넣어 서버로 보낸다. JAVA 백엔드 에플리케이션은 JSON을 바디에서 꺼내 TodoItem으로 변환한다. 즉, JSON을 이용해 자료를 교환한다.
서버란?
서버는 지정된 포트에 소켓(네트워크 연결 통로)을 열고 클라이언트가 연결할 때까지 무한 대기하는 프로그램이다. 클라이언트가 연결하면 해당 클라이언트 소켓에서 요청을 받아와 수행하고 응답을 작성해 전달한다. File Transfer Protocol을 사용하면 FTP 서버, HTTP를 사용하면 HTTP 서버가 되는 것이다.
정적 웹 서버
서버의 디렉터리에 있는 html 파일에 추가 작업 없이 HTTP response body에 넣어 전달한다. 이러한 서버로는 Apach, Nginx 등이 있다. 따라서 개발자는 웹 서버를 통해 해당 리소스를 접근할 수 있도록 서버를 설치·설정하고 원하는 리소스를 경로에 지정하기만하면 된다.
동적 웹 서버
Dynamic Web Server는 웹 서버에 있는 파일을 응답 바디를 재구성하거나 HTML 탬플릿 파일에 결과를 대체해 보낸다. 가령 클라이언트는 request parameter로 name=Engineer를 URL과 함께 GET으로 요청한다. 서버는 매개변수에 맞춰 html 파일을 구성하거나 탬플릿 html 파일에 적절한 값을 대체여 리턴한다.
백엔드 개발자들이 처음부터 끝까지 소켓 프로그래밍, HTTP 파싱, 스레드 풀 관리 등 모든 것을 작성하지 않아도 된다. 자바 프로그램 중 동적 웹 서버 구현을 도와주는 서블릿 엔진이 있다. Apach Tomcat이 서블릿 엔진에 해당한다.
자바 서블릿 컨테이너/엔진
서블릿 엔진 혹은 서블릿 컨테이너는 서버 프로그램이다. 서블릿 엔진을 설치한 후 어느 요청에서 해당 클래스 파일을 실행해야 하는지 알려줘야 한다. 서블릿 엔진이 이해할 수 있는 클래스는 javax.servlet.http.HttpServlet을 상속받는 서브 클래스를 의미한다. 우리는 HttpServlet을 상속받는 서브 클래스를 형식에 맞춰 압축해 전달해 준다. 우리가 사용할 스프링 부트도 내부적으로는 서블릿을 상속·구현한다.
'React, 스프링, AWS로 배우는 웹개발 101' 카테고리의 다른 글
인증 프론트엔드 통합 (0) | 2022.04.08 |
---|---|
프로덕션 배포 (0) | 2022.04.07 |
인증 백엔드 통합 (0) | 2022.03.28 |
프론트엔드 개발 (0) | 2022.03.16 |
백엔드 개발 (0) | 2022.02.27 |