[SvelteKit] 스벨트킷 설치 및 초기 설정

프로젝트를 위해 스벨트킷을 설치하고, 필요한 초기 설정을 해 보자!

 

1. 노드 버전 확인

node -v

- 스벨트킷은 nodejs 16 버전 / 18 버전 지원

 

2. 스벨트킷 설치

npm create svelte@latest 프로젝트명

- svelte@latest는 최신 안정 버전 / svelte@next는 최신 개발 버전

- 설치 시 질문

• 사용할 템플릿은?

[ 데모 프로젝트 / 기본 라이브러리가 있는 프로젝트 생성 / 빈 프로젝트 생성 ]

• 타입 체크 사용 여부?

[ 타입스크립트 사용 / 자바스크립트 주석을 이용한 타입 확인 / 안 함 ]

• EsLint, Prettier 사용 여부?

[ Yes / No ]

• 브라우저 테스팅 여부?

[ Yes / No ]

EsLint는 소스 코드에 문제가 있는지 검사 후, 문제 부분에 flag를 달아 주는 도구
Prettier는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해 주는 도구

 

3. npm 설치 및 개발 서버 실행

npm install
npm run dev

 

4. 파일 구조 설정

• src 
  • lib 
    • components
    • font
    • images
    • stores
      
  • routes
    • page명 폴더
      • +page.svelte
    • +layout.svelte
    • +page.svelte

- routes의 +page.svelte 파일은 index와 같은 기본 파일

- 파일명에 +가 붙지 않으면 라우팅으로 인식되지 않음

 

#팁 경로표시

/src/는 $로 표현 가능하다
(예) $lib === /src/lib

 

#팁 이미지삽입

<img src="직접 경로 입력"> 불가능 -> import 후 사용한다

<script>
import Logo from “$lib/images/Logo.png”
</script>

<img src={Logo}>​

 

~기본 설치 설정 끝~