(번역/의역) 더 적은 코드로

Svelte 에 대해서 알아보도록 하기 위해 공식 문서를 번역해보도록 했다.
(잘할 수 있을런지 모르겠다.. 오역은 따끔하게 알려주세요)

Write less code

All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be. Writing more code also takes more time, leaving less time for other things like optimisation, nice-to-have features, or being outdoors instead of hunched over a laptop.

In fact it's widely acknowledged that project development time and bug countgrow quadratically, not linearly, with the size of a codebase. That tracks with our intuitions: a ten-line pull request will get a level of scrutiny rarely applied to a 100-line one. And once a given module becomes too big to fit on a single screen, the cognitive effort required to understand it increases significantly. We compensate by refactoring and adding comments — activities that almost always result in morecode. It's a vicious cycle.

Yet while we obsess — rightly! — over performance numbers, bundle size and anything else we can measure, we rarely pay attention to the amount of code we're writing.

모든 코드는 버그가 있습니다. 따라서 코드가 많아 진다는 것은 더 큰 버그를 지닌 앱을 만드는 것이죠. 그리고 그건 더 많은 시간이 든다는 것이고 이렇게 되면 최적화, 좋은 기능/구조 등 다른것에 쏟을 시간이 줄어든다는 것을 의미하죠.

실제로 프로젝트 개발 시간과 버그의 수는 코드베이스의 크기에 따라 선형이 아닌 2차원적으로 증가한다는 사실은 널리 알려져 있습니다. 그것은 우리의 직관에 따라 추적됩니다. 10줄의 풀리퀘스트는 100줄의 풀리퀘스트에 비할바가 안되는 조사수준를 받게됩니다 (훨씬 시간이 적게 든다는 의미). 그리고 주어진 모듈이 하나의 화면에 들어가기에 너무 커지면 그것을 이해하는 데 들어가는 노력이 크게 증가합니다. 리팩토링 및 주석 추가가 이따르구요.
그렇기 때문에 항상 더 많은 코드를 생성하는 활동입니다. 악순환이죠.

맞아요, 우리가 코드에 집착하는 동안 성능지표나 번들 사이즈 및 우리가 측정할 수 다른 것들에 주의를 기울이지 못합니다.
코드를 작성하는 거에 비해서...

Readability is important (가독성은 중요합니다)

I'm certainly not claiming that we should use clever tricks to scrunch our code into the most compact form possible at the expense of readability. Nor am I claiming that reducing lines of code is necessarily a worthwhile goal, since it encourages turning readable code like this...

나는 우리가 가독성을 희생하면서까지 최대한 간결한 형태로 코드를 작성하기 위해 트릭을 사용해야한다고 주장하지 않아요.
나는 코드 줄을 줄이는 것이 반드시 가치있는 목표라고 주장하지 않습니다.

Code
for (let i = 0; i <= 100; i += 1) {
  if (i % 2 === 0) {
    console.log(`${i} is even`);
  }
}

...into something much harder to parse:

상기의 것을 더 어려운 형태로 바꾸면 :

Code
for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`);

stead, I'm claiming that we should favour languages and patterns that allow us to naturally write less code.

대신 자연스럽게 적은 코드를 작성할 수있는 언어와 패턴을 선호해야한다고 주장합니다.

Yes, I'm talking about Svelte (네, Svelte 요)

Reducing the amount of code you have to write is an explicit goal of Svelte. To illustrate, let's look at a very simple component implemented in React, Vue and Svelte. First, the Svelte version:

작성해야하는 코드의 양을 줄이는 것이 Svelte 의 명백한 목표입니다.
설명을 위해 React, Vue 및 Svelte에서 구현 된 매우 간단한 구성 요소를 살펴 보겠습니다.

첫째, Svelte 버전

Code
<script>
	let a = 1;
	let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

How would we build this in React? It would probably look something like this:

둘째, React 버전

Code
import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

Here's an equivalent component in Vue:

셋째, Vue 버전

Code
<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

    <p>{{a}} + {{b}} = {{a + b}}</p>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>

In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger!

It's unusual for the difference to be quite so obvious — in my experience, a React component is typically around 40% larger than its Svelte equivalent. Let's look at the features of Svelte's design that enable you to express ideas more concisely:

React 에선 442 자, Vue 에서는 263자인 반면에 Svelte 에선 145 자. React 가 약 3배나 커요!
이렇게 차이가 명확히 드러나는 것은 드문일이긴 합니다. 경험상 React 가 보통 40% 정도 많죠.
그럼 간결하게 표현 가능한 Svelte 의 디자인 특징을 살펴보겠습니다.

Top-level elements (최상위 요소)

In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — <> — instead of a

, but it's the same basic idea, and still results in an extra level of indentation).

In Vue, your markup must be wrapped in a