들불

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

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

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만 호출해서 사용합니다.

|
댓글을 작성하시려면 로그인이 필요합니다.

JS프레임워크

269건
+
분류 제목 글쓴이 날짜 조회
SVELTE 23-05-31 조회 3,118
SVELTE 23-05-29 조회 1,712
SVELTE 23-05-28 조회 1,518
기타 23-05-22 조회 1,131
SVELTE 23-05-22 조회 1,250
SVELTE 23-05-21 조회 1,138
SVELTE 23-05-17 조회 1,391
SVELTE 23-05-15 조회 1,754
SVELTE 23-05-15 조회 1,104
SVELTE 23-05-03 조회 1,299
SVELTE 23-05-02 조회 1,555
SVELTE 23-05-01 조회 2,519
SVELTE 23-04-25 조회 1,507
SVELTE 23-04-25 조회 1,351
SVELTE 23-04-20 조회 5,256
SVELTE 23-04-14 조회 1,094
SVELTE 23-04-10 조회 1,441
SVELTE 23-04-08 조회 1,109
SVELTE 23-04-08 조회 1,793
SVELTE 23-03-17 조회 5,386
SVELTE 23-03-15 조회 1,013
SVELTE 23-03-15 조회 1,096
SVELTE 23-03-15 조회 2,164
SVELTE 23-03-14 조회 1,808
SVELTE 23-03-14 조회 1,385
SVELTE 23-03-14 조회 1,585
SVELTE 23-03-03 조회 1,283
SVELTE 23-03-03 조회 1,293
SVELTE 23-03-01 조회 3,358
SVELTE 23-03-01 조회 4,085