SPA와 history api

개발 이야기

SPA와 history api

효빈 2024. 8. 11. 18:25

바닐라 자바스크립트로 SPA를 제작하려면 어떻게 해야 할까요?

이번 글을 통해 바닐라 자바스크립트로 SPA를 개발하는 방법에 대해 배워봅시다!

Single Page Application

우선 SPA는 Single Page Application의 약자로, 단일 페이지 애플리케이션을 의미합니다.

SPA의 웹 서버는 오직 하나의 html만을 가지고 있으며, 보통 index.html로 불립니다.

SPA는 다음과 같이 동작합니다.

1. 초기 로딩 : 사용자가 웹 사이트에 처음 접근할 때, 서버는 index.html 파일을 클라이언트에게 전송합니다.

이 파일에는 웹 애플리케이션의 구조를 설정하고, 사용할 js, css 코드가 포함되어 있습니다.

2. 클라이언트 측 라우팅: SPA에서는 페이지 전환 시 새로운 HTML 파일을 로드하지 않고, 자바스크립트를 통해 동적으로 콘텐츠를 변경합니다. URL 변경은 클라이언트 측 라우터(router)가 처리하며, 이 라우터는 사용자의 네비게이션을 가로채고, 현재 뷰를 변경하는 방식으로 동작합니다.

3. 서버와의 통신: 페이지가 전환될 때 서버로부터 데이터를 가져와야 하는 경우, 새로운 HTML 파일을 가져오는 대신, 서버 API에서 필요한 데이터만을 JSON 등의 형식으로 가져옵니다. 이를 통해 애플리케이션은 빠르고 효율적으로 동작합니다.

SPA로 개발하지 않은 페이지와, SPA로 개발한 페이지는 다음과 같은 차이가 있습니다.

왼쪽의 페이지는 다른 탭들을 누를 때마다, 즉 다른 페이지로 이동할 때마다 화면이 깜빡거리는 것처럼 작동하지만, 오른쪽의 페이지는 다른 페이지로 이동하더라도, 화면이 아주 자연스럽게 변경되는 것을 볼 수 있습니다.

이처럼, SPA는 전체 페이지를 새로 로드하지 않고, 필요한 데이터만 갱신하기 때문에 빠르고 부드러운 사용자 경험을 줄 수 있고, 초기 로딩 이후에는 새로운 html 파일을 로드할 필요가 없기 때문에 서버의 부하가 줄어든다는 장점이 있습니다.

history api

그럼 바닐라 자바스크립트를 사용해서 SPA를 개발하려면 어떻게 해야 할까요?

바닐라 자바스크립트로 SPA를 개발하기 위해서는 라우팅에 대해 알아야합니다. 라우팅은, 웹 사이트 내에서 웹 주소(url)를 특정 페이지에 연결하는 과정이라고 할 수 있습니다. 이를 통해 사용자가 브라우저에서 url을 입력하거나, 어떠한 링크를 클릭할 때 애플리케이션이 해당 요청에 맞는 적절한 페이지를 반환할 수 있습니다.

SPA에서 라우팅은 사용자가 다양한 페이지나 뷰로 이동할 수 있게 하면서도 실제로 전체 페이지를 새로 로드하지 않고, 변화가 필요한 요소만을 변경하는 기술입니다. SPA에서 라우팅은 페이지 전환 시 서버에서 HTML 파일을 새로 불러오는 대신, JavaScript를 사용하여 클라이언트 측에서 동적으로 필요한 데이터를 불러오고 콘텐츠를 렌더링합니다.

index.html 파일에는 다음과 같은 코드를 작성해준 다음,

<!DOCTYPE html>
<html>
    <head>
        <title>History API</title>
    </head>
    <body>
        <h1>History API 예제</h1>
        <button id="page1">1 페이지 보기</button>
        <button id="page2">2 페이지 보기</button>
        <button id="page3">3 페이지 보기</button>

        <button id="goBack">뒤로 가기</button>
        <button id="goForward">앞으로 가기</button>

        <div id="content">여기에 페이지 내용이 표시됩니다.</div>
        <script src="./src/index.js"></script>
    </body>
</html>

index.js 파일에도 알맞게 코드를 작성해 라우팅에 대해 자세하게 알아보겠습니다.

라우팅은 history api를 사용하면 쉽게 개발할 수 있는데요, history api 사용법은 다음과 같습니다.

const changePage = (page) => {
    let $content = document.getElementById('content');
    $content.textContent = `현재 보고 있는 페이지는 ${page}입니다.`;
    history.pushState({ page: page }, `Title ${page}`, `?${page}`);
};

window.addEventListener('popstate', (event) => {
    if (event.state) {
        let $content = document.getElementById('content');
        $content.textContent = `현재 보고 있는 페이지는 ${event.state.page}입니다.`;
    }
});

document.getElementById('page1').addEventListener('click', () => {
    changePage('page1');
});

document.getElementById('page2').addEventListener('click', () => {
    changePage('page2');
});

document.getElementById('page3').addEventListener('click', () => {
    changePage('page3');
});

history api는 위의 코드처럼 history 객체를 사용해서 작성할 수 있습니다.

history 객체를 사용해면 페이지가 이동될 때마다 이동한 페이지의 정보를 저장할 수 있습니다. 그리고 history 객체의 pushState라는 메서드를 사용하면, 세션 히스토리에 현재의 상태를 추가할 수 있습니다. pushState 메서드는 순서대로 state, title, url을 전달합니다. state는 페이지 상태 객체이고, title은 브라우저의 타이틀, 그리고 url은 해당 페이지의 주소를 나타냅니다.

그리고 window 객체에 popstate 이벤트를 사용하면, 웹 브라우저의 뒤로가기, 앞으로 가기 기능을 사용할 수 있습니다.

pushState 메서드와 popstate 이벤트를 사용한 결과, 웹 페이지는 다음과 같이 동작하게됩니다.

브라우저의 뒤로 가기, 앞으로 가기 기능말고도 history api를 사용해 직접 뒤로 가기와 앞으로 가기 기능을 쉽게 개발할 수도 있습니다.

const goBack = () => {
    history.back();
};

const goForward = () => {
    history.forward();
};

document.getElementById('goBack').addEventListener('click', goBack);

document.getElementById('goForward').addEventListener('click', goForward);

history 객체의 back, forward라는 내장 함수를 사용하면, 이렇게 쉽게 뒤로 가기와 앞으로 가기 기능을 직접 개발해서 사용할 수 있습니다.

SPA는 웹 애플리케이션 또는 웹사이트의 현대적인 구현 방식 중 하나로, 사용자에게 빠르고 부드러운 사용 경험을 제공하며, 사용자와의 상호작용 중에 웹 페이지를 새로 불러오지 않고, 필요한 데이터만 서버로부터 동적으로 불러와 페이지를 업데이트합니다. 이러한 방식은 현대적인 웹 애플리케이션의 개발에 있어서 널리 채택되는 방식으로, SPA 방식을 체택한 가장 대표적이고 인기있는 프레임워크 및 라이브러리로는 React, Angular, Vue가 있습니다.

이처럼 History API를 사용하면 SPA를 만들 때 페이지 전환 시에 페이지를 새로고침 하지 않고도 URL을 변경할 수 있으며, 사용자가 기대하는 대로 브라우저의 내비게이션 버튼이 작동하도록 만들 수 있습니다.

위 내용은 인프런의 [한 번에 끝내는 자바스크립트] 강의에서 다룬 일부 내용입니다.

강의에 관심있으신 분들은, 아래의 쿠폰을 통해 강의를 할인가로 구매할 수 있습니다 😊

쿠폰 번호 : 17463-caaa5d30e881
사용 기간 : 무제한
강의 링크 : https://inf.run/WfRmY

한 번에 끝내는 자바스크립트: 기초 문법부터 SPA 개발까지 강의 | 효빈 Hyobin - 인프런

효빈 Hyobin | 기본 문법부터 심화 개념까지 학습하면서, 바닐라 자바스크립트로 SPA를 개발해 봅시다🔥, 🍀'웹 프론트엔드를 위한 자바스크립트 첫걸음' 수강생분들은아래의 링크를 통해 할인

www.inflearn.com

'개발 이야기' 카테고리의 다른 글

화살표 모양 함수는 뭐가 다를까? (2)	2024.09.11
클로저는 도대체 뭘까? (0)	2024.08.29
함수 호출 방법에 따라 달라지는 this (0)	2024.08.14
자바스크립트로 상태 관리하기 (0)	2024.07.31
자바스크립트 엔진은 자바스크립트 코드를 어떻게 실행시킬까? (2)	2024.07.23

현재글SPA와 history api

효빈 스토리