diff --git a/.npmrc b/.npmrc index b6f27f135..d8b69069b 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1,3 @@ -engine-strict=true +link-workspace-packages = true +shamefully-hoist = true +engine-strict = true diff --git a/README.md b/README.md index db85c2ead..50f9fb9ec 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,11 @@ This repo uses [pnpm](https://pnpm.io/). ## Running the app +``` +pnpm add -g pnpm +pnpm build && pnpm dev +``` + First, run `node scripts/create-common-bundle`. This packages up everything that's needed to run a SvelteKit app (Vite, Esbuild, SvelteKit, Svelte compiler etc) which can subsequently be unpacked on a server to create and run and instance of a SvelteKit application (which powers the output window of the tutorial). The next steps depend on whether you want to run this locally in filesystem mode, or in WebContainer mode. For now, it works with filesystem mode only locally. In future, it will run both locally and on the web (using [WebContainers](https://blog.stackblitz.com/posts/introducing-webcontainers/)). diff --git a/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md b/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md index 1ba0088a5..a948ad807 100644 --- a/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md +++ b/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md @@ -2,29 +2,29 @@ title: Welcome to Svelte --- -Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build web applications of all sizes, with high performance and a small footprint. +Svelte 튜토리얼에 오신 것을 환영합니다! 이것은 고성능 및 작은 설치 공간으로 모든 크기의 웹 애플리케이션을 쉽게 구축하기 위해 알아야 할 모든 것을 알려줍니다. -You can also consult the [API docs](https://svelte.dev/docs) and the [examples](https://svelte.dev/examples), or — if you're impatient to start hacking on your machine locally — create a project with `npm init svelte`. +[API 문서](https://svelte.dev/docs) 및 [예제](https://svelte.dev/examples)를 참조하거나 - 만약 로컬에서 해킹하기를 간절히 원한다면 - `npm init svelte`로 프로젝트를 생성할 수도 있습니다. ## What is Svelte? -Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app _declaratively_ out of components that combine markup, styles and behaviours. +Svelte는 웹 애플리케이션을 구축하기 위한 도구입니다. 다른 사용자 인터페이스 프레임워크와 마찬가지로 마크업, 스타일 및 동작을 결합하는 컴포넌트에서 _선언적으로_ 앱을 빌드할 수 있습니다. -These components are _compiled_ into small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks. +이러한 구성 요소는 전통적으로 UI 프레임워크와 관련된 오버헤드를 제거하는 작고 효율적인 JavaScript 모듈로 _컴파일_ 됩니다. -You can build your entire app with Svelte (for example, using an application framework like [SvelteKit](https://kit.svelte.dev)), or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere. +Svelte로 전체 앱을 빌드하거나 (예: [SvelteKit](https://kit.svelte.dev)와 같은 애플리케이션 프레임워크 사용) 기존 코드베이스에 점진적으로 추가할 수 있습니다. 어디에서나 작동하는 독립 실행형 패키지로 컴포넌트를 제공할 수도 있습니다. ## How to use this tutorial -> You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte. +> Svelte를 이해하려면 HTML, CSS 및 JavaScript에 대한 기본적인 지식이 있어야 합니다. -This tutorial is split into four main parts: +이 자습서는 네 가지 주요 부분으로 나뉩니다. -- [Welcome to Svelte](/tutorial/welcome-to-svelte) (you are here) +- [Welcome to Svelte](/tutorial/welcome-to-svelte) (당신은 여기 있습니다) - [Introduction to SvelteKit](/tutorial/introducing-sveltekit) - [Advanced Svelte](/tutorial/tweens) - [Advanced SvelteKit](/tutorial/optional-params) -Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above. +각 섹션은 기능을 설명하기 위해 고안된 연습을 제공합니다. 이후 연습은 이전 연습에서 얻은 지식을 기반으로 하므로 처음부터 끝까지 진행하는 것이 좋습니다. 필요한 경우 위의 메뉴를 통해 탐색할 수 있습니다. -If you get stuck, you can click the `solve` button to the left of the editor. (It's disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor. +막히면 편집기 왼쪽에 있는 `해결` 버튼을 클릭할 수 있습니다. (연습이 포함되지 않은 이와 같은 섹션에서는 비활성화되어 있습니다.) 너무 많이 의존하지 마십시오. 제안된 각 코드 블록을 넣을 위치를 파악하고 편집기에 수동으로 입력하면 더 빨리 배울 수 있습니다. diff --git a/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md b/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md index 0e1f3d6ac..01c089c66 100644 --- a/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md +++ b/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md @@ -2,13 +2,13 @@ title: Your first component --- -In Svelte, an application is composed from one or more _components_. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The `App.svelte` file, open in the code editor to the right, is a simple component. +Svelte에서 애플리케이션은 하나 이상의 _컴포넌트_ 로 구성됩니다. 컴포넌트는 함께 속해 있는 HTML, CSS 및 JavaScript를 캡슐화하여 `.svelte` 파일에 기록되는 재사용 가능한 자체 포함 코드 블록입니다. 오른쪽의 코드 편집기에서 열리는 `App.svelte` 파일은 간단한 컴포넌트입니다. ## Adding data -A component that just renders some static markup isn't very interesting. Let's add some data. +일부 정적 마크업만 렌더링하는 컴포넌트는 그리 흥미롭지 않습니다. 일부 데이터를 추가해 보겠습니다. -First, add a script tag to your component and declare a `name` variable: +먼저 구성 요소에 스크립트 태그를 추가하고 `name` 변수를 선언합니다. ```svelte ++++++ ``` -...and include a `` component: +...`` 컴포넌트를 넣어봅니다.. ```svelte

This is a paragraph.

++++++ ``` -Notice that even though `Nested.svelte` has a `

` element, the styles from `App.svelte` don't leak in. +`Nested.svelte`에 `

` 요소가 있더라도 `App.svelte`의 스타일이 누출되지 않는다는 점에 유의하세요. -> Component names are always capitalised, to distinguish them from HTML elements. +> 컴포넌트 이름은 HTML 요소와 구별하기 위해 항상 대문자로 표시됩니다. diff --git a/content/tutorial/01-svelte/01-introduction/06-html-tags/README.md b/content/tutorial/01-svelte/01-introduction/06-html-tags/README.md index f4fa766ca..240b48719 100644 --- a/content/tutorial/01-svelte/01-introduction/06-html-tags/README.md +++ b/content/tutorial/01-svelte/01-introduction/06-html-tags/README.md @@ -2,14 +2,14 @@ title: HTML tags --- -Ordinarily, strings are inserted as plain text, meaning that characters like `<` and `>` have no special meaning. +일반적으로 문자열은 일반 텍스트로 삽입되므로 `<` 및 `>`와 같은 문자에는 특별한 의미가 없습니다. -But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML. +그러나 때로는 HTML을 컴포넌트에 직접 렌더링해야 합니다. 예를 들어 지금 읽고 있는 단어는 이 페이지에 HTML 덩어리로 포함되는 마크다운 파일에 존재합니다. -In Svelte, you do this with the special `{@html ...}` tag: +Svelte에서는 특수 `{@html ...}` 태그를 사용하여 이 작업을 수행합니다. ```svelte

{+++@html+++ string}

``` -> Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. In other words, if you use this feature it's critical that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks. +> Ssvelte는 DOM에 삽입되기 전에 `{@html ...}` 내부의 표현식을 삭제하지 않습니다. 즉, 이 기능을 사용하는 경우 신뢰할 수 없는 소스에서 가져온 HTML을 수동으로 이스케이프 처리하는 것이 중요합니다. 그렇지 않으면 사용자가 XSS 공격에 노출될 위험이 있습니다. diff --git a/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md b/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md index 32ef14170..eb1298392 100644 --- a/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md +++ b/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md @@ -2,15 +2,15 @@ title: Assignments --- -At the heart of Svelte is a powerful system of _reactivity_ for keeping the DOM in sync with your application state — for example, in response to an event. +Svelte의 중심에는 DOM을 애플리케이션 상태와 - 예를 들어 이벤트에 대한 응답으로 - 동기화 상태로 유지하기 위한 강력한 `반응성` 시스템이 있습니다. -To demonstrate it, we first need to wire up an event handler (we'll learn more about these [later](/tutorial/dom-events)): +이를 시연하려면, 먼저 이벤트 핸들러를 연결해야 합니다. ([나중에](/tutorial/dom-events) 자세히 알아보겠습니다) ```svelte @@ -21,4 +21,4 @@ Let's use `doubled` in our markup: +++

{count} doubled is {doubled}

+++ ``` -Of course, you could just write `{count * 2}` in the markup instead — you don't have to use reactive values. Reactive values become particularly valuable (no pun intended) when you need to reference them multiple times, or you have values that depend on _other_ reactive values. +물론 대신 마크업에 `{count * 2}`를 작성할 수 있습니다. 반응형 값을 사용할 필요가 없습니다. 반응형 값은 여러 번 참조해야 하거나 _다른_  반응형 값에 의존하는 값이 있을 때 특히 유용합니다(말장난이 아님). diff --git a/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md b/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md index 294cea314..1df4107e3 100644 --- a/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md +++ b/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md @@ -2,7 +2,7 @@ title: Statements --- -We're not limited to declaring reactive _values_ — we can also run arbitrary _statements_ reactively. For example, we can log the value of `count` whenever it changes: +우리는 반응형 _값_ 을 선언하는 데 제한을 두지 않습니다. 임의의 _명령문_ 을 반응형으로 실행할 수도 있습니다. 예를 들어 `count` 값이 변경될 때마다 기록할 수 있습니다: ```js let count = 0; @@ -10,7 +10,7 @@ let count = 0; +++$: console.log(`the count is ${count}`);+++ ``` -You can easily group statements together with a block: +명령문을 블록과 함께 쉽게 그룹화할 수 있습니다. ```js $: +++{+++ @@ -19,7 +19,7 @@ $: +++{+++ +++}+++ ``` -You can even put the `$:` in front of things like `if` blocks: +`if` 블록과 같은 항목 앞에 `$:`를 넣을 수도 있습니다. ```js $: +++if (count >= 10)+++ { diff --git a/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md b/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md index 19bfa74b3..31c282ace 100644 --- a/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md +++ b/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md @@ -2,9 +2,9 @@ title: Updating arrays and objects --- -Because Svelte's reactivity is triggered by assignments, using array methods like `push` and `splice` won't automatically cause updates. For example, clicking the 'Add a number' button doesn't currently do anything. +Svelte의 반응성은 할당에 의해 트리거되기 때문에 `push` 및 `splice`와 같은 배열 메서드를 사용해도 자동으로 업데이트되지 않습니다. 예를 들어 '번호 추가' 버튼을 클릭해도 현재 아무 작업도 수행되지 않습니다. -One way to fix that is to add an assignment that would otherwise be redundant: +이 문제를 해결하는 한 가지 방법은 중복되지 않는 할당을 추가하는 것입니다: ```js function addNumber() { @@ -13,7 +13,7 @@ function addNumber() { } ``` -But there's a more idiomatic solution: +그러나 더 관용적인 해결책이 있습니다. ```js function addNumber() { @@ -21,9 +21,11 @@ function addNumber() { } ``` -You can use similar patterns to replace `pop`, `shift`, `unshift` and `splice`. +유사한 패턴을 사용하여 `pop`, `shift`, `unshift` 및 `splice`를 대체할 수 있습니다. + +배열 및 개체의 — 예를 들어 `obj.foo += 1` 또는 `array[i] = x` — _속성_ 에 대한 할당은 값 자체에 대한 할당과 동일한 방식으로 작동합니다. + -Assignments to _properties_ of arrays and objects — e.g. `obj.foo += 1` or `array[i] = x` — work the same way as assignments to the values themselves. ```js function addNumber() { @@ -31,11 +33,11 @@ function addNumber() { } ``` -A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment. For example this... +간단한 경험 법칙: 업데이트된 변수의 이름은 할당의 왼쪽에 나타나야 합니다. 예를 들면 이것은... ```js const foo = obj.foo; foo.bar = 'baz'; ``` -...won't trigger reactivity on `obj.foo.bar`, unless you follow it up with `obj = obj`. +...`obj = obj`로 후속 작업을 수행하지 않는 한 `obj.foo.bar`에서 반응성을 트리거하지 않습니다. diff --git a/content/tutorial/01-svelte/03-props/01-declaring-props/README.md b/content/tutorial/01-svelte/03-props/01-declaring-props/README.md index 54f95e4b8..9e8c1d0d5 100644 --- a/content/tutorial/01-svelte/03-props/01-declaring-props/README.md +++ b/content/tutorial/01-svelte/03-props/01-declaring-props/README.md @@ -2,9 +2,9 @@ title: Declaring props --- -So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component. +지금까지 우리는 내부 상태만을 다루었습니다. 즉, 주어진 컴포넌트 내에서만 값에 액세스할 수 있습니다. -In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare _properties_, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component: +실제 응용 프로그램에서는 한 컴포넌트에서 하위 항목으로 데이터를 전달해야 합니다. 이를 위해서는 일반적으로 `props`로 축약되는 _속성_ 을 선언해야 합니다. Svelte에서는 `export` 키워드를 사용하여 이를 수행합니다. `Nested.svelte` 컴포넌트를 편집합니다. ```svelte ``` -> Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature. +> `$:`와 마찬가지로 처음에는 약간 이상하게 느껴질 수 있습니다. 그것은 JavaScript 모듈에서 `export`가 일반적으로 작동하는 방식은 아닙니다! 지금은 그냥 사용해 보세요. 곧 제2의 천성이 될 것입니다. diff --git a/content/tutorial/01-svelte/03-props/02-default-values/README.md b/content/tutorial/01-svelte/03-props/02-default-values/README.md index d6b44849d..da5101766 100644 --- a/content/tutorial/01-svelte/03-props/02-default-values/README.md +++ b/content/tutorial/01-svelte/03-props/02-default-values/README.md @@ -2,7 +2,7 @@ title: Default values --- -We can easily specify default values for props in `Nested.svelte`: +`Nested.svelte`에서 props의 기본값을 쉽게 지정할 수 있습니다. ```svelte ``` -If we now add a second component _without_ an `answer` prop, it will fall back to the default: +이제 `answer` prop _없이_ 두 번째 컴포넌트를 추가하면 기본값으로 돌아갑니다. ```svelte diff --git a/content/tutorial/01-svelte/03-props/03-spread-props/README.md b/content/tutorial/01-svelte/03-props/03-spread-props/README.md index 60ac0b11a..7787c901a 100644 --- a/content/tutorial/01-svelte/03-props/03-spread-props/README.md +++ b/content/tutorial/01-svelte/03-props/03-spread-props/README.md @@ -2,10 +2,10 @@ title: Spread props --- -If you have an object of properties, you can 'spread' them onto a component instead of specifying each one: +속성 개체가 있는 경우 각각을 지정하는 대신 구성 요소에 '확산'할 수 있습니다. ```svelte ``` -> Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases. +> 반대로 `export`로 선언되지 않은 것을 포함하여 컴포넌트에 전달된 모든 props를 참조해야 하는 경우 `$$props`에 직접 액세스하여 참조할 수 있습니다. Svelte가 최적화하기 어렵기 때문에 일반적으로 권장되지는 않지만 드문 경우에 유용합니다. diff --git a/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md b/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md index 5fe864050..bd0dad9d7 100644 --- a/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md @@ -2,9 +2,9 @@ title: If blocks --- -HTML doesn't have a way of expressing _logic_, like conditionals and loops. Svelte does. +HTML에는 조건문 및 루프와 같은 _논리_ 를 표현하는 방법이 없습니다. Svelte는 있습니다. -To conditionally render some markup, we wrap it in an `if` block: +일부 마크업을 조건부로 렌더링하기 위해 `if` 블록으로 래핑합니다. ```svelte +++{#if user.loggedIn}+++ @@ -20,4 +20,4 @@ To conditionally render some markup, we wrap it in an `if` block: +++{/if}+++ ``` -Try it — update the component, and click on the buttons. +사용해 보십시오. 컴포넌트를 업데이트하고 버튼을 클릭하십시오. diff --git a/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md b/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md index a10eb4806..e26e5b2bd 100644 --- a/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md @@ -2,7 +2,7 @@ title: Else blocks --- -Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block: +두 조건 (`if user.logged In` 및 `if !user.logged In`)은 상호 배타적이므로 `else` 블록을 사용하여 이 구성 요소를 약간 단순화할 수 있습니다. ```svelte {#if user.loggedIn} @@ -16,4 +16,4 @@ Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are {/if} ``` -> A `#` character always indicates a _block opening_ tag. A `/` character always indicates a _block closing_ tag. A `:` character, as in `{:else}`, indicates a _block continuation_ tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML. +> `#` 문자는 항상 _블록 열기_  태그를 나타냅니다. `/` 문자는 항상 _블록 닫기_  태그를 나타냅니다. `{:else}`와 같은 `:` 문자는 _블록 연속_  태그를 나타냅니다. 걱정하지 마십시오. Svelte가 HTML에 추가하는 거의 모든 구문을 이미 배웠습니다. diff --git a/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md b/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md index cd482d603..1be6023f6 100644 --- a/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md @@ -2,7 +2,7 @@ title: Else-if blocks --- -Multiple conditions can be 'chained' together with `else if`: +`else if`와 함께 여러 조건을 '연결'할 수 있습니다. ```svelte {#if x > 10} diff --git a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md index f277503ce..24ceed64f 100644 --- a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md @@ -2,7 +2,7 @@ title: Each blocks --- -If you need to loop over lists of data, use an `each` block: +데이터 목록을 반복해야 하는 경우 `each` 블록을 사용하세요. ```svelte
    @@ -14,9 +14,9 @@ If you need to loop over lists of data, use an `each` block:
``` -> The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`. +> 표현식 (이 경우 `cats`)은 배열 또는 배열과 유사한 객체 (즉 `length` 속성이 있음)가 될 수 있습니다. `each [...iterable]`을 사용하여 일반 이터러블을 반복할 수 있습니다. -You can get the current _index_ as a second argument, like so: +다음과 같이 현재 _색인_ 을 두 번째 인수로 가져올 수 있습니다. ```svelte {#each cats as cat, i} @@ -26,4 +26,4 @@ You can get the current _index_ as a second argument, like so: {/each} ``` -If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`. +원하는 경우, 분해(`each cats as { id, name }`)해서 사용하고 `cat.id` 및 `cat.name`을 `id` 및 `name`으로 바꿀 수 있습니다. diff --git a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md index d6c0aa3c2..96dc66c03 100644 --- a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md @@ -2,13 +2,13 @@ title: Keyed each blocks --- -By default, when you modify the value of an `each` block, it will add and remove items at the _end_ of the block, and update any values that have changed. That might not be what you want. +기본적으로 `each` 블록의 값을 수정하면 블록 _끝_ 에 항목이 추가 및 제거되고 변경된 모든 값이 업데이트됩니다. 그것은 당신이 원하는 것이 아닐 수도 있습니다. -It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice what happens: It removes the first `` component, but the _last_ DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji. +이유를 설명하는 것보다 보여주는 것이 더 쉽습니다. **Remove first thing** 버튼을 몇 번 클릭하면 어떤 일이 발생하는지 확인하십시오. 첫 번째 `` 컴포넌트가 제거되지만 _마지막_ DOM 노드도 제거됩니다. 그런 다음 나머지 DOM 노드에서 `name` 값을 업데이트(apple이 없어짐)하지만 이모티콘은 업데이트하지 않습니다(🥚가 없어짐). -Instead, we'd like to remove only the first `` component and its DOM node, and leave the others unaffected. +대신 첫 번째 `` 컴포넌트와 해당 DOM 노드만 제거하고 나머지는 그대로 두려고 합니다. -To do that, we specify a unique identifier (or "key") for the `each` block: +이를 위해 `each` 블록에 대한 고유 식별자(또는 "키")를 지정합니다. ```svelte {#each things as thing (thing.id)} @@ -16,6 +16,6 @@ To do that, we specify a unique identifier (or "key") for the `each` block: {/each} ``` -Here, `(thing.id)` is the _key_, which tells Svelte how to figure out which DOM node to change when the component updates. +여기서 `(thing.id)`는 _키_ 이며 컴포넌트가 업데이트될 때 변경할 DOM 노드를 파악하는 방법을 Svelte에 알려줍니다. -> You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server. +> Svelte는 내부적으로 `Map`을 사용하므로 모든 개체를 키로 사용할 수 있습니다. 즉, `(thing.id)` 대신 `(thing)`을 사용할 수 있습니다. 그러나 일반적으로 문자열이나 숫자를 사용하는 것이 더 안전합니다. 예를 들어 API 서버에서 최신 데이터로 업데이트할 때 ID가 참조 동등성 없이 지속됨을 의미하기 때문입니다. diff --git a/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md b/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md index f045882f4..f0a8fc86d 100644 --- a/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md @@ -2,7 +2,7 @@ title: Await blocks --- -Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to _await_ the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup: +대부분의 웹 애플리케이션은 어느 시점에서 비동기 데이터를 처리해야 합니다. Svelte를 사용하면 마크업에서 직접 [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)의 값을 쉽게 _기다릴(await)_ 수 있습니다. ```svelte {#await promise} @@ -14,9 +14,9 @@ Most web applications have to deal with asynchronous data at some point. Svelte {/await} ``` -> Only the most recent `promise` is considered, meaning you don't need to worry about race conditions. +> 가장 최근의 `promise`만 고려하므로 경쟁 조건에 대해 걱정할 필요가 없습니다. -If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves: +Promise가 거부될 수 없다는 것을 알고 있다면 `catch` 블록을 생략할 수 있습니다. Promise가 해결될 때까지 아무 것도 표시하지 않으려면 첫 번째 블록을 생략할 수도 있습니다. ```svelte {#await promise then number} diff --git a/content/tutorial/01-svelte/05-events/01-dom-events/README.md b/content/tutorial/01-svelte/05-events/01-dom-events/README.md index 64cfa3217..365f76ada 100644 --- a/content/tutorial/01-svelte/05-events/01-dom-events/README.md +++ b/content/tutorial/01-svelte/05-events/01-dom-events/README.md @@ -2,7 +2,7 @@ title: DOM events --- -As we've briefly seen already, you can listen to any event on an element with the `on:` directive: +이미 간략하게 살펴본 것처럼 `on:` 지시문(directive)을 사용하여 요소의 모든 이벤트를 수신할 수 있습니다. ```svelte
diff --git a/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md b/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md index 40585909f..501691e71 100644 --- a/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md +++ b/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md @@ -2,7 +2,7 @@ title: Inline handlers --- -You can also declare event handlers inline: +이벤트 핸들러를 인라인으로 선언할 수도 있습니다. ```svelte
@@ -10,6 +10,6 @@ You can also declare event handlers inline:
``` -The quote marks are optional, but they're helpful for syntax highlighting in some environments. +따옴표는 선택 사항이지만 일부 환경에서 구문 강조 표시에 유용합니다. -> In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose. +> 일부 프레임워크에서는 특히 루프 내부에서 성능상의 이유로 인라인 이벤트 핸들러를 사용하지 않는 것이 좋습니다. 이 조언은 Svelte에는 적용되지 않습니다. 어떤 형식을 선택하든 컴파일러는 항상 올바른 작업을 수행합니다. diff --git a/content/tutorial/01-svelte/05-events/03-event-modifiers/README.md b/content/tutorial/01-svelte/05-events/03-event-modifiers/README.md index 71954b2fc..0e60e9b3f 100644 --- a/content/tutorial/01-svelte/05-events/03-event-modifiers/README.md +++ b/content/tutorial/01-svelte/05-events/03-event-modifiers/README.md @@ -2,7 +2,7 @@ title: Event modifiers --- -DOM event handlers can have _modifiers_ that alter their behaviour. For example, a handler with a `once` modifier will only run a single time: +DOM 이벤트 핸들러는 동작을 변경하는 _모디파이어_ 를 가질 수 있습니다. 예를 들어 `once` 모디파이어가 있는 핸들러는 한 번만 실행됩니다. ```svelte ``` -> `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance. +> 컴포넌트가 처음 인스턴스화될 때 `createEventDispatcher`를 호출해야 합니다. — 내부에서 (예를들면 `setTimeout` 콜백) 나중에 할 수 없습니다. 이것은 `dispatch`를 컴포넌트 인스턴스에 연결합니다. -Notice that the `App` component is listening to the messages dispatched by `Inner` component thanks to the `on:message` directive. This directive is an attribute prefixed with `on:` followed by the event name that we are dispatching (in this case, `message`). +`App` 컴포넌트는 `on:message` 지시문 덕분에 `Inner` 컴포넌트가 보낸 메시지를 수신하고 있습니다. 이 지시문은 `on:` 접두사가 붙은 속성이며 그 뒤에 우리가 발송하는 이벤트 이름(이 경우 `message`)이 옵니다. -Without this attribute, messages would still be dispatched, but the App would not react to it. You can try removing the `on:message` attribute and pressing the button again. +이 속성이 없으면 메시지는 계속 발송되지만 앱은 이에 반응하지 않습니다. `on:message` 속성을 제거하고 버튼을 다시 눌러 볼 수 있습니다. -> You can also try changing the event name to something else. For instance, change `dispatch('message')` to `dispatch('myevent')` in `Inner.svelte` and change the attribute name from `on:message` to `on:myevent` in the `App.svelte` component. +> 이벤트 이름을 다른 것으로 변경할 수도 있습니다. 예를 들어 `Inner.svelte`에서 `dispatch('message')`를 `dispatch('myevent')`로 변경하고 `App.svelte` 컴포넌트에서 속성 이름을 `on:message`에서 `on:myevent`로 변경합니다. diff --git a/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md b/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md index 3daff332a..fb064907e 100644 --- a/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md +++ b/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md @@ -2,11 +2,11 @@ title: Event forwarding --- -Unlike DOM events, component events don't _bubble_. If you want to listen to an event on some deeply nested component, the intermediate components must _forward_ the event. +DOM 이벤트와 달리 컴포넌트 이벤트는 _버블링_ 되지 않습니다. 깊이 중첩된 일부 컴포넌트에서 이벤트를 수신하려면 중간 컴포넌트가 이벤트를 _전달_ 해야 합니다. -In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains ``. +이 경우 [이전 장](/tutorial/component-events)과 동일한 `App.svelte` 및 `Inner.svelte`가 있지만 이제 ``를 포함하는 `Outer.svelte` 구성 요소가 있습니다. -One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it: +이 문제를 해결할 수 있는 한 가지 방법은 `outer.svelte`에 `createEventDispatcher`를 추가하고 `message` 이벤트를 수신하고 이에 대한 핸들러를 만드는 것입니다. ```svelte ``` -> It's recommended to put the `fetch` in `onMount` rather than at the top level of the ` ``` -While it's important to call lifecycle functions during the component's initialisation, it doesn't matter _where_ you call them from. So if we wanted, we could abstract the interval logic into a helper function in `utils.js`... +컴포넌트를 초기화하는 동안 수명 주기 함수를 호출하는 것이 중요하지만 호출 위치는 중요하지 않습니다. 그래서 원한다면 `utils.js`의 헬퍼 함수로 인터벌 논리를 추상화할 수 있습니다... ```js import { onDestroy } from 'svelte'; @@ -31,7 +32,7 @@ export function onInterval(callback, milliseconds) { } ``` -...and import it into our component: +...컴포넌트로 가져옵니다: ```svelte ``` -Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example. +타이머를 몇 번 열고 닫고 카운터가 계속 작동하고 CPU 부하가 증가하는지 확인합니다. 이것은 이전 타이머가 삭제되지 않아서 생기는 메모리 누수 때문입니다. 예제를 풀기 전에 페이지를 새로 고치는 것을 잊지 마십시오. diff --git a/content/tutorial/01-svelte/07-lifecycle/03-update/README.md b/content/tutorial/01-svelte/07-lifecycle/03-update/README.md index 3c791245b..fa01fffa7 100644 --- a/content/tutorial/01-svelte/07-lifecycle/03-update/README.md +++ b/content/tutorial/01-svelte/07-lifecycle/03-update/README.md @@ -2,11 +2,11 @@ title: beforeUpdate and afterUpdate --- -The `beforeUpdate` function schedules work to happen immediately before the DOM is updated. `afterUpdate` is its counterpart, used for running code once the DOM is in sync with your data. +`beforeUpdate` 함수는 DOM이 업데이트되기 직전에 작업이 수행되도록 예약합니다. `afterUpdate`는 그에 상응하는것으로, DOM이 데이터와 동기화되면 코드를 실행하는 데 사용됩니다. -Together, they're useful for doing things imperatively that are difficult to achieve in a purely state-driven way, like updating the scroll position of an element. +함께 사용하면 요소의 스크롤 위치 업데이트와 같이 순전히 상태 기반 방식으로 달성하기 어려운 작업을 명령적으로 수행하는 데 유용합니다. -This [Eliza](https://en.wikipedia.org/wiki/ELIZA) chatbot is annoying to use, because you have to keep scrolling the chat window. Let's fix that. +이 [Eliza](https://en.wikipedia.org/wiki/ELIZA) 챗봇은 채팅창을 계속 스크롤해야 하기 때문에 사용하기 불편합니다. 문제를 해결해 보겠습니다. ```js let div; @@ -21,4 +21,4 @@ afterUpdate(() => { }); ``` -Note that `beforeUpdate` will first run before the component has mounted, so we need to check for the existence of `div` before reading its properties. +`beforeUpdate`는 컴포넌트가 마운트되기 전에 먼저 실행되므로 해당 속성을 읽기 전에 `div`의 존재를 확인해야 합니다. diff --git a/content/tutorial/01-svelte/07-lifecycle/04-tick/README.md b/content/tutorial/01-svelte/07-lifecycle/04-tick/README.md index a45724734..d6b143b8e 100644 --- a/content/tutorial/01-svelte/07-lifecycle/04-tick/README.md +++ b/content/tutorial/01-svelte/07-lifecycle/04-tick/README.md @@ -2,20 +2,22 @@ title: tick --- -The `tick` function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes). +`tick` 함수는 컴포넌트가 처음 초기화될 때뿐만 아니라 언제든지 호출할 수 있다는 점에서 다른 수명 주기 함수와 다릅니다. 보류 중인 상태 변경이 DOM에 적용되는 즉시 (또는 보류 중인 상태 변경이 없는 경우 즉시) 해결되는 약속을 반환합니다. -When you update component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next _microtask_ to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively. +Svelte에서 컴포넌트 상태를 업데이트하면 DOM이 즉시 업데이트되지 않습니다. 대신 다른 컴포넌트를 포함하여 적용해야 하는 다른 변경 사항이 있는지 확인하기 위해 다음 _마이크로 작업_ 까지 기다립니다. 그렇게 하면 불필요한 작업을 피하고 브라우저가 작업을 보다 효과적으로 일괄 처리할 수 있습니다. -You can see that behaviour in this example. Select a range of text and hit the tab key. Because the `