🌱 기초 프론트엔드
Single Page Application(SPA)이란?
쉽게 이해하기
책을 읽을 때 매번 새 책을 꺼내는 게 아니라, 한 권 안에서 페이지만 넘기는 것과 같아요. 웹사이트도 마찬가지로, 페이지를 통째로 다시 불러오지 않고 필요한 부분만 바꿔서 보여주는 방식이에요.
핵심 정리
페이지 이동 없이 화면만 바뀌는 앱을 SPA라고 해요.
자세히 알아보기
전통적인 웹사이트는 링크를 클릭할 때마다 서버에서 새로운 HTML 파일을 받아와 화면 전체가 깜빡이며 새로고침됩니다. 하지만 SPA는 처음 한 번만 HTML을 받아온 뒤, 이후에는 JavaScript로 화면의 필요한 부분만 바꿔서 보여줍니다.
예를 들어 Gmail이나 Netflix를 쓸 때를 생각해보세요. 메일함을 바꾸거나 영화를 클릭해도 화면이 깜빡이지 않고 부드럽게 바뀝니다. 이게 바로 SPA의 특징이에요. 사용자 경험이 훨씬 자연스럽고 빠르게 느껴지죠.
SPA는 React, Vue, Angular 같은 프레임워크로 만들어집니다. 하지만 단점도 있어요. 처음 로딩할 때 JavaScript 파일이 크면 시간이 걸리고, 검색엔진 최적화(SEO)가 어려울 수 있습니다. 그래서 Next.js나 Nuxt.js 같은 도구로 이런 문제를 보완하기도 해요.
요즘 대부분의 모던 웹 앱은 SPA 방식으로 만들어집니다. 특히 대시보드, 관리 도구, SNS처럼 사용자가 계속 클릭하며 이동하는 서비스에서 많이 쓰입니다.