들불

최상위 +layout.svelte 을 이용한 hook 같은 이벤트 처리

· 2023-05-22 (월) 12:18:38 · 1285

Sveltekit 최신버전에 해당되는 내용입니다.

 

Sveltekit 정식 버전 나오기 전까지. 에메모호 했던것이

hook 이벤트 중 내부 계산은 js 파일로 한다고 치더라도, 

보여주는 부분 경고창 같은 보여줘야하는 내용들은 어떻게 보여줘야하느냐의 문제가 있었습니다.

 

그때는 일일이 해당 페이지에 배치해서 넣어줬습니다.

그런데 정식버전 업데이트 되면서,

routes 폴더 최상위 +layout.svelte가 

포든 하위 폴더에 물고 들어간다는 내용을 보고.

아 이제는 공동으로 자주 사용하는 컴포넌트는 이곳에 등록해서 쓰면 되겠다 싶어서

잘 넣어두고 사용하고 있습니다.

 

주로

alert, confirm,toast 창(별도로 이쁘게 만들어 놓은)을 주로 배치 해놓고 사용합니다.

 

<script lang="ts">

    // alert

    import Alert from '$lib/component/modal/Alert.svelte';

    // confirm

    import Confirm from '$lib/component/modal/Confirm.svelte';

    // toast

    import ToastMessage from '$lib/component/modal/ToastMessage.svelte';

</script>

 

<Alert />

<Confirm />

<ToastMessage />

 

이렇게 해놓고

각 컴포넌트에 store 만들어서 

사용하려는 페이지에  store만 호출해서 사용합니다.

|
댓글을 작성하시려면 로그인이 필요합니다.
+
분류 제목 글쓴이 날짜 조회
SVELTE 23-05-31 조회 3,168
SVELTE 23-05-29 조회 1,759
SVELTE 23-05-28 조회 1,551
기타 23-05-22 조회 1,158
SVELTE 23-05-22 조회 1,286
SVELTE 23-05-21 조회 1,175
SVELTE 23-05-17 조회 1,424
SVELTE 23-05-15 조회 1,790
SVELTE 23-05-15 조회 1,134
SVELTE 23-05-03 조회 1,339
SVELTE 23-05-02 조회 1,591
SVELTE 23-05-01 조회 2,555
SVELTE 23-04-25 조회 1,544
SVELTE 23-04-25 조회 1,382
SVELTE 23-04-20 조회 5,306
SVELTE 23-04-14 조회 1,122
SVELTE 23-04-10 조회 1,473
SVELTE 23-04-08 조회 1,136
SVELTE 23-04-08 조회 1,828
SVELTE 23-03-17 조회 5,444
SVELTE 23-03-15 조회 1,043
SVELTE 23-03-15 조회 1,124
SVELTE 23-03-15 조회 2,206
SVELTE 23-03-14 조회 1,841
SVELTE 23-03-14 조회 1,420
SVELTE 23-03-14 조회 1,620
SVELTE 23-03-03 조회 1,316
SVELTE 23-03-03 조회 1,319
SVELTE 23-03-01 조회 3,403
SVELTE 23-03-01 조회 4,113