웹 페이지 (Web Page):
- 웹 페이지는 웹 브라우저에서 열릴 수 있는 하나의 HTML문서를 나타냄.
- 전통적인 웹 페이지는 각각의 링크를 클릭하면 새로운 HTML 페이지를 로드하고 전체 페이지가 새로고침 된다.
- 사용자가 새로운 링크를 클릭하면, 해당 링크가 가리키는 새로운 HTML 페이지가 브라우저에 의해 로드되어 렌더링이 된다.
싱글 페이지 어플리케이션 (Single Page Application, SPA):
- SPA는 웹 에플리케이션의 한 유형으로 , 단일 HTML 페이지를 로드하고 동적으로 콘텐츠를 업데이트 하는 방식을 사용한다.
- 초기 로딩 후 , 사용자가 다른 부분을 클릭하거나 다양한 상호 작용을 통해 새로운 데이터를 가져오고, 해당 데이터로 화면을 업데이트 한다.
- 페이지 이동 시에 전체 페이지가 새로 고침되지 않고, 필요한 부분만 업데이되어 더 부드러운 사용자 경험을 제공한다.
- 대표적인 프레임워크로는 React,Angular,Vue.js 등이 있다.
웹 페이지 (Web Page)
싱글 페이지 어플리케이션 (Single Page Application, SPA)
요즘핫한 싱글 페이지 어플리케이션 그리고 웹 페이지 뭐가 다를까 ?
1. 페이지 로딩 방식:
웹 페이지 (Web Page): 각각의 링크를 클릭할 떄마다 전체 페이지를 다시 로드한다.
싱글 페이지 어플리케이션 (Single Page Application, SPA) : 초기에 한 번 페이지를 로드한 이후에는 필요한 데이터만을 동적으로 로드하여 업데이트한다.
2. 사용자 경험:
웹 페이지 (Web Page): 새로고침이 발생하므로 페이지 간 전환이 부드럽지 않다.
싱글 페이지 어플리케이션 (Single Page Application, SPA) : 부드러운 사용자 경험을 제공하며, 새로고침 없이 페이지 간 전환이 이뤄진다.
3. 서버 요청:
웹 페이지 (Web Page): 각각의 링크 클릭에 따라 서버로부터 HTML 페이지를 새로 받아와야 한다.
싱글 페이지 어플리케이션 (Single Page Application, SPA) : 초기에 필요한 모든 리소스를 로드하고,이후에는 필요한 데이터만을 서버로부터 받아온다.
4. 코드 구성:
웹 페이지 (Web Page): 여러 개의 HTML 파일이 각 페이지에 대응하며, 전체 페이지를 로드할 떄마다 스크립트 등이 다시 실행된다.
싱글 페이지 어플리케이션 (Single Page Application, SPA) : 단일 HTML 파일과 필요한 자바스크립트, 스타일 시트 등이 초기에 로드되고 , 이후에는 동적으로 컴포넌트 간 전환과 데이터 업데이트를 수행한다.
5.SEO(검색 엔진 최적화):
웹 페이지 (Web Page): 각각의 페이지는 별도의 URL을 가지고 있어 검색엔진이 각 페이지를 개별적으로 색인화하기 용이하다.
싱글 페이지 어플리케이션 (Single Page Application, SPA) : 초기 로딩 시에 모든 리소스가 로드되기 때문에 검색 엔진이 색인화 하는데 어려움이 생길 수 있다. 이를 해결하기 위해 서버 사이드 랜더링(SSR) 같은 기술을 사용할 수 있다.
6.라우팅
웹 페이지 (Web Page): 각페이지마다 별도의 URL이 있어 브라우저의 뒤로가기,앞으로가기 버튼을 사용할 수 있다.
싱글 페이지 어플리케이션 (Single Page Application, SPA) : URL이 변경되더라도 페이지가 새로 로드되지 않기 때문에 브라우저의 뒤로가기,앞으로가기 버튼이 기본적으로 처리되지 않는다. 대신 , 클라이언트 사이드 라우팅을 통해 URL을 업데이트하고 화면을 갱신한다.
이러한 차이점을 봤을떄 SPA는 빠르고 부드러운 UX를 제공하는 방면 초기 로딩 시 모든 리소스를 한 번에 로드하므로 , 초기 로딩 속도에 신경을 써 줘야한다.
반대로 웹 페이지는 각 페이지 별로 독립적으로 로드되기 떄문에 초기 로딩속도 가 빠를 수 있는 방면 페이지 이동 시 전체 페이지가 새로 로드되어 사용자 경험이 끊기며 매 페이지 마다 서버에 새로운 요청을 보내줘야 하므로 서버 부하가 상대적으로 높을 수 있다.
이러한 정보를 통해 웹 개발자들은 프로젝트의 요구사항과 목표에 따라 웹 페이지 혹은 SPA 중 어떤 접근 방식을 선택해야 하는지에 대해 고려해보면 좋을 것 같다~!
