diff --git a/_posts/2023-11-01-svelte-components-tutorial-day3.md b/_posts/2023-11-01-svelte-components-tutorial-day3.md index 2e84a11d75..c7e5b5ef38 100644 --- a/_posts/2023-11-01-svelte-components-tutorial-day3.md +++ b/_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 < src/routes/+layout.svelte diff --git a/_posts/2023-11-09-svelte-components-tutorial-day5.md b/_posts/2023-11-09-svelte-components-tutorial-day5.md index c1bd25dc78..79366f0b51 100644 --- a/_posts/2023-11-09-svelte-components-tutorial-day5.md +++ b/_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 < 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 < src/app.postcss @@ -129,6 +137,7 @@ sed -i '' 's/favicon.png" \/>/favicon.png" \/>\n + import '@fortawesome/fontawesome-free/css/all.min.css'; import '../app.postcss'; @@ -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 < vite.config.ts diff --git a/_posts/2023-11-27-prismic-sveltekit-tutorial.md b/_posts/2023-11-27-prismic-sveltekit-tutorial.md new file mode 100644 index 0000000000..998c423368 --- /dev/null +++ b/_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/init@2.9.5 +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 maxmin93@gmail.com +✔ 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` 이동 + +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 타입 + +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 + + + + 지정된 영역 내에서 떨어지는 텍스트 + + + +
+ + + +``` + +```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) + +svelte-animation-snowball + + 
+ 
+ +> **끝!**   읽어주셔서 감사합니다. +{: .prompt-info } diff --git a/assets/img/2023/11/27-prismic-pagebuilder-custom.png b/assets/img/2023/11/27-prismic-pagebuilder-custom.png new file mode 100644 index 0000000000..dba49a2393 Binary files /dev/null and b/assets/img/2023/11/27-prismic-pagebuilder-custom.png differ diff --git a/assets/img/2023/11/27-prismic-pagebuilder-slices.png b/assets/img/2023/11/27-prismic-pagebuilder-slices.png new file mode 100644 index 0000000000..bbe4bffbdf Binary files /dev/null and b/assets/img/2023/11/27-prismic-pagebuilder-slices.png differ