붉은거위 노트 (redgoose note)

svelte note

Nest
Development
Category
Javascript
Hit
55
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>