[SPA] 싱글 페이지 애플리케이션이란?
싱글 페이지 애플리케이션(SPA)에 대해 알아보자.
리액트 입문 과정을 진행하며, SPA에 대해 이해해보는 시간이 필요햇다. 싱글 페이지 애플리케이션에 대해 알아보자!
싱글 페이지 애플리케이션 (SPA)
싱글 페이지 애플리케이션(Single-Page Application, SPA)은 하나의 HTML 페이지로 구성이 된 웹 애플리케이션이다. 초기 로드 시 서버에서 기본 HTML, CSS, JavaScript 파일을 한 번만 가져오고, 이후에는 JavaScript를 통해 동적으로 페이지 내용을 변경한다. 따라서 페이지를 새로고침 하지 않고도 화면이 전환되며, 더 빠르고 원활한 사용자 경험을 제공할 수 있다.
SPA의 장점과 단점
2-1) 장점
- 빠른 사용자 경험
- SPA는 초기 로드 이후에는 서버 요청 없이도 페이지 전환이 가능하기 때문에 매우 빠른 사용자 경험을 제공한다. 사용자는 전체 페이지 새로고침 없이 즉각적인 피드백을 받을 수 있음
- 부드러운 전환 효과
- 페이지 전환 시 애니메이션이나 전환 효과를 쉽게 적용할 수 있음
- 모바일 친화적
- 모바일 앱을 사용할 때 새로기침이 되지 않는걸 확인할 수 있다. SPA는 모바일 환경에서의 사용자 경험을 최적화할 수 있으며 불필요한 로드 없이 빠르고 일관된 인터페이스를 제공함
- 클라이언트-서버 분리
- 서버는 단지 API를 제공하고, 클라이언트에서 모든 로직을 처리하기 때문에 클라이언트와 서버간의 역할이 명확히 분리됨.
2-2) 단점
- SEO 문제
- SPA는 JavaScript로 동적으로 콘텐츠를 로드하기 때문에 검색 엔진이 페이지를 제대로 크롤링하지 못할 수 있으며 이를 해결하기 위해서는 별도의 서버사이드 랜더링(SSR)이나 동적 랜더링을 적용해야함
- 초기 로드 시간
- SPA는 초기 로드 시 모든 필요한 자원을 다운로드하기에 초기 로딩 시간이 길어질 수 있으며 네트워크 상태가 좋지 않거나 애플리케이션이 복잡할 경우 문제가 될 수 있음
- 브라우저 호환성
- 모든 기능이 JavaScript에 의존하기 때문에 브라우저 호환성 문제가 발생할 수 있으며 오래된 브라우저는 제대로 작동하지 않을 수 있음
- 복잡한 상태 관리
- 클라이언트 측에서 많은 로직이 처리되기 때문에 애플리케이션의 상태를 관리하는 것이 복잡해질 수 있으며 이를 해결하기 위해 Redux,Vuex와 같은 상태 관리 라이브러리가 필요함
SPA의 실행 과정
SPA의 실행 과정도 대화 형식으로 풀어보았다.
3-1) 로딩 과정
-
나(사용자) : URL을 입력하겠느니라!
- 웹사이트 URL 입력
-
브라우저 : 오셨습니까, 클라이언트사마 필요한 리소스를 가져오겠나이다.
- 서버로부터 HTML,CSS,JavaScript 파일을 한 번에 가져옴
-
브라우저 : 모두 준비가 되었사옵나이다~ 이제 JavaScript로 페이지를 구성하겠사옵나이다.
- JavaScript를 실행해 페이지를 동적으로 구성함
-
브라우저 : 이제 화면을 보여드리겠나이다~
- 완성된 페이지를 사용자게에 보여줌
3-2) 페이지 상호작용
-
페이지 로딩 완료
- 3-1) 로딩 과정의 대화
-
사용자 : 메뉴를 클릭해볼까나~
- 메뉴 버튼 클릭함
-
JavaScript : 클릭한 메뉴의 내용을 가져와서 화면을 업데이트해주마!
- 서버에 필요한 데이터를 요청하고, 받은 데이터를 기반으로 DOM을 업데이트함
-
브라우저 : 헐 뭐야! 내가 새로고침을 하지 않고 업데이트를 하다니! 맙소사! 놀라워!
- 업데이트된 콘텐츠를 사용자에게 즉시 보여줌
SPA는 단일 페이지 내에서 모든 기능이 수행되며, JavaScript를 통해 동적으로 콘텐츠를 변경하는 방식이다. 그러므로 빠르고 부드러운 사용자 경험을 제공하지만 SEO나 초기 로딩시간의 문제점을 개선해야할 필요가 있다.
마무리
오늘 리액트 챌린지반 내용 중 리액트의 동작 과정을 설명해준 시간이 있었다. 함수형 컴포넌트는 결국 함수고 최종적으로 하나의 페이지에서 랜더링이 된다. 오늘 추가적으로 SPA 내용을 공부해보니 리액트에 대해 조금 더 이해할 수 있는 시간이 되었다.