【AI 자막】 Svelte & SvelteKit 완벽 가이드 2025

Let's create our first component, load it in the browser and learn about the basic structure of a svelte component.

Let's discover how state is managed in Svelte by creating a simple counter component.

Let's discover reactive statements in Svelte. reactive statements allows us to run code whenever a dependency changes.

While working with reactive statements, there are some unexpected behaviours that you need to be aware of.

Let's discover how to pass properties to our Svelte components.

Let's get started with our button component by discussing Slots.

Before carrying on with the button component, let's see how can we use SCSS so that we can have more styling features.

Let's see different ways that we can use in order to dynamically manipulate classes in our html elements.

Lets in this lecture discover the style directive. The style directive allows us to add inline styling and also override CSS variables.

We already learned about using slots in svelte. But we can do more with slots by using named slots to target different areas in out component.

Slots also have a useful feature where we can pass props to our slots and access them when consuming the component.

Let's see how to handle event handlers and use event modifiers.

Some times we might need to forward props that we pass to a custom component. There are two ways to do this, let's discuss that in this lecture.

Let's discover how can we loop through data in our markup by using an #each loop.

Let's discover multiple ways that we can use in order to bind an input value to a variable.

Updating arrays and objects in Svelte can be a little tricky. Let's discover how to do it properly.

Similar to binding HTML attributes to variables, we can also bind component props

Our components can dispatch events that consumers of the component can listen to. This can be very useful if you want your component to be more flexible and generic.

In Svelte, we can tell the compiler that we only need to update our component only when we pass a new array (object) and not a mutated version of the same array (object).

Now that we know about custom events, let's create an event for removing todos.

Let's create another event for toggling our todos.

Let's see what are read only props in Svelte components and how to make use of them.

Let's take a look at ways that we can use in order to debug our Svelte code.

Svelte provides us with some functions that we can use in order to run some code in the component's lifecycle.

Let's make use of our lifecycle functions to implement a useful feature in our todo list.

Similar to binding input values, dom elements and component props, we can also bind element dimensions.

There is a special lifecycle function that we haven't mentioned yet. Let's take a look at the tick function.

Let's do a quick clean up, add some missing stuff and prepare our component for styling.

Let's take some time to style our todo list component.

Let's discover a way to fetch data in Svelte directly in our markup.

Let's load our todos using the onMount lifecycle function. And also modify our component so that it can handle loading and error states.

Let's use our API to add new todos.

Let's see how I implemented toggling todos using the API.

Let's see how can we use slots to allow consumers of our component to customize parts of the component.

Let's take an overview on how to apply transitions on your DOM elements.

Let's apply transitions to our todo items whenever they are created or destroyed.

We can animate elements based on some variable using the key block. Let's see how can we do that.

Let's discover a cool feature in Svelte which is the FLIP animation.

In addition to transitions that we can import from Svelte, we can also write our own transitions.

Let's continue with our spin transition function.

We can also use JavaScript to perform our custom transitions. Let's take a quick example in this lecture.

Let's do a quick modification to our TodoList component so that we can demonstrate a transition feature called crossfade.

A cool feature in Svelte is the crossfade transitions. This will allows to smoothly animate items from one list to the other.

Let's discover what are actions and how to write one.

Let's create an action that would allow us to attach a custom event handler to our DOM elements.

Let's see how can we use a third party library like Tippy.js in Svelte.

Let's create an action that will make it much easier to use tippy in Svelte.

To demonstrate stores, let's create a mini router so that we can have multiple pages to share data between.

Using writable store we can globally store data that can read and write to.

Let's see an easier way to use our stores and also bind our stores values to inputs.

Let's implement light and dark color schemes in our applications using our settings store value.

When defining a store, we have the option of passing a callback function. That can be useful in many situations.

In addition to writable stores, we can also have stores that are read-only.

In addition to stores that we get in Svelte, we can also create our own custom stores.

We can also create stores that derive its value from other stores. Let's discover that in this lecture.

We can update the values of a writable store over a duration of time instead of immediately. Which allows us to do animations using stores.

Svelte can only interpolate between numbers or arrays and objects that has their leaf nodes as numbers. But we can also provide our custom interpolation function to interpolate between any other values.

Another way to change your store value over time is using the spring function. Unlike tweened, spring does not change the value over a fixed duration of time. Its time is determined by stiffness and damping parameters.

Let's take a quick introduction on what is the context API and how is it different from stores.

Let's see how can we handle a form in Svelte normally without using any context. And the discuss how we can make it easier by using context.

Before creating our context, let's create a custom Form and Field components.

Let's now use context to pass form data from our parent component to the fields.

In the previous lecture we managed to create a context. However, since contexts are not reactive, we need to combine context and stores to be able to update our context value.

Let's now use our context and store to track errors in our form.

Let's make use of slots and slot props to allow the Form component consumers to access context data and also customize validation errors markup.

Let's try to use a JavaScript library like Konva.js and discuss how we can make it easier to use using context.

Let's start turning Konva.js elements into Svelte component by creating a Stage component.

Let's now create the Layer and Rect components and use context to pass down our stage and layers.

Now that we are creating Layers and Rects, we need to also handle destroying them.

Now that we are handling creating and destroying Konva.js components, let's also handles updating the components' props.

Konva elements can also dispatch various events. Let's handle that in our custom components.

Let's finally do one more thing that ill allow us to access the rect object and its methods using bind:this.

Let's have a quick look on different ways that we've seen so for to share data between multiple components. And then introduce a new way to share code and data between multiple instances of the same component.

Let's use module context in a very simple example where we are going to keep track of how many times a component was created.

To have another module context example, let's create a simple video player first.

Let's now use module context to only allow one video to be playing at a time.

Let's export a couple of functions that will allow us to play and pause all videos with the help of the module context.

Let's create a new SvelteKit project and take a quick look the the folder structure.

Let's take a look at how to create routes and navigate between them. And also how to have parameters in our routes.

Let'd discover how we can organize our components in a SvelteKit project. We will make use of the $lib folder alias and also see how can we create custom aliases.

Let's discover some functions that will help us navigate to pages or hook into navigation lifecycle.

Sometimes we might have parameters that have unknown number of segments. Let's see how can we handle that in SvelteKit.

Sometimes we might have parameters that are not required to exist in the URL. Let's see how to have optional parameters in SvelteKit.

We can decide if our parameters are valid or not using parameter matchers.

In most applications there will be elements that are shared across different pages. For that we can use layout components.

We can change how a layout behaves by simply having if conditions in our layout component.

Layout groups allows us to have separate layout files for different groups of pages.

When we have multiple nested layouts that are inheriting from each other; we can simply break out of that hierarchy for a specific page or a layout.