Web/JavaScript79 [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. [TypeScript] Indexed Access Types, Mapped Types, Conditional Types Indexed Access Type We can use Indexed Access Type to look up a specific property on another type. type Person = { age: number; name: string; alive: boolean }; let age: Person["age"] = 18; console.log(typeof age); // number The indexing type is itself a type, so we can use union, keyof, or other types entirely. type Person = { age: number; name: string; alive: boolean }; let person1: Person["age.. 2021. 7. 9. [TypeScript] Mixins Mixin is a way that building up classes by combining simpler partial classes. It is a kind of component reuse. Basics It relies on using Generic with class Inheritance to extend a base class. type Constructor = new (...args: any[]) => {}; class ExClass { constructor(public name: string) { } } function MixinGenerator(Base: T) { return class Example extends Base { _age = 1; setAge(age: number) { t.. 2021. 7. 9. [TypeScript] Generic Generic can create a component that can work over a variety of types rather than a single one. function identity(arg: T): T { return arg; } This generic function is the same as below. function identity(arg: number): number { return arg; } function identity(arg: string): string { return arg; } ... The T in the generic allows us to capture the type the user provides so that we can use that informa.. 2021. 7. 5. [TypeScript] Singleton Pattern Singleton is the most popular design pattern. It is a kind of creational design pattern and it ensures that only one instance. Code class Singleton { private static instance: Singleton; private constructor() { } public static getInstance(): Singleton { if (!Singleton.instance) { Singleton.instance = new Singleton(); } return Singleton.instance; } } We can get the same single instance using getIn.. 2021. 7. 5. [TypeScript] Class The class of TypeScript is similar to other languages. class Person { name: string; constructor(name: string) { this.name = name; } introduce() { console.log(`My name is ${this.name}`); } } let person = new Person('hoya'); person.introduce(); // My name is hoya Structural Type System TypeScript uses structural type system. That is, if the class has the same structure, they are compatible with ea.. 2021. 7. 4. [TypeScript] Basic Types TypeScript gives us some data types and it helps us a lot. Boolean It has a true/false value. let isSuccess: boolean = true; Number let binary: number = 0b0111; let octal: number = 0o765; let decimal: number = 7; let hex: number = 0xcafe; let big: bigint = 1234n; If you want to use bigint, you need to use ES2020 or later. String let familyName: string = 'kim' let givenName: string = "hoya" let m.. 2021. 7. 4. 이전 1 2 3 4 5 6 7 다음
