- 이 포스팅은 wiostz98kr님의 velog 자료를 정리한 내용입니다.
1.정의
싱글 페이지 애플리케이션(Single Page Application, SPA)
- 싱글 페이지 말 그대로 하나의 화면으로부터 필요한부분만 동적으로 구동되는 웹사이트를
말한다, 서버로부터 새로운 페이지를 불러오지 않고 현재 페이지를 동적으로 다시 작성한다.
2. 특징
- 라우팅(Routing) : 사용자가 테스크 수행하기 위해 기존화면에서 다른화면으로 전환하는
내비게이션을 관리하기 위한 기능으로 , 일반적으로는 사용자가 요청한 url,이벤트등의
데이터를 얻기위해 서버에 데이터를 요청하고 화면을 전환하는데 이런 라우팅을 브라우저
선에서 구현해야 하는 것이 SPA 개발의 핵심!,
- 컴포넌트(Component) : SPA는 컴포넌트들이 모여 한 페이지를 구성하고 특정 부분만 데이터를
바인딩하는 개념( 레고블럭같은 개념이라고 보면 될 듯!)
3. SPA의 장점
-싱글페이지 어플리케이션을 클라이언트 사이드 렌더링 방식과 서버사이드로 할수있는데
서버사이드 렌더링방식은 새로고침해서 다른화면으로 이동하는 방식으로 매번 서버로부터
새로운 html을 요청해 서버측에 부담이 높아지고 트래픽이 높아져 성능문제로 이어지는데
클라이언트 사이드 렌더링 방식은 한페이지 내에 머무르며 서버로부터 전달받은 데이터로
필요한 부분만 동적으로 업데이트해 보여주기 때문에 전체적인 트래픽이 감소
- 프론트엔드와 백엔드 분리로 인한 개발업무 분업화 및 협업이 용이
- 네트워크 작업을 모니터링하고 페이지 요소 및 이와 관련된 데이터를 조사할 수 있기 때문에
크롬에서 디버그가 쉽다
4. SPA의 단점
- 웹에 필요한 모든 리소스를 최초에 한 번 다운로드 하기에 초기 구동 속도가 상대적으로 느리다
- SPA는 서버 렌더링 방식이 아닌 자바스크립트 기반 비동기 모델이기에 검색엔진 최적화 이슈가 있다
댓글