[Sub] SPA(Single Page Application)이란?

⚛︎ SPA(Single Page Application) 개념

직독 하자면 "하나의 페이지로 구성된 어플리케이션" 이다.

 

그래서 그게 무슨 말인지 알아보려면 SPA와 반대되는 개념인 MPA(Multi Page Application)을 알아야한다.

 

⚛︎ MPA(Multi Page Application) 개념

MPA는 여러개의 HTML 페이지를 사용하는 전통적인 웹 어플리케이션이다.

 

MPA의 각 페이지는 로드과정에서 전체 페이지를 서버에 요청하여 로드한다. 그 과정에서 로딩시간이 길어지고 데이터가 많아질 수록 느려지는 단점이 있다.

 

이런 부분을 보완하는 방식이 SPA이다. 

⚛︎ 그래서 SPA(Single Page Application)가 뭔데?

서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지를 동적으로 화면을 바꿔가며 보여주는 웹 애플리케이션이다.

 

⚛︎ SPA의 장점

SPA는 최초 로딩 이후 서버에 매번 새로운 페이지를 불러오는게 아닌 동적으로 필요한 부분만 다시 작성한다.

이 부분에서 SPA의 장점이 나타난다.

1. 보다 빠른 속도: 초기 로딩 이후 페이지 전환 시 일부를 동적으로 변경하기 때문에 속도가 빠르다.
2. 자연스러운 사용자 경험: 별도의 페이지 이동이 없이 사용하기 때문에 자연스러운 UX(User Experience)를 제공한다.
3. 우수한 성능: 필요한 부분을 서버에 요청하고 받아오기 때문에 서버의 부하를 줄여 성능을 높일 수 있다.
4. 높은 생산성: 컴포넌트(Component) 단위로 개발에 용이하여 반복적으로 사용하여 생산성을 높일 수 있다.

하지만 명확한 단점도 존재하기 때문에 무조건적으로 SPA가 MPA보다 나은 선택은 아니다.

 

⚛︎ SPA의 단점

1. 느린 초기 로딩 속도: SPA는 정적 리소스를 한번에 다운로드 하기 때문에 초기 구동 속도가 MPA에 비해서 느리다.
2. 보안 이슈: SPA 구조 상 데이터 처리를 클라이언트에서 하는 경우가 많은데, 일부 로직은 JavaScript를 통해 구현되므로 코드가 외부에 노출되는 보안적인 문제가 발생할 수 있다.
3. 검색엔진 최적화(SEO) 이슈: 대부분의 서치봇이 html을 파싱 해서 정보를 만들기 때문에 SPA와 같이 js 비동기 통신 모듈을 통해 내용을 채우는 방식을 사용하면, 서치봇이 제대로 감지를 못하는 상황이 발생한다.

⚛︎ History API

SPA에서 페이지 전환할 때 자바스크립트에서 HTML 5의 History API를 사용한다.

자바스크립트에서 History API를 이용하면 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해줍니다.

 

• History.back() : 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드.
• History.forward() : 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드.
• History.go(): 현재 페이지를 기준으로 상대적인 위치의 세션 기록(페이지)로 이동하는 비동기 메서드.
• History.pushState(): 주어진 데이터를 지정한 제목으로 세션 기록 스택에 기록.
• History.replaceState(): 세션 기록 스택의 최근 항목을 변경.

 

▼History API 정보 

https://developer.mozilla.org/ko/docs/Web/API/History

History - Web API | MDN

 

 

오늘도 긴 글 읽어주셔서 감사합니다 ^^

-현고미 올림-