싱글 페이지 애플리케이션(Single Page Application, SPA) 이란?

🤍싱글 페이지 애플리케이션(Single Page Application, SPA)이란?

• 서버로부터 매번 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션 or 웹 사이트, 단일 페이지로 구성되어 있음.
• SPA에서 HTML, JS, CSS 등 모든 코드는 하나의 페이지로 불러오거나 적절한 자원들을 동적으로 불러들여 문서에 추가함. -> 사용자의 동작에 응답하는 방식

전통적인 웹 방식 : 새로운 페이지 요청 시마다 정적 리소스가 다운되고 전체 페이지를 다시 랜더링하는 방식을 사용.

=>매번 새로고침이 발생되어 사용성이 떨어짐, 변경이 필요없는 부분까지 전체 페이지를 갱신하므로 비효율적임.

 

 

🤍SPA 특징

1. 라우팅

• 사용자가 태스크를 수행하기 위해 어떤 화면(View)에서 다른 화면으로 전환하는 내비게이션을 관리하기 위한 기능
• 일반적으로 요청 URL, 이벤트를 해석, 새로운 페이지로 전환하는데 필요한 데이터를 얻기 위해 서버에 데이터를 요청, 화면 전환 등 일련의 행위를 말함.

💡라우팅 = SPA 개발의 핵심!!

• 쉽게 말하자면 요청 URL에 따라 브라우저에서 돔(DOM)을 변경하는 방식임. => 요청 경로에 따라 동적으로 렌더링되도록 만들면 라우팅에 따라 다른 화면 구현 가능함.

2. 컴포넌트

• SPA는 각 컴포넌트들이 모여 한 페이지를 구성, 특정 부분만 데이터를 바인딩하는 개념이다.
• index.html 파일 하나에서 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동없이 특정 영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념이다.

🤍SPA 장&단점

1. 장점

• 기존 서버 사이드 랜더링과 비교했을 때 배포가 간단해짐.
• 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 1회만 다운로드하면 됨.
• 이후 새로운 페이지 요청 시 갱신에 필요한 데이터만 전달받아 갱신하므로 전체 트래픽이 감소.
• 전체 페이지 랜더링 X, 변경되는 부분만 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공함.

2. 단점

• 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 1회 다운로드하기 때문에 초기 구동 속도가 느림.
• 앱의 규모가 커지면 자바스크립트 파일 사이즈가 커질 수 있음. (유저가 실제 방문하지 않을 수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문) => Code Spliting을 사용해 라우트 별로 파일 구분 시 트래픽과 로딩 속도를 개선할 수 있음.
• 서버 랜더링 방식 X, 자바스크립트 기반 비동기모델이므로 검색엔진 최적화(Search Engine Optimization, SEO) 이슈가 있음.