first korean translation

Author: jakekwak

.npmrc

@@ -1 +1,3 @@
-engine-strict=true
+link-workspace-packages = true
+shamefully-hoist = true
+engine-strict = true

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/)).

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.
+막히면 편집기 왼쪽에 있는 `해결` 버튼을 클릭할 수 있습니다. (연습이 포함되지 않은 이와 같은 섹션에서는 비활성화되어 있습니다.) 너무 많이 의존하지 마십시오. 제안된 각 코드 블록을 넣을 위치를 파악하고 편집기에 수동으로 입력하면 더 빨리 배울 수 있습니다.

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
 +++<script>
@@ -18,13 +18,13 @@ First, add a script tag to your component and declare a `name` variable:
 <h1>Hello world!</h1>
 ```
 
-Then, we can refer to `name` in the markup:
+그런 다음 마크업에서 `name`을 참조할 수 있습니다.
 
 ```svelte
 <h1>Hello +++{name}+++!</h1>
 ```
 
-Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting.
+중괄호 안에 원하는 JavaScript를 넣을 수 있습니다. 더 큰 소리로 인사하려면 `name`을 `name.toUpperCase()`로 변경해 보세요.
 
 ```svelte
 <h1>Hello {name+++.toUpperCase()+++}!</h1>

content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md

@@ -2,31 +2,31 @@
 title: Dynamic attributes
 ---
 
-Just like you can use curly braces to control text, you can use them to control element attributes.
+중괄호를 사용하여 텍스트를 제어할 수 있는 것처럼 요소 특성을 제어하는 데 사용할 수 있습니다.
 
-Our image is missing a `src` — let's add one:
+이미지에 `src`가 없습니다. 하나를 추가해 보겠습니다.
 
 ```svelte
 <img +++src={src}+++ />
 ```
 
-That's better. But Svelte is giving us a warning:
+그게 더 좋습니다. 그러나 Svelte는 다음과 같이 경고합니다.
 
-> A11y: &lt;img&gt; element should have an alt attribute
+> A11y: &lt;img&gt; 요소에는 alt 속성이 있어야 합니다.
 
-When building web apps, it's important to make sure that they're _accessible_ to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup.
+웹 앱을 구축할 때 예를 들어 시력이나 동작 장애가 있는 사람 또는 강력한 하드웨어나 양호한 인터넷 연결이 없는 사람을 포함하여 가능한 가장 광범위한 사용자 기반에 _액세스할_ 수 있는지 확인하는 것이 중요합니다. 접근성(a11y로 줄임)이 항상 올바른 것은 아니지만 접근할 수 없는 마크업을 작성하면 Svelte가 경고하여 도움을 줍니다.
 
-In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
+이 경우 스크린 리더를 사용하는 사람이나 이미지를 다운로드할 수 없는 인터넷 연결이 느리거나 불안정한 사람을 위해 이미지를 설명하는 'alt' 속성이 누락되었습니다. 하나를 추가해 보겠습니다.
 
 ```svelte
 <img src={src} +++alt="A man dances."+++ />
 ```
 
-We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block.
+속성 _안에_ 중괄호를 사용할 수 있습니다. `"{name} dances"`로 변경해 보세요. `<script>` 블록에서 `name` 변수를 선언해야 합니다.
 
 ## Shorthand attributes
 
-It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
+`src={src}`와 같이 이름과 값이 동일한 속성을 갖는 것은 드문 일이 아닙니다. Svelte는 다음과 같은 경우에 편리한 축약형을 제공합니다.
 
 ```svelte
 <img +++{src}+++ alt="A man dances." />

content/tutorial/01-svelte/01-introduction/04-styling/README.md

@@ -2,7 +2,7 @@
 title: Styling
 ---
 
-Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
+HTML에서와 마찬가지로 컴포넌트에 `<style>` 태그를 추가할 수 있습니다. `<p>` 요소에 몇 가지 스타일을 추가해 보겠습니다.
 
 ```svelte
 <p>This is a paragraph.</p>
@@ -16,4 +16,4 @@ Just like in HTML, you can add a `<style>` tag to your component. Let's add some
 </style>
 ```
 
-Importantly, these rules are _scoped to the component_. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.
+중요한 것은 이러한 규칙의 _범위가 컴포넌트로_ 지정된다는 것입니다. 다음 단계에서 볼 수 있듯이 앱의 다른 위치에서 `<p>` 요소의 스타일을 실수로 변경하지 않습니다.

content/tutorial/01-svelte/01-introduction/05-nested-components/README.md

@@ -2,23 +2,23 @@
 title: Nested components
 ---
 
-It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them in our markup.
+전체 앱을 단일 컴포넌트에 넣는 것은 비실용적입니다. 대신 다른 파일에서 컴포넌트를 가져와 마크업에 포함할 수 있습니다.
 
-Add a `<script>` tag that imports `Nested.svelte`...
+`Nested.svelte`를 가져오는 `<script>` 태그를 추가합니다....
 
 ```svelte
 +++<script>
 	import Nested from './Nested.svelte';
 </script>+++
 ```
 
-...and include a `<Nested />` component:
+...`<Nested />` 컴포넌트를 넣어봅니다..
 
 ```svelte
 <p>This is a paragraph.</p>
 +++<Nested />+++
 ```
 
-Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.
+`Nested.svelte`에 `<p>` 요소가 있더라도 `App.svelte`의 스타일이 누출되지 않는다는 점에 유의하세요.
 
-> Component names are always capitalised, to distinguish them from HTML elements.
+> 컴포넌트 이름은 HTML 요소와 구별하기 위해 항상 대문자로 표시됩니다.

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
 <p>{+++@html+++ string}</p>
 ```
 
-> 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 공격에 노출될 위험이 있습니다.

content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md

@@ -2,20 +2,20 @@
 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
 <button +++on:click={increment}+++>
 ```
 
-Inside the `increment` function, all we need to do is change the value of `count`:
+`increment` 함수 내에서 `count` 값을 변경하기만 하면 됩니다.
 
 ```js
 function increment() {
 	+++count += 1;+++
 }
 ```
 
-Svelte 'instruments' this assignment with some code that tells it the DOM will need to be updated.
+Svelte는 DOM을 업데이트해야 한다고 알려주는 일부 코드를 사용하여, 이 할당을 '계측'합니다.

content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md

@@ -2,23 +2,23 @@
 title: Declarations
 ---
 
-Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from _other_ parts (such as a `fullname` derived from a `firstname` and a `lastname`), and recomputed whenever they change.
+Svelte는 컴포넌트의 상태가 변경되면 자동으로 DOM을 업데이트합니다. 종종 컴포넌트 상태의 일부는 _다른_  부분 (예: `이름` 및 `성`에서 파생된 `전체 이름`)에서 계산하고 변경될 때마다 다시 계산해야 합니다.
 
-For these, we have _reactive declarations_. They look like this:
+이를 위해 우리는 _반응적 선언_ 을 가지고 있습니다. 그들은 다음과 같이 보입니다 :
 
 ```js
 let count = 0;
 +++$: doubled = count * 2;+++
 ```
 
-> Don't worry if this looks a little alien. It's [valid](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'. Once you get used to it, there's no going back.
+> 이것이 약간 외계인처럼 보이더라도 걱정하지 마십시오. Svelte는 '참조된 값이 변경될 때마다 이 코드를 다시 실행'하는 의미로 해석하는 [유효한](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label)(전통적이지 않은 경우) JavaScript입니다. 익숙해지면 되돌릴 수 없습니다.
 
-Let's use `doubled` in our markup:
+마크업에서 `doubled`를 사용합시다:
 
 ```svelte
 <button>...</button>
 
 +++<p>{count} doubled is {doubled}</p>+++
 ```
 
-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}`를 작성할 수 있습니다. 반응형 값을 사용할 필요가 없습니다. 반응형 값은 여러 번 참조해야 하거나 _다른_ &nbsp;반응형 값에 의존하는 값이 있을 때 특히 유용합니다(말장난이 아님).

content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md

@@ -2,15 +2,15 @@
 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;
 
 +++$: 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)+++ {

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,29 +13,31 @@ function addNumber() {
 }
 ```
 
-But there's a more idiomatic solution:
+그러나 더 관용적인 해결책이 있습니다.
 
 ```js
 function addNumber() {
 	numbers = +++[...numbers, numbers.length + 1];+++
 }
 ```
 
-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() {
 	numbers[numbers.length] = numbers.length + 1;
 }
 ```
 
-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`에서 반응성을 트리거하지 않습니다.