초보자가 스벨트 또는 스벨트킷 개발환경 구축하기

먼저 초보자가 스벨트(Svelte) 개발 환경을 설정하는 방법은 다음과 같습니다. 순서대로 따라 해보세요.

 

---

 

1. Node.js 설치하기 스벨트 개발에 필요한 패키지들을 관리하고 개발 서버를 실행하기 위해 Node.js가 필요합니다.

• Node.js 공식 웹사이트(nodejs.org)에 접속하여 가장 안정적인 버전인 LTS(Long Term Support) 버전을 다운로드하여 설치합니다.
• 설치 시 npm(노드 패키지 매니저) 애플리케이션도 함께 설치됩니다.

2. 코드 에디터(VS Code) 설치하기 코드를 작성할 프로그램으로 Visual Studio Code(VS Code)를 사용하는 것을 가장 권장합니다.

• Visual Studio Code 홈페이지에서 사용 중인 운영체제(Windows, Mac 등)에 맞는 버전을 다운로드하여 설치합니다.

3. 필수 확장 프로그램(Extension) 설치하기 VS Code를 실행한 후 좌측의 확장 프로그램(Extensions) 탭 아이콘을 클릭하여 다음을 검색하고 설치합니다.

• Svelte for VS Code: 스벨트 코드의 문법 강조(Syntax Highlighting), 자동 완성 등 개발에 필수적인 기능을 제공합니다.
• Prettier 및 ESLint: 코드 서식을 깔끔하게 정렬해주고, 오류를 검사해 주는 유용한 확장 프로그램이므로 함께 설치하는 것을 추천합니다.

4. 스벨트 프로젝트 생성하기 (Vite 활용) 최근 스벨트 프로젝트는 구동 속도가 매우 빠른 프론트엔드 빌드 도구인 비트(Vite)를 사용하여 생성하는 것이 일반적입니다.

• 바탕화면 등에 원하는 폴더를 만들고 해당 폴더를 VS Code로 드래그하여 엽니다.
• VS Code 상단 메뉴에서 Terminal(터미널) > New Terminal(새 터미널)을 엽니다.
• 터미널에 npm create vite@latest 명령어를 입력하고 엔터를 누릅니다.
• 프로젝트 이름(예: svelte-project)을 입력합니다.
• 프레임워크 선택 화면이 나오면 키보드 방향키를 이용해 Svelte를 선택하고, 언어는 JavaScript를 선택합니다.

5. 관련 패키지 설치 및 개발 서버 실행하기 프로젝트 뼈대가 생성되었으면, 터미널에 다음 명령어들을 순서대로 입력하여 실행합니다.

• cd 스벨트프로젝트이름: 방금 생성한 프로젝트 폴더 내부로 이동합니다.
• npm install: 스벨트 개발에 필요한 모든 관련 모듈과 라이브러리 패키지들을 설치합니다.
• npm run dev: 내 컴퓨터에서 테스트해볼 수 있는 로컬 개발용 서버를 실행합니다.

6. 브라우저에서 결과 확인하기 개발 서버가 성공적으로 실행되면 터미널 창에 http://localhost:5173/ 과 같은 주소가 나타납니다.

• 이 주소를 키보드의 Ctrl(Mac은 Cmd) 키를 누른 채로 클릭하거나 브라우저 주소창에 직접 입력하면, 첫 스벨트 애플리케이션 시작 화면을 확인할 수 있습니다.

이제 프로젝트 내의 src/App.svelte 파일을 열어 코드를 수정하며 본격적으로 스벨트 개발을 시작하시면 됩니다.

 

---

 

다음으로 스벨트킷으로 개발환경 구축하는 방법을 알아보겠습니다.

 

---

 

스벨트킷(SvelteKit)으로 첫 프로젝트를 시작하는 과정은 터미널(명령 프롬프트)을 통한 명령어 입력과 대화형 설정으로 아주 간단하게 진행할 수 있습니다. 다음 단계를 순서대로 따라 해 보세요. (역시 VS code 등에서 시작합니다.)

 

1. 프로젝트 생성 명령어 실행 최신 스벨트 5 환경에서는 새롭게 도입된 sv CLI를 사용하여 프로젝트를 생성하는 것을 권장합니다. 터미널을 열고 아래 명령어를 입력합니다.

• npx sv create 프로젝트이름 (예: npx sv create my-app).
• 또는 널리 쓰이던 기존 방식인 npm create svelte@latest 프로젝트이름 명령어를 사용할 수도 있습니다.

2. 대화형 설정(Interactive Setup) 진행 명령어를 실행하면 터미널 상에서 프로젝트 구성을 위한 몇 가지 질문이 차례대로 나타납니다. 키보드 방향키와 엔터 키를 이용해 선택합니다.

• 템플릿 선택: 아무것도 없는 깨끗한 상태에서 시작하려면 'Skeleton project'(또는 Minimal)를 선택합니다. 스벨트킷의 기능들을 참고하고 싶다면 여러 예제 코드가 포함된 'SvelteKit demo app'을 선택할 수 있습니다.
• 타입스크립트(TypeScript) 설정: 타입스크립트 문법을 사용할지, 아니면 일반 자바스크립트(No)를 사용할지 프로젝트 요구사항에 맞게 선택합니다.
• 추가 개발 도구 선택: 코드 서식을 깔끔하게 유지해 주는 Prettier, 오류를 잡아주는 ESLint의 사용 여부를 묻습니다. 또한 브라우저 테스트를 위한 Playwright, 유닛 테스트를 위한 Vitest 등의 도구도 이 단계에서 추가할 수 있습니다. 최신 sv CLI를 사용한다면 Tailwind CSS와 같은 스타일링 도구나 데이터베이스 도구(Drizzle)도 초기 설정 단계에서 곧바로 추가할 수 있어 매우 편리합니다.

3. 폴더 이동 및 패키지 설치 위의 설정을 마치면 프로젝트 폴더가 생성됩니다. 터미널에서 해당 폴더로 이동한 뒤, 프로젝트 구동에 필요한 모든 의존성 패키지들을 다운로드하여 설치합니다.

• cd 프로젝트이름
• npm install

4. 로컬 개발 서버 실행 패키지 설치가 끝났다면, 내 컴퓨터에서 앱을 띄워볼 수 있도록 개발용 서버를 실행합니다.

• npm run dev (실행과 동시에 브라우저 탭을 열고 싶다면 npm run dev -- --open을 입력합니다).

서버가 구동되면 터미널에 http://localhost:5173/과 같은 로컬 주소가 표시됩니다. 브라우저에서 이 주소로 접속했을 때 "Welcome to SvelteKit"이라는 환영 문구가 보인다면 성공적으로 환경 설정이 끝난 것입니다.

 

이후 VS Code 등의 코드 에디터로 해당 프로젝트 폴더를 열고, 화면에 렌더링되는 실제 파일인 src/routes/+page.svelte 코드를 수정하면서 본격적인 개발을 진행하시면 됩니다.