오늘도 스프링을 공부하면서 배워야 할 것들이 많다는 걸 느꼈다. 그중에서 오늘은 백엔드 개발자라면 알아야 하는 REST API에 대해서 알아보고 이전에 공부했던 Thymeleaf와는 어떻게 다른지 알아보겠습니다!
REST API가 뭔가?
"웹 기반의 소프트웨어 시스템 간 데이터 통신을 위한 아키텍처 스타일입니다. REST는 클라이언트와 서버 간의 통신을 위한 일련의 규칙과 원칙을 제공하여 분산 시스템에서의 효율적인 통신과 데이터 전송을 지원합니다."
쉽게 이야기해서 REST API는 클라이언트와 서버가 독립적으로 개발 할 수 있도록 도와주는 통신 언어라고 생각한다.
그림을 통해서 예를 들면
위의 그림에서 보면 프론트 영역과 백엔드 영역은 서로 다른 프로그래밍언어와 체계를 가지고 있다. 이때 서로 약속된 REST API 형식을 통해서 서로가 주고받는 것이다.
굳이 실생활의 예시를 들면 A(한국인)와 B(일본인)는 영어를 정말 잘한다고 가정하자. 이때 A와 B가 각각의 모국어로 의사소통을 한다면 의사소통 시 큰 어려움을 겪을 것이다. 하지만 영어로 의사소통을 한다면 어려움이 없을 것이다.REST API는 프런트와 백엔드 사이의 "영어"라고 할 수 있다.
쉬운 예시를 들기위해 영어라고 한 REST API는 HTTP기반으로 구현되며 실제로는 JOSN,XML,YAML등의 형식으로 소통할 수 있다.
자 이제는 내가 공부하면서 궁금하던 부분에 대해서 적어보겠습니다. 나의 질문은 이렇다. "스프링에서 타임리프를 사용해 개발한다는 개념과 REST API로 개발한다는 개념 에대해서 좀 와닿지 않는데...뭘까..?"
- 타임리프를 사용해 개발한다는 개념
현재 스프링에서는 타임리프 문법을 지원을 하고 있습니다. 여기서 타임리프는 HTML 및 XML 기반의 뷰 템플릿 엔진으로 사용되는 기술이며, 타임리프는 서버 측에서 실행되며, 클라이언트에게 렌더링된 최종 HTML을 전송합니다.
좀 더 쉬운이해를 위해서 간단한 코드들을 통해서 알려드리겠습니다.(포트번호는 8080을 쓴다는 가정을 깔고 갑니다!)
1번코드는 localhost:8080/hello라는 요청이 들어오면 처리를 해주는 컨트롤러 클래스입니다.
2번코드는 타임리프 문법을 사용해서 컨트롤러에 모델에 message에 해당하는 "Hello, Thymeleaf!"를 보여주는 html 파일입니다.//1번 코드 @Controller public class HelloController { @GetMapping("/hello") public String hello(Model model) { model.addAttribute("message", "Hello, Thymeleaf!"); return "hello"; } }//2번코드 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Hello Thymeleaf</title> </head> <body> <h1 th:text="${message}"></h1> </body> </html>1번에서 모델 객체에 "Hello, Thymeleaf!"라는 문구를 넣어주면 html 파일에서는 타임리프 문법을 통해서
<h1 th:text="${message}"></h1>message에 해당하는 "Hello, Thymeleaf!"를 출력해 줍니다.
따라서 타임리프 문법을 쓴다는 건 서버 측에서 실행되며, 클라이언트에게 렌더링 된 최종 HTML을 전송합니다. 이걸 서버 사이드 렌더링(Server-Side Rendering) 즉 SSR 방식이라고 부릅니다.(이 때 외부서버에서는 해당 서버의 자원을 사용하지 못합니다)
타임리프의 장점으로는 검색엔진 최적화, 초기 로딩 시간 단축, 데이터를 동적으로 바인딩 하는 등의 장점이 있습니다. 그림으로 그려보면
이렇게 된다는 것을 간략하게 알 수 있습니다 물론 "타임리프가 알아서 다 처리 해줄께"라는 말안에는 컨트롤러와서비스의 역할들이 완료된상태에서 html이 원하는 정보를 다 줬다는 가정이 들어갑니다!
- REST API로 개발한다는 개념
일단 REST API는 그림부터 먼저 보여주고 설명을 하겠습니다.
Hello.com이라는 웹 사이트는 독후감을 게시할 수 있는 사이트입니다. 이때 사용자는 독후감 게시글 목록이 몇 개인지 요청을 했습니다. 이때 Hello.com 사이트의 프론트에서는 독후감 게시글 목록이 저장된 데이터베이스에 몇 개가 있는지 세서 알려줘야 하는 데 그건 서버에 요청해야 하는 정보입니다. 이때 프론트는 서버에 "게시글 목록이 몇 개인지 알려줘"를 서버가 알아들을 수 있게 REST API로 요청합니다. 그리고 서버는 DB에 접근해서 몇 개인지 알아낸 후 프론트가 알아들을 수 있게 REST API로 "300개가 있어"라고 응답해 주고 프론트는 사용자에게 300개 가있다는 걸 UI로 알려줄 겁니다.
타임리프를 쓰는 것과 다르게 서버 진영은 정말 서버의 역할만 할 수 있습니다!service를 rest api 중심으로 개발을 한다면 controller만 교체하여 html형식에서 json 형식으로 보내주게 만들 수 있고 동시에 html형식과 json형식을 지원하는 controller를 각각 만들어 사용하실 수도 있습니다.
즉 이 둘의 차이점은 외부에서 사용 가능한 형식인가의 차이입니다!
그리고 그림을 그려보면서 든 생각은 "그러면 단계로 봐도 타임리프로 처리했을 때 더 빠르지 않을까? 단지 UI의 좋은 모습들을 보여주기 위해서 REST API를 써서 프런트에서 개발하는 건가...?"라는 의문이 상황에 따라 다르겠지만, 꼭 타임리프가 빠르다고 할 수는 없습니다. 서버 쪽에서 렌더링 할 필요 없이 json만 뿌려주면 서버 쪽에서 부하가 많이 발생하지 않고 초기 로딩 속도가 더 빠를 수 있습니다.
그리고 ui 적으로 프런트를 사용하는 이유 중 하나는 타임리프의 경우 페이지가 이동할 때마다 깜빡거리는 게 있는데 리액트의 경우 깜빡임이 없이 싱글 페이지로 작동하기 때문에 ui 적으로는 좋습니다. 그리고 타임리프를 사용하는 경우에도 ajax를 통해 json 형식으로 응답을 받아 동적으로 깜빡임 없이 처리할 수 있지만, 유지 보수 면에서 보면 분리하는 게 더 좋다는 의견이 많았습니다!
++추가글 REST API관련 글을 보면 엔드포인트(Endpoint)라는 단어를 볼 수 있는데, 쉽게 설명하면
엔드 포인트
클라이언트가 서버에 요청을 보내는 URL 경로를 의미합니다. 간단히 말하면, 엔드 포인트는 클라이언트가 REST API를 호출할 때 어떤 기능을 수행하고자 하는지 서버에게 알려주는 방법입니다.
위에 타임리프 코드를 보면 이 코드의 엔드 포인트는 http://localhost:8080/hello라고 할 수 있다. 즉 매핑되는 url 부분을 엔드 포인트라고 한다!
잘 보고 갑니다!