svelte note
- Nest
- Development
- Category
- Javascript
- Hit
- 258
- Star
- 0
프론트엔드 서버를 운용하기위한 도구
https://kit.svelte.dev/docs/adapters
호스트, 포트번호같은 서버환경에 대한 도구에 관한 문서다.
노드서버를 확장시킬 수 있어 보인다. (그냥 sveltekit에서는 소스속에서 사용하는것 같아 보이지만..)
비동기 다이나믹 컴포넌트 구현하기
간단히 해시 라우트를 통하여 탭을 만들고, 주소를 이동하면 자식 컴포넌트를 바꿔주는 부분이 필요하여 만들게 되었다.
이동하는 주소 목록은 다음과 같다.
- /#/guide
- /#/guide/buttons
- /#/guide/form-elements
- /#/guide/icon
<!-- guide.svelte -->
<article>
<h1><a href="/#">HOME</a> / Guide page</h1>
<Tabs/>
{#await component}
<p>...waiting</p>
{:then comp}
<svelte:component this={comp}/>
{:catch err}
<p>Error page</p>
{/await}
</article>
<script lang="ts">
import Tabs from './tabs/index.svelte'
let hashArray: string[]
let component: any
const subPages = [
{ type: 'home', component: () => import('./home.svelte') },
{ type: 'icons', component: () => import('./icons.svelte') },
{ type: 'buttons', component: () => import('./buttons.svelte') },
{ type: 'form-elements', component: () => import('./form-elements.svelte') },
]
async function render(route: string)
{
const selectedRoute = subPages.find(o => o.type === route)
return (await selectedRoute.component() as any).default
}
hashArray = location.hash ? location.hash.replace(/^#\//, '').split('/') : [ 'guide', 'home' ]
component = render(hashArray[1] || 'home')
</script>
이렇게 기초적인 구성정도만 작성해둔다. 출처는 이곳저곳..
import를 함수 형식으로 사용하기
다이나믹 컴포넌트를 사용하는 방법중에 하나
<svelte:component this="{Chatbox}" />
<script>
let Chatbox;
function loadChatbox() {
import('./ChatBox.svelte').then(res => Chatbox = res.default)
}
</script>
스타일시트 :global 사용하기
svelte 기본은 scoped
를 기본으로 사용하고 있다. 글로벌로 사용하려면 :global(body) {}
같은 모습으로 선택자를 만들어야 한다.
요즘은 일반 css에서 nesting을 사용할때 글로벌에서 같이 사용하려면 다음과 같이 사용할 수 있다.
:global(:root) {
& :global(body) {
background: white;
}
}
:global(:root[data-theme=dark]) {
& :global(body) {
background: black;
}
}
@media (prefers-color-scheme: dark) {
:global(:root:not([data-theme=light])) {
& :global(body) {
background: black;
}
}
}
다크모드에 관한 셀렉터의 구조다.
특정 변수가 업데이트될때마다 함수실행하기
$: c, console.log('yes')
이런 모습으로 사용할 수 있다. 마치 vue의 watch
같이..
slot을 빈 엘리먼트로 사용하고 싶을때..
vue에서 <template #name><span>text</span><em>123</em></template>
와 같이 특정 엘리먼트로 감싸지 않고 내용물만 사용하고 싶을때가 많다.
이전까지 찾아보고 안되는줄 알았는데 잘 찾아보니 <svelte:fragment/>
를 사용하는 방법이 있었다.
<Comp>
<h1 slot="header">Hello</h1>
<svelte:fragment slot="footer">
<p>text line</p>
<p>text line</p>
</svelte:fragment>
</Comp>
출처: https://svelte.dev/docs/special-elements#svelte-fragment