바닐라 자바스크립트로 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
'javascript' 카테고리의 다른 글
| HTML, CSS, Javascript로 크롬 시작화면 개발하기 (2) | 2024.09.24 |
|---|---|
| 화살표 모양 함수는 뭐가 다를까? (2) | 2024.09.11 |
| 클로저는 도대체 뭘까? (0) | 2024.08.29 |
| 함수 호출 방법에 따라 달라지는 this (0) | 2024.08.14 |
| 자바스크립트로 상태 관리하기 (0) | 2024.07.31 |
