<a> 태그는 앱의 경로 사이를 탐색하는 데 사용된다. 그런데 <a> 로 페이지간 이동할때, Svelte에서는 페이지 전체가 리로드(reload) 되지 않고 하나의 앱처럼 매끄럽게 동작하는게 디폴트이다. 웹 어플리케이션을 구현하는 데는 적절하나, 간혹 전체 페이지를 로딩(새로고침)해야 하는 케이스도 필요한데 그 방법을 알아보고자 한다.
1. <a> 태그에 직접 설정하는 방법
SvelteKit 공식문서에 잘보면, Link Options 방식에 대해 설명하고 있다. 다 공부하면 좋은 것들이지만, 오늘 알아볼건 전체페이지를 다시 새로고침 할 수 있는 data-sveltekit-reload 속성이다.
아래와 같이 태그내에 data-sveltekit-reload 를 입력하기만 하면 된다. 그리고 저 링크를 클릭하면, 흔히봐왔던 브라우저 화면이 깜빡이면서 전체 웹페이지가 다시 로딩되는 현상을 볼 수 있다.
<a href="/ex/2023/1116" data-sveltekit-reload>예제-1116</a>
추가로, rel="external"을 입력하는 것으로도 동일한 효과를 낼 수 있다.
<a href="/ex/2023/1116" rel="external">예제-1116</a>
2. 전체 사이트에 적용하는 방법
그냥 개별적으로 일부링크가 아니라, 이 웹사이트에 모든 링크가 전체 페이지 리로딩하는 걸로 변경하길 원할 수도 있다.(이럴거면 왜 svelte를…) body 태그에 data-sveltekit-reload 를 넣어버리면 된다. 아마도 sveltekit 설치를 해서 생성된 샘플예제의 app.html 에 아래와 같이 셋팅되어 있을 것이다.
<!-- (변경전) app.html 파일 -->
<body data-sveltekit-preload-data="hover">
아래와 같이 바꾸기만 하면 된다. 모든 링크가 전체페이지 리로딩되도록 설정이되니 정말 필요하면 사용하도록 하고,
<!-- (변경후) app.html 파일 -->
<body data-sveltekit-reload>
3. 일부영역에 적용하는 방법
특정 영역의 링크들만 적용하고 싶다면 div 태그를 이용해서 상위에서 선언하면 되니 본인 프로젝트에 맞춰 사용하면 될 것 같다.
<div data-sveltekit-reload>
<a href="/aa">aa</a>
<a href="/bb">bb</a>
<a href="/cc">cc</a>
</div>