[LG CNS AM Inspire Camp 1기] MPA & SPA 비교 / REST API

정성엽·2024년 12월 26일

LG CNS AM Inspire Camp MPA REST API am spa

LG CNS AM Inspire 1기

목록 보기

3/53

INTRO

지난 포스팅에서 MSA와 컨테이너에 대해서 살펴봤다.

이번에는 웹 애플리케이션 아키텍처의 두 가지 주요 방식인 MPA(Multi Page Application) 와 SPA(Single Page Application) 에 대해 간단히 정리해보자

1. MPA(Multi Page Application)

MPA의 동작 방식

MPA는 사용자의 요청이 들어올 때마다 서버에서 새로운 페이지를 렌더링하여 응답하는 방식이다.

처리 과정은 다음과 같다.

MPA 동작 과정

(1) Client는 서버쪽으로 URL 패턴과 Method를 지정하여 요청(Request)를 보낸다. 이때, Server Side에서는 이 요청을 Controller가 받는다.

(2) Controller는 Request를 확인하고 Service 레이어에 있는 적절한 비즈니스 로직을 호출한다.

(3, 4) 비즈니스 로직은 필요시 DB에 접근해서 적절한 로직을 처리한다.

(5) 처리 결과를 다시 Controller에 반환한다.

(6, 7) Controller는 화면에 보여주기 위한 View와 Service Layer의 리턴 데이터를 이용하여 HTML을 생성한다.

(8) 데이터가 포함된 HMTL을 Client쪽으로 반환하여 화면을 렌더링한다.

💡 왜 Service Layer가 필요할까?

Controller에 모든 로직을 넣으면 코드가 복잡해지고 유지보수가 어려워진다.

따라서 일반적으로 필요한 주요 비즈니스 로직들을 분리하여 관리하는 Service Layer를 별도로 두고 관리한다

Service Layer를 분리하는 이유

Controller는 요청 매핑과 응답 처리에 집중

Service는 실제 비즈니스 로직 처리를 담당

이러한 역할 분담으로 코드의 가독성과 유지보수성 향상

2. SPA(Single Page Application)

💡 SPA의 등장 배경

MPA는 클라이언트에게 보여줘야하는 페이지를 매번 서버로부터 받아와야 하는 특징이 있다.

이러한 특징은 다음과 같은 문제를 가진다

MPA의 한계

매번 전체 페이지를 다시 로드해야 함

서버 부하가 커질 수 있음

사용자 경험이 끊김

이러한 문제를 해결하기 위해 SPA가 등장하게 된다.

💡 SPA의 동작 방식

SPA는 초기에 빈 HTML과 필요한 모든 리소스를 받아온 후, 이후에는 데이터만 주고받는 방식으로 동작한다.

동작 과정을 정리해보면 다음과 같다.

SPA 동작 과정

(0) 최초에는 브라우저가 HTML 파일만을 가져온다.

(1) 이후, HTML 파일을 읽어 내려가면서 필요한 파일, 데이터 혹은 사용자의 액션에 맞춰 요청(Request)를 보낸다.

(2, 3, 4, 5)는 MPA 동작과 동일하다.

(6) Client의 요청 결과로 받아온 Response Data(JSON 형식)를 HTML과 결합하여 렌더링한다.

💡 MPA vs SPA: 주요 차이점

두 방식의 가장 큰 차이는 데이터 처리 방식에 있다.

MPA

서버에서 HTML 생성

전체 페이지 새로고침

서버 의존도가 높음

SPA

클라이언트에서 HTML 생성

부분적인 업데이트만 수행

클라이언트 측 처리 증가

💡 어디서 확인할 수 있을까?

hotels.com에서 네트워크 탭으로 SPA 방식을 살펴볼 수 있다.

위 Gif 파일은 우측에 개발자 도구 - Network를 켜두고 있다.

이후, 좌측 페이지의 스크롤을 내리면서 Client측에서 어떤 요청을 보내는지 확인하고 있다.

Gif 파일에서 확인할 수 있다시피 개발자도구 좌측 하단에 request가 계속 증가함을 확인할 수 있다.

즉, HTML을 읽어 내려가면서 필요한 데이터들을 서버측으로 Request보내고 있는 것이다!

3. REST API

위처럼 MPA, SPA 방식 모두 서버와 클라이언트 사이에서 통신을 수행해야한다.

이 때, 서버와 클라이언트 간의 통신은 주로 REST API를 통해 이루어진다.

💡 REST API란?

HTTP 프로토콜이 제공하는 기능을 활용하여 서버의 리소스를 효율적으로 관리하고 공유하기 위한 방식이다.

이는 다음과 같은 요소들로 구성된다.

REST API 구성

통신 방식: AJAX (Asynchronous JavaScript and XML)

비동기적으로 서버와 데이터 교환

페이지 전체를 새로고침하지 않고 부분 업데이트 가능

리소스 정의: HTTP Method와 URL

HTTP Method: GET(조회), POST(생성), PUT(수정), DELETE(삭제)

URL: 리소스의 위치와 전달하고자 하는 데이터를 나타내는 주소 체계

데이터 형식: JSON (JavaScript Object Notation)

클라이언트와 서버 간 데이터 교환의 표준 포맷