정식 출시된 SvelteKit 으로 개발 환경을 구성해보겠습니다! #2

해당 게시글은

(1) SvelteKit 개요 

(2) SvelteKit 설치 방법

에 대한 내용을 담고 있습니다.

이전 게시글 - 왜 하필 Svelte 예요? 저도 공부해볼까요? #1

왜 하필 Svelte 예요? 저도 공부해볼까요? #1

---

ch1 - SvelteKit 릴리즈

SvelteKit 이 무엇인가요?

SvelteKit v1.0

    SvelteKit 은 Svelte 의 Meta-framework 로서 최근 (2022.12.15) v1.0 이 정식 출시되었습니다. React.js 에 익숙하신 분들은 Next.js, Vue.js 에 익숙하신 분들은 Nuxt.js 와 같은 배경과 목적에 의해 개발된 Meta-framework 라고 이해해 주시면 될 것 같습니다. Frontend 개발을 처음 접하시는 분들은 이와 같은 Meta-framework 가 익숙하시지 않겠지만, Svelte 를 활용한 개발 경험을 개선해줄 수 있는 Framework 가 Beta 버젼 이후 정식 버젼으로 출시되었다고 이해해 주시면 될 것 같습니다. 이전 게시글에서도 언급하였듯이, 다양한 선택지 중 Web 개발을 Svelte 로 시작하게 된 주요 계기로 SvelteKit 정식 출시가 있었던 만큼 Svelte 에 관심이 있었던 사람들에게는 이번 정식 버젼 출시가 굉장히 설레는 일이었습니다. 정식 버젼 이전의 SvelteKit 은 (다른 Beta 버젼 Framework 도 유사하겠지만) 잦은 변경이 예고되었기 때문에 학습 대상으로서 안정적이지 못했고, 프로젝트에 정식 도입하기에는 위험한 판단으로 간주되었습니다.

    SvelteKit 의 공식 홈페이지에 접근하면 아래와 같은 세개의 키워드가 방문자에게 가장 먼저 노출됩니다. Frontend 개발 초심자의 입장에서는 'Fun' 이라는 키워드가 유독 눈에 띄고 흥미롭게 느껴집니다. 다양한 개발 언어 혹은 Framework 의 공식 홈페이지를 방문해본 기억 속에, Fun 이라는 키워드를 이렇게까지 자랑스럽게 최상단에 노출시키는 홈페이지는 본 기억이 없기 때문입니다. (실제로 이후에 SvelteKit 을 통해 간단한 Demo Web 를 구현해본 결과, 재미있긴 했습니다.)

출처 : SvelteKit 공식 홈페이지

 

SvelteKit 특징

    SvelteKit 의 특징 (장점) 은 공식 홈페이지에 가장 상세히 기재되어 있습니다. Frontend 개발 입문자로서 깊은 수준으로 이해할 수 있는 부분은 제한적이었지만, 여러 블로그 및 소개 영상을 통해 파악한 주요 특징은 아래와 같습니다.

• SSR (Server-side Rendering) 을 예약어를 활용하여 구현할 수 있다.
• Backend 기능 (REST API) 을 구현할 수 있다. 
• 페이지 라우팅을 폴더명 기반으로 편리하게 구현할 수 있다. (동적 라우팅도 가능하다.) 
• HTML 레이아웃을 예약파일을 통하여 구현할 수 있다.
• Netlify 를 통해 개발한 Web 을 쉽게 배포할 수 있다.

    위의 사항들은 SvelteKit 을 활용한 Web 개발 과정에서 구체적으로 다루도록 하겠습니다. (SSR 과 같이 Frontend 공통 개념에 해당하는 사항은 추후, Frontend - Common 분류에 게시글을 업로드할 예정입니다.) 개인적으로는 편리한 페이지 라우팅 방식 및 (Full-stack Web 개발을 위한) 자체 REST API 구현 부분이 가장 매력적으로 다가왔습니다.

---

ch2 - SvelteKit 설치 방법

SvelteKit 을 어떻게 설치하면 되나요?

준비사항

    Node.js 가 설치된 상황이 전제됩니다. Node.js 는 공식 홈페이지를 통해 다운로드 (Node.js 다운로드 링크) 할 수 있습니다. Node.js 가 정상적으로 다운로드 되었다면, 터미널에 아래 두개의 명령어를 입력했을 때 특정 결과값이 반환됩니다.

node -v
npm -v

    또한, Web 개발 효율성 향상을 위해 적절한 IDE 가 필요한데, SvelteKit 에서 공식적으로 추천하는 VScode 를 사용하겠습니다. (원래도 사용하고 있긴 했습니다.) VScode 는 Frontend 분야에 한정된 것이 아니라, Backend 및 ML/DL 분야 등 전분야에 걸쳐 가장 많이 활용되는 IDE 입니다. 특히, 최근에는 IT 업계의 직장에서는 특별한 사유가 없다면 (Github 와 같이) VScode 를 표준 Tool 로 활용하는 듯한 느낌을 받을 수 있을 정도의 위상을 보이고 있습니다. 따라서, VScode 를 사용해보신 경험이 없다면 이번 기회에 다운로드 받아서 (VScode 다운로드 링크) 사용해보실 것을 권장해드립니다. 

 

설치 및 실행

    터미널에서 아래의 명령어를 입력하면 SvelteKit 을 다운로드 받을 수 있습니다. (기본적인 설치과정은 공식 문서의 가이드라인과 동일합니다.) 

npm create svelte@latest gngb-app
cd gngb-app
npm install
npm run dev

첫 명령어에 대한 실행 과정에서 다양한 옵션을 선택해야 하는데, 해당 게시글에서는 아래의 이미지와 같이 설정하였습니다. 부가적인 템플릿 파일이 첨부되지 않는 Skeleton project 를 선택했고, TypeScript 는 JavaScript 가 익숙해진 이후 공부할 계획이므로 선택하지 않았습니다.

SvelteKit 설치 설정사항

마지막 명령어를 실행하면 터미널에서 http://localhost:5173/ 에 접근하라는 설명을 확인할 수 있으며, 해당 주소로 접속하면 좌측 하단의 이미지와 같이 로컬 환경에서 Web 이 잘 동작하고 있는 것을 확인할 수 있습니다. 해당 Web 은 우측 하단의 이미지에 존재하는 src/routes/+page.svelte 파일의 코드에 기반합니다. 

초기 실행화면

폴더 구조

src/routes/+page.svelte 파일의 코드를 아래와 같이 수정해보겠습니다.

<h1>Welcome to GNGB</h1>
<p>
	열심히 공부해봅시다!
</p>

코드 수정 이후 실행화면

    이과 같이 src/routes 폴더 내, +page.svelte 파일의 코드를 수정하고 저장하면 즉각 로컬 환경의 Web 에 반영되는 구조입니다. 다른 JavaScript 기반의 Web Framework (React.js, Vue.js) 와 다르게, 기본적인 HTML 문법만으로 동작하는 것이 흥미롭습니다. 'Write Less Code' 라는 Svelte 의 주요 철학을 짧은 시간에 강렬하게 느낄 수 있었습니다.

// React 의 Hellworld 예시
import React from 'react';

function App() {
   return (
      <div>
         Hello World
      </div>
   );
}


// Svelte 의 Hellworld 예시
<div>Hello World</div>

---

비전공자가 Svelte 를 공부하는 과정에서 겪게 될 어려움과 시행착오를 먼저 경험하고, 이어질 게시글에서 최대한 쉽게 공유해드리고자 합니다. 잘못된 내용에 대한 지적사항이나 문의사항은 언제든지 편하게 댓글로 남겨주시길 바라겠습니다.