Framework/Svelte6 [Svelte] Svelte + Vite + TypeScript + Tailwind 프로젝트 생성 진행환경 OS: macOS node --version: v18.16.0 npm --version: 9.5.1 1. vite 프로젝트 생성 npm init vite@latest 2. 프로젝트 이름 설정 3. 프레임워크 선택 ( Svelte ) 4. 타입스크립트 선택 ( TypeScript ) 5. 프로젝트 생성완료 6. 프로젝트 실행결과 cd svelte-vite-ts-tailwind npm install npm run dev http://localhost:5173/ 접속 결과 7. Tailwind CSS 설치 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 8. tailwind.config.js 수정 /** @type {im.. 2023. 4. 17. [Svelte] CSS style 변수 사용하는 방법 1. Custom Properties 활용 the color is set using a CSS variable 사용하는 상단 div에 커스텀 프로퍼티(--theme-color: {color})를 넣고 하단 style에서 var를 활용해 해결하면 됩니다. * 커스텀 프로퍼티(Custom Property)는 앞에 더블 하이픈(--)으로 시작합니다. 참조 [svelte dev]: https://svelte.dev/repl/4b1c649bc75f44eb9142dadc0322eccd?version=3.6.7 CSS variables • REPL • Svelte svelte.dev [mdn custom properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/U.. 2023. 4. 3. [Svelte] 반복문 ( each ) 1. 임의 횟수 반복 {#each Array(5) as _, i} 순서: {i} {/each} 결과 2. 객체 배열 ( Array of Objects ) {#each list as item, i} index: {i}. name: {item.name}, age: {item["age"]} {/each} 결과 3. 객체 배열 ( Array of Objects ) Key 지정 key를 지정하는 이유는 svelte에서 key를 활용해서 데이터변경시 다시 렌더링을 합니다. {#each list as item, i (item.id)} index: {i}. name: {item.name} age: {item["age"]} {/each} 결과 참조 [svelte tutorial each-blocks]: https://s.. 2023. 3. 22. [Svelte] svelte-spa-router 이 글은 svelte에서 svelte-spa-router를 통해 라우팅 설정 방법 및 사용 예시를 설명하고 있습니다. 설치 # yarn yarn add svelte-spa-router # npm npm install svelte-spa-router Router 설정 svelte-spa-router App.svelte에 적용한 예시입니다. routes import Main from "./components/Main.svelte"; import About from "./components/About.svelte"; import ToDo from "./components/ToDo.svelte"; export default { "/": Main, "/about": About, "/todo/:id": ToDo, .. 2023. 2. 12. [Svelte] $ 반응성 구문 Svelte $ 반응성 구문 참조 스벨트 문서: https://svelte.dev/docs#component-format-script-3-$-marks-a-statement-as-reactive Docs • Svelte Documentation Before we begin This page contains detailed API reference documentation. It's intended to be a resource for people who already have some familiarity with Svelte. If that's not you (yet), you may prefer to visit the interactive tutorial or the svelte.dev 2022. 7. 21. Svelte 시작하기 설치 npm create vite@latest [프로젝트 이름] -- --template svelte cd [프로젝트 이름] npm install npm run dev 참조 스벨트 공식 홈페이지: https://svelte.dev/ Svelte • Cybernetically enhanced web apps Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build .. 2022. 7. 18. 이전 1 다음
