sveltekit 를 처음 생성하실때는 데모버전을 생성해서 폴더구조를 익히시고 나중에

스켈렉톤(뼉다귀) 버전을 생성해서 하시길 추천드립니다.

최소 라이브러리 버전을 생성해야 설정을 깊게하지 않고 바로 프로젝트 진행하기 수월합니다.

 

우선 데모버전 또는 라이블러리 버전을 기준으로 설명드립니다.

 

npm create svelte@latest my-app

 

이렇게 생성을 하고 생성 폴더에 들어가면

 

cd my-app

 

src 폴더와 그안에 lib 그리고 routes 폴더가 보입니다.

그리고 같은 선상에 app.css, app.d.ts, app.html 등등의 파일이 보입니다

 

프로젝트를 빌드실행 또는 개발용으로 실행을하면,

app.html 페이지의 %sveltekit.body% 부분에 본문이 뿌려저서 실행이 되고

%sveltekit.head% 부분이 head 에 들어가서 실행되는 것 같습니다.

 

우선 시작을 그렇고

그담으로 호출되는 것은

routes 폴더입니다

 

폴더안을 보시면 +page.svelte 파일이 있습니다.

이 파일이 첫호출되는 파일입니다.

sveltekit 은 우리에게 익숙한 폴더 구조의 라우터 시스템을 개발경험의 가장 기초적인 컨샙으로 

그대로 사용하고 있습니다.

그래서 별도로 라우터 파일을 정의하는 주소를 설정하는 행위가없이 그냥

폴더만들고 최종 페이지에 +page.svelte 라고 쓴 파일만 넣어주면 이것을 호출합니다.

 

sveltekit 정식 버전 막판에 업데이트된 사항인데, 기존에는 최종 목적지가 파일이었습니다.

그런데, 최종 목적지가 폴더명이고 마치 해당폴더의 index.html 을 불러오듯이 해당 폴더에 

+page.svelte 파일이 있으면 이파일만 호출합니다.

그전에는 파일 명을 적어주다보니 다른 파일이 있으면, 그파일도 라우터가 호출할 수 있었습니다.

그래서 서버측에서 실행되는 파일과 클라이언트 측에서 실행되는 파일 등등이 석여도 그냥 호출만하면 실행되는 구조다 보니 이를 하나의 파일에 모두 담아 파일의 가시성과 파일 분리로 얻능 이득들 일부 포기해야했습니다.

그런데 정식버전 출시 막판에 파일 호출 에서 폴더 호출로 변경되면서 해당 폴더에 여러 종류의 파일을 여러개 넣을 수 있게 되었습니다. 

 

svelte는 컴포넌트로 기능을 분리한다.

svelte는 기능묵음을 컴포넌트라 칭합니다. 좀더 반복되는 경향을 추려보면, html 보여주는 내용과 js 기능이 있는 내용이 통합된 파일 정도로 생각하면 될 것 같습니다. 기능만 있는 경우는 js 파일로 호출해서 사용합니다.

여러군데에서 반속적으로 호출해서 사용하는 예를들어 모달이나 토스 알트창 같은 것은 미리 만들어 두고

간단하게 상태 값만 변경해서 호출해서 사용할 수 있습니다 이런것들은 별도의 

/src/lib/component 폴더에 몰아두고 필요할 때마다 호출해서 사용하고 있습니다.

그외에 페이지가 좀 길거나 하면, 기능별로 달락이나 색션별로 페이지를 나눌 수 있는데, 

이럴대 폴더 호출 방식의 진가가 발휘됩니다. 그냥 최종 폴더에 쉽게 구분되는 이름의 파일로 넣어두고

바로 호출하면 됩니다.

예전에는 /src/lib/page 에 넣어두고 호출해서 사용할때는 페이지 고칠 때마다 한참 스크롤해서 왔다갔다 했었는데

이제는 같은 폴더에 넣어두고 호출하니 노동량이 훨씬 줄어들게 됩니다.

외부에서는 해당 폴더의 +page.svelte파일만 호출하니 보안에도 좋습니다.

 

layout 기능 에전에 그누보드에서 오픈프레임이라고 했었나요? 

테이블 시작은 header.php넣어두고 닫는 부분은 tail.php에 넣어두면 상하 레이아웃 기능 구현했더 바로 그 기능입니다.

/src/routes/ 폴더에 보면 +layout.svelte 파일이 보입니다.

이파일이 root 단위로 모든 +page.svelte 파일을 감싸는 공통 layout 입니다. 그래서

여기에 원레 hook 기능으로 들어가야하는게 아닌가 하던 기능들 그러니까 미들웨어 기능들을 넣어두면됩니다.

저는 토스, 알트, 모달, 컨펌 등 자주 반복 사용되는 것을 여기에서 컴포넌트로 넣어두고 필요할때마다 호출해서 사용합니다.

 

store 공통 상태관리 기능

/src/lib/store 폴더에 상태 공유가 필요한 글로별 변수 비슷한 변수들을 정의해 놓은 파일들을 넣어두고 사용합니다.

페이스북이 리엑트를 만든 가장 큰 이유중 하나가 이 글로벌 상태관리를 꼽습니다.

글로벌 상태관리는 사실 다른 방식으로도 사용할 수 있기도한데, 아무래도 실시간 바인딩 등의 장점 때문에

별도로 구현해서 사용하는 것 같습니다.

그러니까,

객체지향 언어들은 클래스의 스코프 기능으로 랩핑이 되어 있습니다.

스벨트도 페이지전환이라고 하는데, 실은 클레스 단위로 페이지를 넣어두고 클래스를 변경하면 스코프 형태로 경게가 랩핑되어 페이지와 페이지 간의 데이터가 고유되지 않습니다. 

그리고 앞서 컴포넌트로 분리되어 사용되어 지는 페이지와 컴포넌트도 서로 다른 클래스처럼 랩핑되어 분리되어 변수가 공유되지 않습니다. 

우리가 함수 사용할때 인자 넣고 리턴 받아야지 안에 있는 변수들을 값을 넣고 빼서 쓸 수 있듯이 페이지 그리고 컴포넌트들은

정보가 공유되지 않고 분리되어 있습니다.

그래서 저마다 정보를 공유하는 여러가지 방식이 있는데, 그중에 광범위하게 사용되는 것이 store 기능입니다.

뭐 가계에 물거 맡기고 다시 꺼내다 쓰고하는데, 좀 하나의 페이지 또는 컴포넌트와는 분리된 저장소 역할을 합니다.

 

sveltekit 을 잘다룬다고 한다면,

각 페이지와 컴포넌트 간의 값과 함수 호출을 하게 하는 것이 바인딩 다음으로 중요한 기술 요소 입니다.