svelte13 [Svelte] Template Syntax 이번에는 markup 영역에서 조건문, 반복문 등을 사용하는 방법에 대해 살펴보겠습니다. #if 다음 예제와 함께 조건문의 사용에 대해 살펴봅시다. {#if score >= 90} Grade: A {:else if score >= 80} Grade: B {:else} Grade: C {/if} 조건문의 경우 아주 간단하죠? 몇 가지 문법적 요소만 기억하시면 쉽게 사용하실 수 있습니다. #each 이번엔 반복문의 사용에 대해 살펴봅니다. {#each nums as num} {num} {/each} {#each nums as num, idx} {idx}: {num} {/each} {#each persons as person (person.name)} {person.name}, {person.age} {/ea.. 2022. 12. 10. [Svelte] Getting Started with SvelteKit ※ 2022.12.01 오랫만에 Svelte를 다시 접해보니 많은 것들이 변해 있더라고요. 그래서 현 시점을 기준으로 다시 정리를 해봅니다. Create Project SvelteKit을 사용하여 프로젝트를 생성해보겠습니다. 원래는 yarn을 사용했었지만, yarn도 modern yarn으로 버전업이 되면서 많은 것이 달라졌습니다. 가장 큰 변화는 node_modules를 사용하지 않는 것입니다. 이로 인하여 당연시 해당 폴더를 참조하던 것들이 동작을 제대로 못하게 되버렸습니다. 변경해서 사용할 수는 있지만 추가적인 노력이 들어가야 하고, VSCode 역시 추가 조작을 해야만 되는 상황이라 현재로서는 npm을 쓰시는 것이 조금 더 편하게 사용하실 수 있을 거에요. $ npm create svelte@la.. 2022. 12. 1. [Svelte] Svelte Element Svelte has some useful elements. Let's take a look at it. This element allows a component to include itself, recursively. This element is useful in cases such as tree traverse. I created an object with a repeated structure and passed using props. {objs.name} {#if objs.children} {#each objs.children as objs} {/each} {/if} is the same as . This element renders a component dynamically, using the co.. 2021. 12. 5. [Svelte] Context Svelte's components can communicate with its own child components using context. The context data cannot be used in parent components or sibling components. Context doesn't act as responsibility, unlike store. That is, even if the shared context data is changed, the context data gotten through getContext() is automatically changed or the screen is not automatically updated. Context data can be a.. 2021. 12. 4. [Svelte] Action Action is functions that are called when an element is created. It is used with use: directive. Action Function Example styling function is called when div elements are displayed. The node argument is the element that is declared action. The parameters argument is the data to pass to the action. Life Cycle of Action function styling(node, parameters = { width: '50px', height: '50px', color: 'tom.. 2021. 12. 2. [Svelte] Event Handling Let's learn how to handle the event in Svelte. Event Bubbling : propagating the event from child to parent Event Capturing : propagating the event from parent to child Inline Event Handler DOM can have an inline event handler using on:click in Svelte. (text += '.')}> {text} Multiple Event Handler You can use multiple events with a single element. {count} Test Event Modifiers Svelte provides seve.. 2021. 11. 30. [Svelte] Slot Slot allows components to have sub-elements. Simple Example Slot feature can be used via slot tag. Fallback Content slot tag gets the content from the parent. If there is not any content from a parent, the fallback content is used. Test A parent component can pass the sub-elements to a child component. Named Slot We can give a name to slot for identification. Name Age The order is important. It .. 2021. 11. 28. [Svelte] Props The data passed from parents to children is called properties (props). Example At first, let's create a child component. {name}, {age} This component gets data named as name, age from the parent component and display it. If age data aren't passed, this component will use the default value. Now, let's use this component in the parent. {#each users as user} {/each} {#each users as { name, age }} {.. 2021. 11. 27. [Svelte] Reactivity Reactivity is that other data or screens are automatically updated depending on the data change. Reactive Assignments This is a simple example of a reactive assignment. Normal Variable The screen is automatically updated since the data is updated. Name: {name} Change Name If we click the button, the value of the name variable is changed and displayed the changed value. Array Variable Now, let's .. 2021. 11. 25. [Svelte] Store Svelte has a store, so we don't need to use 3rd party modules. Writable Store A writable store is the most general store that can be read and written. Simple Example First, I will make a store. // store.ts import { writable } from 'svelte/store'; import type { Writable } from 'svelte/store'; export const count: Writable = writable(0); writable() function returns writable store object. Next, make.. 2021. 11. 13. [Svelte] Lifecycle Svelte has four lifecycle functions. onMount onDestroy beforeUpdate afterUpdate Let's figure out them. Create Project Create svelte project. I added a component for a test. Test Component And, I added this component into index.svelte. { toggleTest = !toggleTest; }} > Toggle {#if toggleTest} {/if} The test component will be toggled when we click the Toggle button. onMount onMount() lifecycle is c.. 2021. 11. 12. [Svelte] Using TailwindCSS on Svelte TailwindCSS is my favorite CSS framework. Let's use TailwindCSS on Svelte. Create an Application Create a svelte application via a template. Please see Create an Application section on the below post. 2021.09.14 - [Web/Etc] - [Svelte] Getting Started with VSCode Add TailwindCSS Add dependencies for TailwindCSS. $ yarn add -D tailwindcss postcss autoprefixer or $ npm install -D tailwindcss postcs.. 2021. 9. 14. 이전 1 2 다음
