add post 2024-03-10

maxmin93 · Apr 1, 2024 · be09b05 · be09b05
1 parent a45e2be
commit be09b05
Show file tree

Hide file tree

Showing 7 changed files with 618 additions and 53 deletions.
diff --git a/_posts/2024-02-23-svelte5-runes-tutorial.md b/_posts/2024-02-23-svelte5-runes-tutorial.md
@@ -6,11 +6,12 @@ tags: ["svelte5","runes","tutorial"]
 image: "https://i.ytimg.com/vi/RVnxF3j3N8U/sddefault.jpg"
 ---
 
-> Svelte 5 의 Rune 기능을 공부합니다. 변경은 확정적인것 같고 충분히 검토를 거친 기능들이기 때문에 미리 익숙해지는 것이 좋다고 생각합니다.
+> Svelte 5 의 Rune 기능을 공부합니다. 2024년 1분기 출시는 확정적인 것 같고 충분히 검토를 거친 기능들이기 때문에 미리 익숙해지는 것이 좋다고 생각합니다.
 {: .prompt-tip }
 
 - [Svelte 5 Runes](/posts/2024-02-23-svelte5-runes-tutorial/) : features &nbsp; &#10004;
-- [Svelte 5 Runes Example](/posts/2024-02-26-svelte5-runes-example1/) : Todo App
+- [Svelte 5 Runes - Todo App](/posts/2024-02-26-svelte5-runes-example1/) &nbsp; &#10004;
+- [Svelte 5 Runes - Supabase Auth](/posts/2024-02-29-svelte5-runes-example2/) 
 
 
 ## 0. 개요
@@ -29,6 +30,12 @@ image: "https://i.ytimg.com/vi/RVnxF3j3N8U/sddefault.jpg"
 - Runes 의 문법이 React 따라하는 것 아니냐? 다른게 뭐냐? Svelte 장점을 훼손한다는 불만들이 많았지만 1년 넘도록 Svelte 5 로의 작업을 계속하고 있습니다.
 - 나보다 머리 좋은 형님들이 머리를 맞대고 여러 사항에 대한 검토까지 마친 기능들이기 때문에 겸허히 받아들이고 감사히 쓰면 된다고 생각합니다.
 
+### [SvelteKit 로드맵](https://sveltekit.io/blog/sveltekit-roadmap)
+
+- SvelteKit 3 출시 : 2024년 12월 14일 예정
+  - 웹소켓 통합 (아직 개발중)
+- Svelte 5 출시 : 2024년 1분기 예정
+
 
 ## 1. 프로젝트 생성
 
@@ -56,9 +63,34 @@ bunx --bun vite build
 bunx --bun vite preview
 ```
 
+### runes 활성화 옵션
+
+프로젝트 생성시에 `svelte5 preview` 선택했으면 설정 안해도 되긴 한다.
+
+> 전체 프로젝트 수준에서 사용할 때 `svelte.config.ts` 에 설정
+
+이거 쓰면 거의 대부분의 라이브러리들을 못쓰게 된다. 심지어 icons 라이브러리까지.
+
+```ts
+export default {
+  // ...,
+  compilerOptions: {
+    runes: true
+  }
+};
+```
+
+> 특정 영역에서 사용할 때 해당 svelte 파일 내에서 선언
+
+```html
+<svelte:options runes={true} />
+```
+
 
 ## 2. Runes
 
+**읽어보기** : [SvelteKit 블로그 - 스벨트 5가 온다](https://sveltekit.io/blog/svelte-5)
+
 ### 특징과 이점 (by Gemini)
 
 Runes는 Svelte 5에서 도입된 핵심 개념으로, 이 반응성을 강화하고 프레임워크를 단순화하는 것을 목표로 합니다.
@@ -352,6 +384,8 @@ let { a, b, c, ...everythingElse } = $props<MyProps>();
 
 ### [snippets](https://svelte-5-preview.vercel.app/docs/snippets)
 
+**읽어보기** : [SvelteKit 블로그 - Slot 은 이제 안녕](https://sveltekit.io/blog/snippets)
+
 - slot 대신에 @render 를 사용하고
 - 템플릿을 snippet 키워드로 감싸서 함수처럼 재사용 할 수 있다.
 - snippet 함수의 파라미터로 객체를 넣어서 값을 변경할 수 있다.

diff --git a/_posts/2024-02-26-svelte5-runes-example1.md b/_posts/2024-02-26-svelte5-runes-example1.md
@@ -10,8 +10,8 @@ image: "https://i.ytimg.com/vi/uOI77E8Y95Q/sddefault.jpg"
 {: .prompt-tip }
 
 - [Svelte 5 Runes](/posts/2024-02-23-svelte5-runes-tutorial/) : features
-- [Svelte 5 Runes - Todo App](/posts/2024-02-26-svelte5-runes-example1/) : Example #1 &nbsp; &#10004;
-- [Svelte 5 Runes - Supabase Auth](/posts/2024-02-29-svelte5-runes-example2/) : Example #2
+- [Svelte 5 Runes - Todo App](/posts/2024-02-26-svelte5-runes-example1/) &nbsp; &#10004;
+- [Svelte 5 Runes - Supabase Auth](/posts/2024-02-29-svelte5-runes-example2/)
 
 
 ## 0. 개요
@@ -23,7 +23,8 @@ image: "https://i.ytimg.com/vi/uOI77E8Y95Q/sddefault.jpg"
 - 유틸리티
   - theme-change : light/dark 테마 변경
   - svelte-persisted-store : localStorage 읽기/쓰기
-
+  - [svelte-remixicon](https://remixicon.com/) : 리믹스 아이콘 (MIT 라이센스)
+    - lucide 아이콘은 1444개로 line 스타일만 있는데, remix 아이콘은 2850개 (filled 스타일 포함)
 
 ## 1. 프로젝트 생성
 
@@ -49,6 +50,7 @@ bunx --bun vite dev
 ### [TailwindCSS 설정](https://tailwindcss.com/docs/installation/using-postcss)
 
 - tailwind 설정의 theme.extend 는 기본값에 추가한다는 의미이다.
+  - 주의 : color 를 직접 추가하지 말자. 안된다. 변수를 바로 사용해야 작동한다.
 - tailwind 컨테이너 container 를 theme 파라미터로 재정의 했다.
 - 기존 스크린 외에 모바일, 태블릿, 데스크탑 스크린을 추가했다.
 
@@ -94,7 +96,7 @@ export default defineConfig({
 });
 EOF
 
-# font & screen & color 추가 (extend), daisyUI 설정
+# font & screen & 변수 추가, daisyUI 설정
 cat <<EOF > tailwind.config.js
 const defaultTheme = require('tailwindcss/defaultTheme');
 
@@ -125,30 +127,11 @@ export default {
       serif: ['"Noto Serif KR"', ...defaultTheme.fontFamily.serif],
       mono: ['D2Coding', ...defaultTheme.fontFamily.mono],
     },
-    extend: {
-      colors: {
-        background: 'var(--background, oklch(var(--b2)/<alpha-value>))',
-        foreground: 'var(--foreground, oklch(var(--bc)/<alpha-value>))',
-      },
-    },
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],
   daisyui: {
     logs: false,
-    themes: [
-      {
-        light: {
-          ...require('daisyui/src/theming/themes')['light'],
-          '--background': '#e4d8b4', // retro
-          '--foreground': '#732438', // retro
-        },
-        dark: {
-          ...require('daisyui/src/theming/themes')['dark'],
-          '--background': '#171618', // luxury
-          '--foreground': '#dca54c', // luxury
-        },
-      },
-    ],
+    themes: false,
   },
 };
 EOF
@@ -192,14 +175,6 @@ cat <<EOF > src/app.pcss
   }
 }
 
-*,
-*::before,
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 html {
   scroll-behavior: smooth; /* 부드러운 스크롤 */
   font-family: font-sans;
@@ -212,9 +187,11 @@ EOF
 
 ```bash
 # plugins, icons, faker 설치
-bun add -d @faker-js/faker
+bun add -d @faker-js/faker svelte-remixicon
 bun add tailwind-variants clsx tailwind-merge
-bun add theme-change nanoid lucide-svelte svelte-persisted-store
+bun add theme-change nanoid svelte-persisted-store
+
+mkdir src/lib/utils
 
 # A simple indicator to show current breakpoint
 cat <<EOF > src/lib/utils/tw-indicator.svelte
@@ -267,15 +244,18 @@ cat <<EOF > src/routes/+error.svelte
 </div>
 EOF
 
+# 기존 첫페이지를 지우고 '(home)' 아래에 생성
+rm "src/routes/+page.svelte"
 mkdir "src/routes/(home)"
 
 # daisyUI 확인용 demo 페이지 (theme 변경 스위치 포함)
 cat <<EOF > "src/routes/(home)/+page.svelte"
 <script>
-  import { SunIcon, MoonIcon } from 'lucide-svelte';
-
+  import { RiSunLine, RiMoonLine } from 'svelte-remixicon';
+  import { onMount } from 'svelte';
+  
   let isDark = \$state(false);
-  \$effect(() => {
+  onMount(() => {
     isDark = localStorage.getItem('theme') === 'dark';
   });
 </script>
@@ -286,14 +266,14 @@ cat <<EOF > "src/routes/(home)/+page.svelte"
       <h1 class="text-5xl font-bold">안녕, daisyUI</h1>
       <p class="py-6 font-mono text-foreground">구성 : TailwindCSS + SvelteKit + Bun</p>
       <label class="flex cursor-pointer gap-2">
-        <SunIcon size="20px" />
+        <RiSunLine size="20px"></RiSunLine>
         <input
           type="checkbox"
           bind:checked={isDark}
           data-toggle-theme="light,dark"
           class="theme-controller toggle"
         />
-        <MoonIcon size="20px" />
+        <RiMoonLine size="20px"></RiMoonLine>
       </label>
     </div>
   </div>

diff --git a/_posts/2024-02-29-svelte5-runes-example2.md b/_posts/2024-02-29-svelte5-runes-example2.md
@@ -10,8 +10,8 @@ image: "https://i.ytimg.com/vi/uOI77E8Y95Q/sddefault.jpg"
 {: .prompt-tip }
 
 - [Svelte 5 Runes](/posts/2024-02-23-svelte5-runes-tutorial/) : features
-- [Svelte 5 Runes - Todo App](/posts/2024-02-26-svelte5-runes-example1/) : Example #1
-- [Svelte 5 Runes - Supabase Auth](/posts/2024-02-29-svelte5-runes-example2/) : Example #2 &nbsp; &#10004;
+- [Svelte 5 Runes - Todo App](/posts/2024-02-26-svelte5-runes-example1/) 
+- [Svelte 5 Runes - Supabase Auth](/posts/2024-02-29-svelte5-runes-example2/) &nbsp; &#10004;
 
 
 ## 0. 개요
@@ -60,6 +60,7 @@ bun add @supabase/ssr @supabase/supabase-js
 cat <<EOF > .env.local
 PUBLIC_SUPABASE_URL={프로젝트 URL}
 PUBLIC_SUPABASE_ANON_KEY={프로젝트 익명 KEY}
+EOF
 ```
 
 ### supabase 서버 코드
@@ -551,14 +552,16 @@ dropdown 형태의 Auth 메뉴를 구현하기 위해, 열린 후 바깥쪽을
 
 반응형 선언이 필요없는 경우인데, $state 사용하라고 메시지로 권고한다. [이슈 #10435](https://github.com/sveltejs/svelte/issues/10435) 에서 다뤄진 것처럼 무시하도록 반영될 듯하다. 거슬리지만 preview 버전인 만큼 그냥 넘어가야 한다.
 
+- export const 또는 export function 을 통해 자식 메소드를 호출할 수 있다.
+
 > parent
 
 ```html
 <script>
   import { LoginDialog } from '$lib/components';
 
-  /** @type {(open:boolean)=>void} */
-  let showDialog;
+  /** @type { { open: ()=>void, close: ()=>void } } */
+  let control;
   // [메시지]
   // showDialog is updated, but is not declared with $state(...).
   // Changing its value will not correctly trigger updates.
@@ -568,14 +571,14 @@ dropdown 형태의 Auth 메뉴를 구현하기 위해, 열린 후 바깥쪽을
    * @param {Event} event
    */
   function openDialog(event) {
-    showDialog(true);
+    control.open();
   }  
 </script>
 
 <button class="btn" onclick={openDialog}>open modal</button>
 
-<LoginDialog bind:showDialog />
-<!-- <svelte:component this={LoginDialog} bind:showDialog /> -->
+<LoginDialog bind:control />
+<!-- <svelte:component this={LoginDialog} bind:control /> -->
 ```
 
 > child
@@ -585,11 +588,9 @@ dropdown 형태의 Auth 메뉴를 구현하기 위해, 열린 후 바깥쪽을
   /** @type {HTMLDialogElement} */
   let dialogEl;
 
-  /** @param {boolean} open */
-  export let showDialog = function (open) {
-    if (open) {
-      dialogEl.show();
-    }
+  export const control = {
+    open: () => dialogEl.show(),
+    close: () => dialogEl.close(),
   };
 </script>