포트폴리오 웹사이트를 풀스택으로 개발하던 도중 풀스택 프레임워크인 SvelteKit을 알게 되었다. (개발자 만족도 1위 웹개발 프레임워크!!라고 한다) 조금만 공부하면 별도의 복잡한 작업 없이도 풀스택 개발을 쉽게 할 수 있어서 알아두면 좋겠다.
필자가 개발하는 포트폴리오도 Gitub Pages 기능을 통해 정적으로 개발해 leehe228.github.io에서 호스팅을 하려고 하였다. Github Pages는 정적 웹페이지라 데이터베이스 연동과 같은 기능을 구현하기 어려워진다. (AWS Lambda, RDS와 같은 별도의 백엔드 서버가 존재해야만 한다)
그래서, SvelteKit을 이용해 포트폴리오 웹페이지를 구현하기로 했다. 이 포스트에서는 SvelteKit을 Github Pages와 연동하는 방법을 간단히 소개하겠다. (명확하게 정리된 게시물이 없어 한참을 고생했다. 다른 분들은 같은 고생을 안하셨으면 좋겠다)
0. Github.io 호스팅 주소에 관하여
참고로, Repository 이름을 <github ID>.github.io로 지으면 호스팅되는 주소가 바로 ~~.github.io가 된다. 만약 Repository 이름이 다른 경우 (예를 들어 portfolio라면) <github ID>.github.io/portfolio로 접속하면 된다.
깔끔하게 웹사이트 주소를 ~~.github.io로 하고 싶다면 Repository 이름을 위와 같이 설정하면 된다.
1. SvelteKit 프로젝트 생성 및 빌드
새로운 디렉토리를 생성하고 싶다면 디렉토리(폴더)명을 붙이고, 현재 디렉토리(.)에 만들고 싶다면 아무것도 입력하지 않으면 된다.
# create a new project in my-app
npm create svelte@latest my-app
# create a new project in the current directory
npm create svelte@latest
이후, 여러 선택지가 주어지는데
1. 프로젝트 템플릿 선택 (각각 데모 앱, 기본 스켈레톤 프로젝트, 라이브러리 프로젝트)
Which Svelte app template? > Skeleton project
2. Add type checking with TypeScript?
TypeScript 관련하여 묻는 질문인데 기본 맨 위를 선택하면 되고, 사용하지 않을 예정이라면 No를 선택하면 되는데 본인이 사용하지 않더라도 라이브러리에서 사용할 수 있으니 디폴트로 맨 위에 항목을 선택하길 추천한다.
3. Select additional options (use arrow keys/space bar)
각 항목을 방향키와 스페이스바로 체크, 체크해제할 수 있는데 디폴트는 아무것도 체크하지 않는 것이다. 엔터를 누르면 완료된다.
프로젝트 생성이 완성되었고, 이후 나오는 안내에 따르면 된다. 터미널에 출력되는 안내는 아래와 같으니 참고하면 된다.
Next steps:
1: cd my-app
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
참고로 서버를 실행하기 위해서는 아래 명령어로 실행할 수 있다.
npm run dev
위 명령어 실행 시 기본으로 http://localhost:5173에서 호스팅이 되며, 변경사항은 실시간으로 반영되어 렌더링된다. (개발 시 편하다)
SvelteKit에서 메인 페이지는 src/routes/+page.svelte 파일이다. 확장자는 svelte이지만 기본적인 HTML과 동일하다고 생각하면 된다. 위 명령어로 서버가 잘 실행되었는지 확인해본다.
2. Github Pages와 연동하기
먼저 로컬 프로젝트 설정이다.
a. @sveltejs/adapter-static과 gh-pages를 설치한다.
아래 명령어를 실행하여 설치한다.
npm -i D @sveltejs/adapter-static gh-pages
b. Config 파일에서 Adapter 설정 변경
프로젝트 폴더 내 svelte.config.js 파일을 아래와 같이 변경한다.
// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';→ 맨 윗줄을 삭제하고 아래 두 줄을 추가한다
/** @type {import('@sveltejs/kit').Config} */
const config = {
// preprocess 추가
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;const config 변수 내 preprocess: vitePreprocess(), 한 줄을 추가한다.
c. src/routes/+layout.js 파일 수정
src/routes 폴더 아래 +layout.js 파일을 생성해준다. 참고로 +layout.svelte, +layout.js 파일은 모든 페이지에 공통적으로 적용되는 파일이다. +layout.svelte 파일 내 <slot></slot> 태그 사이에 다른 +page.svelte 파일이 렌더링된다. 모든 페이지에 공통적으로 적용되어야 하는 Header나 Footer, Script나 Style등을 반영하면 편하다.
src/routes/+layout.js 파일 내 맨 윗줄에 아래 코드를 작성한다.
export const prerender = true;
d. package.json 업데이트
package.json 파일 내 script 부분에 아래 명령어를 작성한다. gh-pages 옵션으로 명령어 실행 시 실행될 명령어를 작성하는 것이다.
{
...
"scripts": {
...
"gh-pages": "npm run build && npx gh-pages -d build"
},
...
}
e. 페이지 Deploy
터미널에서 아래 명령을 실행한다. 오류 없이 실행되었다면 성공한 것이다.
npm run gh-pages수정 사항이 생길 때마다 위 명령어를 반드시 실행해야 변경 사항이 Deploy되어 웹사이트에 반영된다. 위 명령어 없이 Git Commit Push만 하면 반영이 되지 않는다. Commit/Push 전에 반드시 위 명령어를 실행하는 것을 잊지 말아야 한다.
예를 들어, 코드 수정 → 위 명령어를 통해 Deploy → Git Commit → Git Push 순으로 해야 변경 사항이 실제 웹사이트에 반영된다.
위 명령어가 성공했다면 정상적으로 빌드된 것이므로 페이지를 실행해본다.
npm run preview위 명령어를 실행해 프리뷰 웹페이지가 정상적으로 보이는지 확인한다.
위에서 설명한 run dev와 다른 점은 실제 웹페이지상에서 deploy되어 보이는 프리뷰를 보여준다는 점이다. 꼭 deploy 후 run preview를 통해 실제 웹페이지에서 어떻게 보이는지 확인하자!! (npm run dev와 다를 가능성이 높다...)
이후, 깃허브에 Commit/Push한다. (이때, gh-pages Branch가 아닌 main 또는 다른 Branch에 Commit/Push하면 된다) Deploy된 사항이 자동으로 gh-pages에 업데이트 되므로 수정하지 않는다.
f. Github 설정
해당 깃허브 레포지토리로 들어가보면
우측 사이드바에 Deployment에 성공이 표시되어 있을 것이다.
Setting - Pages으로 들어간다.
그러면 페이지 설정이 보이는데
Branch 부분을 gh-pages로 변경해준다.
다음, 맨 위쪽에 적힌 주소로 들어가보면
메인 페이지 (+page.svelte)가 정상적으로 출력되는 것을 확인할 수 있다!
(필자는 +layout.svelte 파일에 Test Title이라고 적어서 출력되며, 기본은 아래 Welcome ... 부분만 출력될 것이다)
이제 SvelteKit 개발 방법대로 개발하면 된다. (정적 호스팅임에도 마치 동적 호스팅처럼 개발할 수 있다. 서버와 클라이언트까지 구현이 가능하다!!)
3. SvelteKit Routing
마지막으로 SvelteKit에서 Routing을 알아본다. Routing은 쉽게 얘기해 같은 웹페이지에서 다른 페이지로 이동하는 것이다. 예를 들어, naver.com 에서 naver.com/login과 같이 말이다. SvelteKit에서는 아주 쉽게 구현이 가능하다.
src/routes 폴더 안에 라우팅할 디렉토리 폴더를 생성한다. 그 안에 +page.svelte 파일을 생성하면 끝이다.
예를 들어, src/routs 폴더 안에 test 폴더를 만들고 +page.svelte 파일을 생성했다면
~~.github.io/test 주소로 이동하면 그 페이지가 뜨게 되는 것이다.
개발자 만족도 1위 프레임워크 답게 매우 쉽고 직관적으로 구현이 가능하다.
4. 마치며
혹시 오류가 발생하거나, 막히는 부분을 댓글로 달아주시면 도움을 드리겠습니다.
감사합니다!
