add post 2023-11-27

_posts/2023-11-01-svelte-components-tutorial-day3.md

@@ -43,15 +43,19 @@ bun run dev
 ### [TailwindCSS 및 flowbite-svelte 설정](https://tailwindcss.com/docs/guides/sveltekit) 
 
 1. TailwindCSS, tailwind-merge 설치
-2. flowbite-svelte 관련 라이브러리 설치
-3. `tailwind.config.js` 에 flowbite 설정 추가
-4. `app.postcss` 에 Tailwind directives 추가
-5. 최상위 `+layout.svelte` 에 전역 css 및 DarkMode 버튼 추가 
-6. `+page.svelte` 에 데모 코드를 넣어 flowbite 작동 확인
+2. heroicons 설치 (MIT 라이센스), fontawesome-free 설치 (무료)
+3. flowbite-svelte 관련 라이브러리 설치
+4. `tailwind.config.js` 에 flowbite 설정 추가
+5. `app.postcss` 에 Tailwind directives 추가
+6. 최상위 `+layout.svelte` 에 전역 css 및 DarkMode 버튼 추가 
+7. `+page.svelte` 에 데모 코드를 넣어 flowbite 작동 확인
 
 ```bash
 # tailwindcss 설치
 bun add -d tailwindcss autoprefixer tailwind-merge
+bun add -d svelte-hero-icons
+bun add @fortawesome/fontawesome-free
+
 bunx tailwindcss init -p
 
 # flowbite-svelte 설치
@@ -118,6 +122,7 @@ EOF
 
 cat <<EOF > src/routes/+layout.svelte
 <script lang="ts">
+  import '@fortawesome/fontawesome-free/css/all.min.css';
   import '../app.postcss';
 
   import { DarkMode } from 'flowbite-svelte';

_posts/2023-11-08-svelte-components-tutorial-day4.md

@@ -47,14 +47,18 @@ bun run dev
 
 1. TailwindCSS, tailwind-merge 설치
 2. 한글 폰트, daisyUI 라이브러리 설치
-3. `tailwind.config.js` 에 daisyUI 설정 추가
-4. `app.postcss` 에 Tailwind directives 추가
-5. 최상위 `+layout.svelte` 에 전역 css 추가 
-6. `+page.svelte` 에 데모 코드를 넣어 daisyUI 작동 확인
+3. heroicons 설치 (MIT 라이센스), fontawesome-free 설치 (무료)
+4. `tailwind.config.js` 에 daisyUI 설정 추가
+5. `app.postcss` 에 Tailwind directives 추가
+6. 최상위 `+layout.svelte` 에 전역 css 추가 
+7. `+page.svelte` 에 데모 코드를 넣어 daisyUI 작동 확인
 
 ```bash
 bun add -d tailwindcss autoprefixer tailwind-merge
 bun add -d @tailwindcss/typography daisyui@latest
+bun add -d svelte-hero-icons
+bun add @fortawesome/fontawesome-free
+
 bunx tailwindcss init -p
 
 # D2Coding 폰트 추가 (Mac 에서는 첫번째 "" 인자가 필요하다)
@@ -98,6 +102,7 @@ EOF
 
 cat <<EOF > src/routes/+layout.svelte
 <script lang="ts">
+  import '@fortawesome/fontawesome-free/css/all.min.css';
   import '../app.postcss';
 </script>
 

_posts/2023-11-09-svelte-components-tutorial-day5.md

@@ -23,9 +23,11 @@ image: "https://i.ytimg.com/vi/tHzVyChDuyo/maxresdefault.jpg"
   - vite-plugin-tailwind-purgecss 0.1.3
 - [x] Etc
   - heroicons
+  - fontawesome-free
   - purgecss
 
 
+
 ## 1. 프로젝트 생성
 
 ### 1) [SvelteKit](https://kit.svelte.dev/) 프로젝트 생성
@@ -45,16 +47,20 @@ bun run dev
 
 1. skeleton, tw-plugin 설치
 2. tailwindcss, postcss 설치 (typography, forms 추가)
-3. `postcss.config.cjs ` 추가 (cjs 확장자)
-4. `tailwind.config.js` 에 skeleton 설정
-5. `app.postcss` 에 directives 와 noto 폰트 추가
-6. `+layout.svelte` 에 전역 css 추가
-7. `+page.svelte` 에 데모 코드를 넣어 작동 확인
+3. heroicons 설치 (MIT 라이센스), fontawesome-free 설치 (무료)
+4. `postcss.config.cjs ` 추가 (cjs 확장자)
+5. `tailwind.config.js` 에 skeleton 설정
+6. `app.postcss` 에 directives 와 noto 폰트 추가
+7. `+layout.svelte` 에 전역 css 추가
+8. `+page.svelte` 에 데모 코드를 넣어 작동 확인
 
 ```bash
 bun add -d @skeletonlabs/skeleton @skeletonlabs/tw-plugin
 bun add -d tailwindcss postcss autoprefixer
 bun add -d @tailwindcss/typography @tailwindcss/forms
+bun add -d svelte-hero-icons
+bun add @fortawesome/fontawesome-free
+
 bunx tailwindcss init
 
 # postcss 는 CommonJS 확장자를 필요로 한다!
@@ -70,6 +76,8 @@ EOF
 # skeleton, fonts, 기본 theme 설정
 cat <<EOF > tailwind.config.js
 import { skeleton } from '@skeletonlabs/tw-plugin';
+import forms from '@tailwindcss/forms';
+import typography from '@tailwindcss/typography';
 
 const defaultTheme = require('tailwindcss/defaultTheme');
 
@@ -106,8 +114,8 @@ export default {
 }
 EOF
 
-# skeleton theme 기본 적용 (Mac 에서는 첫번째 "" 인자가 필요하다)
-sed -i '' 's/hover">/hover" data-theme="skeleton">/' src/app.html
+# hover 빼고 skeleton theme 기본 적용 (Mac 에서는 첫번째 인자 ''가 필요하다)
+sed -i '' 's/data-sveltekit-preload-data="hover"/data-theme="skeleton"/' src/app.html
 
 # 전역 css 에 directives 와 noto 폰트 설정
 cat <<EOF > src/app.postcss
@@ -129,6 +137,7 @@ sed -i '' 's/favicon.png" \/>/favicon.png" \/>\n    <link href="http:\/\/cdn.jsd
 
 cat <<EOF > src/routes/+layout.svelte
 <script lang="ts">
+  import '@fortawesome/fontawesome-free/css/all.min.css';
   import '../app.postcss';
 </script>
 
@@ -152,13 +161,12 @@ EOF
 bun run dev
 ```
 
-#### [heroicons](https://heroicons.com/) 와 [purgecss](https://www.skeleton.dev/docs/purgecss) 설치
+#### [fontawesome-free](https://heroicons.com/) 와 [purgecss](https://www.skeleton.dev/docs/purgecss) 설치
 
-- svelte 용 heroicons 설치 (MIT 라이센스)
+- fontawesome-free 아이콘 (무료)
 - tailwindcss 최적화를 위한 vite 전용 purgecss 플러그인 설치
 
 ```bash
-bun add -d svelte-hero-icons
 bun add -d vite-plugin-tailwind-purgecss
 
 cat <<EOF > vite.config.ts

_posts/2023-11-27-prismic-sveltekit-tutorial.md

@@ -0,0 +1,234 @@
+---
+date: 2023-11-27 00:00:00 +0900
+title: primic.io - SvelteKit Tutorial
+categories: ["frontend","svelte"]
+tags: ["primic","cms","slicemachine","tutorial"]
+image: "https://mma.prnewswire.com/media/1519349/prismic_logo_Logo.jpg?w=200"
+---
+
+> prismic.io 헤드레스 CMS 를 소개하는 Youtube 동영상이 있어서 따라해 보았습니다. slice machine 이라는 프리뷰 도구가 페이지 개발을 돕는 특징이 있습니다.
+{: .prompt-tip }
+
+## 0. 개요
+
+- [x] node 18.18.2 + SvelteKit
+- [x] prismic.io 
+  - @slicemachine/adapter-sveltekit 0.3.27
+  - @sveltejs/kit 1.27.1
+- [x] Etc
+  - open-props 1.6.13
+
+> 출처
+
+- [유튜브 - SvelteKit Crash Course: Build a Full Website in 90 min! - 2023 Tutorial](https://www.youtube.com/watch?v=QKxJW6VVp6w)
+- [깃허브 - samlfair/sveltekit-tutorial-fall-2023](https://github.com/samlfair/sveltekit-tutorial-fall-2023)
+
+## 1. 프로젝트 생성
+
+### [prismic.io](https://prismic.io/) 프로젝트 생성
+
+- 페이지에서 free(1 user) 버전 선택
+- sveltekit 프로젝트 선택
+- 설치 명령어 복사 후 터미널에 입력 (로그인이 오래 걸림)
+- Slice Machine 기동 후, 브라우저로 `http://localhost:9999` 열기
+  - `npm run dev` 실행시 함께 기동된다. 
+  - vite server 5173 포트와 slice machine 9999 포트가 사용된다.
+
+```bash
+npx @slicemachine/init@latest --repository tonyne-blog --starter sveltekit-starter-prismic-minimal
+
+Need to install the following packages:
+@slicemachine/[email protected]
+Ok to proceed? (y) y
+
+ Slice Machine  → Initializing
+
+✔ Starter copied
+
+ℹ We collect telemetry data to improve user experience.
+  Learn more: https://prismic.dev/slice-machine/telemetry
+
+✔ Detected framework SvelteKit and package manager npm
+✔ Began core dependencies installation with npm ... (running in background)
+✔ Selected repository tonyne-blog (flag repository used)
+✔ Installed core dependencies with npm
+✔ Updated Slice Machine configuration and loaded adapter
+✔ Logged in as [email protected]
+✔ Synced data with Prismic
+✔ Initialized project (patched package.json scripts)
+✔ Initialized adapter
+
+ Slice Machine  → Initialization successful!
+
+Continue with next steps in Slice Machine.
+
+? Run Slice Machine (npm run slicemachine)? › No
+```
+
+> 이것으로 개발환경 셋팅은 끝! 이후에는 페이지 빌더와 코딩으로 진행된다.
+
+## 2. Page 빌더
+
+동영상은 첫 페이지에 여러 slice 들을 나열해 놓은 데모 웹사이트를 개발하고 있다. 각 slice 에는 출력될 field 들을 가지고 있고, 여기에 데이터를 맵핑시키는 방법으로 페이지를 쉽게 만들 수 있음을 설명하고 있다.
+
+- `Page types > Page` 이동
+
+<img src="/2023/11/27-prismic-pagebuilder-slices.png" width="80%" alt="prismic-pagebuilder-slices" />
+
+### Slices 만들기
+
+1. `Add slice` 버튼 클릭
+2. slice 이름 입력 후, 출력될 field 들을 추가
+3. simulator 에서 비주얼로 편집하며 mockup 데이터를 작성
+4. 디자인은 style 에서 직접 코딩
+5. 변경사항을 코드와 mockups.json, model.json 으로 push
+
+#### HeroText 컴포넌트
+
+- 고정 구역 fields
+  - Title : Rich Text 타입, h1
+  - Subtitle : Rich Text 타입, p
+
+#### ContactForm 컴포넌트
+
+- 고정 구역 fields
+  - Heading : Rich Text 타입, h2
+  - Description : Rich Text 타입, p
+
+#### CardList 컴포넌트
+
+- 고정 구역 fields
+  - Heading : Rich Text 타입, h2
+- 반복 구역 fields
+  - Title : Rich Text 타입, h3
+  - Description : Rich Text 타입, p
+  - Image : Image 타입, auto(Responsive views)
+  - Name : Key Text 타입
+
+### Custom types
+
+#### Nav (Single 타입)
+
+- Links : Group 타입
+  - Link : Link 타입
+  - Label : Key Text 타입
+
+<img src="/2023/11/27-prismic-pagebuilder-custom.png" width="80%" alt="prismic-pagebuilder-custom" />
+
+## 9. Review
+
+- 따라하다 보니 기존의 리포트 저작도구와 다를바가 없다.
+  - 정적 페이지를 만들 때 조금은 도움이 될지 모르겠지만,
+  - 급 실망해서 깃허브 코드 실행해보고 접었다.
+- 생성형 AI로 HTML 코드를 자동 생성하는 도구들을 찾아봐야겠다.
+
+### ChatGPT4 로 텍스트 떨어뜨리는 HTML 코드 생성시키기
+
+블로그 글 분량이 적어서 짜투리로 ChatGPT4 로 텍스트 떨어지는 효과를 HTML&JS 로 코딩하도록 시켜본 내용을 추가한다.  
+
+[유튜브 동영상](https://www.youtube.com/watch?v=cqKAPq4rZJs) 을 보면서 스크립트를 따라하며 계속 명령을 추가해 보았는데, 얼추 비슷하게 작동하는 코드를 얻어내는데 성공했다.
+
+아쉬운 점은 기능적으로는 비슷한데, 디자인도 잘 해주면 좋겠다. (그냥 다 짜주면 좋겠다)
+
+> 나의 스크립트
+
+```text
+> can you write a code text falling down from the top?
+  ==> java 코드를 출력함 
+
+> javascript 와 html 로 작성해줘. 떨어지는 텍스트는 임의의 텍스트를 생성해서 출력해줘.
+  ==> 텍스트 한개만 출력함. style 의 yPosition 을 이용.
+
+> css 의 transform 을 사용해서 text 가 떨어지도록 만들어줘. 텍스트는 settimeout 으로 계속 떨어지도록 코드를 생성해줘.
+  ==> 텍스트 한개만 출력함
+
+> 랜덤 텍스트 5개를 모두 동시에 떨어지도록 코드를 작성해줘.
+  ==> for 문으로 createFallingText() 함수를 호출
+
+> 임의의 텍스트 5개가 동시가 아니라 순차적으로 임의의 시간 간격을 두고 떨어지도록 코드를 수정해줘.
+  ==> for 문 안에 setTimeout 과 delay 로 createFallingText() 함수를 호출
+
+> fallingArea 라는 id 를 가진 div 안에서만 텍스트가 떨어지도록 코드를 수정해줘.
+  ==> div 를 getElementById 로 찾은 다음 appendChild 를 수행
+```
+
+> ChatGPT4 가 생성한 코드
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>지정된 영역 내에서 떨어지는 텍스트</title>
+    <style>
+        #fallingArea {
+            position: relative;
+            width: 100%;
+            height: 100vh; /* 전체 화면 높이 */
+            overflow: hidden; /* 영역 밖의 텍스트 숨김 */
+        }
+
+        .fallingText {
+            position: absolute;
+            font-size: 24px;
+            animation: fall 5s linear;
+        }
+
+        @keyframes fall {
+            from { transform: translateY(-100px); }
+            to { transform: translateY(100vh); }
+        }
+    </style>
+</head>
+<body>
+    <div id="fallingArea"></div>
+    <script src="fallingText.js"></script>
+</body>
+</html>
+```
+
+```js
+function generateRandomText() {
+    const words = ["안녕하세요", "제주", "여행", "환영합니다", "즐거운", "시간"];
+    return words[Math.floor(Math.random() * words.length)];
+}
+
+function createFallingText(index) {
+    const fallingArea = document.getElementById('fallingArea');
+    const textElement = document.createElement('div');
+    textElement.classList.add('fallingText');
+    textElement.textContent = generateRandomText();
+    textElement.style.left = `${(index * 20) % 100}%`; // 각 텍스트의 위치를 다르게 설정
+    fallingArea.appendChild(textElement);
+
+    // 텍스트가 떨어지는 시간이 지나면 제거
+    setTimeout(() => {
+        fallingArea.removeChild(textElement);
+    }, 5000);
+}
+
+// 5개의 텍스트가 서로 다른 시간에 떨어지도록 설정
+for (let i = 0; i < 5; i++) {
+    // 랜덤한 지연 시간 (0~2000 밀리초)
+    const delay = Math.random() * 2000; 
+    setTimeout(() => createFallingText(i), delay);
+}
+```
+
+> Svelte 페이지에서 구동하려면
+
+- 스타일을 전역 css 파일에 작성하고
+- js 스크립트는 onMount 함수 내에서 실행하도록 하면 된다.
+
+### [Svelte 로 Snowfall 효과 만들기](https://mannes.tech/svelte-snowfall/)
+
+Svelte 에서는 텍스트 떨어지는 효과를 어떻게 하는지 검색하다가 나온 예제를 추가한다.
+
+- Svelte 의 [Snowfall - live code](https://svelte.dev/repl/3fe590584ad348cebd053e3f1c4f1b0e?version=4.2.7)
+
+<img src="https://mannes.tech/assets/static/snowfall_animationframe_small.e6cf399.87b36ac7443fcc935719de5814200057.gif" alt="svelte-animation-snowball" width="80%" />
+
+&nbsp; <br />
+&nbsp; <br />
+
+> **끝!** &nbsp; 읽어주셔서 감사합니다.
+{: .prompt-info }