spa란?
- SPA는 하나의 HTML 파일 즉,
단 하나의 페이지로 자바스크립트를 이용해동적으로 화면의 콘텐츠를 바꾸는 방식의 웹 애플리케이션이다.- SPA는 웹 애플리케이션이 필요한 모든 정적 리소스를
최초 렌더링 시한번에 다운로드한다. 그 이후 새로운 페이지 요청이 있을 경우, 페이지 갱신에필요한 데이터(JSON)만 서버로부터 전달받아 페이지를 갱신한다.- 초기 웹사이트는 지금과 달리 하나의 HTML파일에 담긴 정보량이 적었다. 때문에 하나의 정보를 요청했을때 서버에서 새로운 페이지를 받아와 랜더링 시켜주는 형식이였다. 하지만 웹 페이지의 정보량이 많아짐에 따라 매번 새로운 HTML파일은 재생성하여 전달받는 것이 부담이 되기 때문에 이것을 해결하기 위해 등장하였다.
spa 구현 방식
- 첫 페이지 요청 시, 해당 어플리케이션에 필요한 모든 리소스를 서버에 요청
- 사용자가 새로운 url을 요청
- 해당 url에 대한 리소스를 클라이언트가 동적으로 생성(1번에서 받은 리소스를 활용해서)
- 생성한 리소스로 화면을 렌더링
url에 따라 컴포넌트 교체하기
import {CartPage, ProductDetail, ProductPage} from './pages/index.js';
import {Router} from './util/index.js';
export default class App {
constructor(props){
this.props = props;
}
setup(){
const {el} = this.props;
const router = new Router({
'/vanillaJS_SPA': ProductPage,
'/detail/:id' : ProductDetail,
'/cart' : CartPage
})
// 초기화
router.init(el);
}
}<body>
<div id="root"></div>
<script type="module" src="src/javascript/index.js"></script>
</body>url에 따라 div 파일의 HTML 요소를 교체한다. 이때 router에 정의된 각 url 마다 매칭된 클래스 컴포넌트를 참조하게 된다.
만약 '/detail' 이라는 url이 요청됐다면, routes 안 routing이라고 정의한 메서드에서 ProductDetail 클래스를 전달받아 root요소 밑으로 렌더링 시켜준다.
실제 구현
주소창의 url을 변경하되, 서버로 직접 http 요청을 보내서는 안된다.
이를 위해서 History API를 사용하면 된다!
기본적으로 location.href 등을 이용해 URL 변경 처리를 하면, 브라우저는 해당 페이지로 이동하면서 페이지를 새로 불러오게 된다. history.pushState를 이용하면 URL만 업데이트하면서 웹 브라우저의 기본적인 페이지 이동 처리가 되는 것을 방지할 수 있다.
routePush(pathname){
window.history.pushState({},null,pathname);
this.routing(window.location.pathname)
}뒤로가기 구현
/* history.back 또는 history.forward를 호출할때 발생하는 이벤트에 대한 핸들러 등록하는 메서드 */
window.onpopstate = () => this.routing(window.location.pathname);onpopstate 메서드는 웹 브라우저의 뒤로 가기 버튼이나 앞으로 가기 버튼 등으로 발생하는 popstate 이벤트를 처리하는 함수를 등록하는 메서드입니다.
popstate 이벤트는 브라우저의 상태 스택이 변경될 때마다 발생합니다. 상태 스택은 브라우저에서 현재 페이지의 상태를 저장하는 기능을 수행한다.
실행 결과
나만의 오답노트