From daa3f6666906b637ce7fcf2692e833d0e8b7ba4d Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 7 Dec 2021 21:11:39 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=EB=94=B0=EC=98=B4=ED=91=9C?= =?UTF-8?q?=EB=A1=9C=20=EB=AC=B8=EC=9E=90=EC=97=B4=20=EC=A0=84=EB=8B=AC?= =?UTF-8?q?=ED=95=98=EA=B8=B0=EA=B9=8C=EC=A7=80=20=ED=95=9C=EA=B5=AD?= =?UTF-8?q?=EC=96=B4=20=EB=B2=88=EC=97=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript-in-jsx-with-curly-braces.md | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index 6572c23fa..09b9c701e 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -1,25 +1,25 @@ --- -title: JavaScript in JSX with Curly Braces +title: JavaScript에서의 중괄호가 있는 JSX --- -JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript. +JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 논리와 콘텐츠를 같은 곳에 위치할 수 있습니다. 때로는 JavaScript 논리를 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다. 이 상황에서 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다. -* How to pass strings with quotes -* How to reference a JavaScript variable inside JSX with curly braces -* How to call a JavaScript function inside JSX with curly braces -* How to use a JavaScript object inside JSX with curly braces +* 따옴표로 문자열을 전달하는 방법 +* 중괄호가 있는 JSX 내부에서 Javascript의 변수를 참조하는 방법 +* 중괄호가 있는 JSX 내부에서 Javassript의 함수를 호출하는 방법 +* 중괄호가 있는 JSX 내부에서 Javascript의 객체를 사용하는 방법 -## Passing strings with quotes {/*passing-strings-with-quotes*/} +## 따옴표로 문자열 전달하기 {/*passing-strings-with-quotes*/} -When you want to pass a string attribute to JSX, you put it in single or double quotes: +문자열 어트리뷰트를 JSX에 전달하려면 작은따옴표나 큰따옴표로 묶어야 합니다. @@ -41,9 +41,9 @@ export default function Avatar() { -Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +여기에서는 `"https://i.imgur.com/7vQD0fPs.jpg"`와 `"Gregorio Y. Zara"`가 문자열로 전달되고 있습니다. -But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**: +그러나 `src` 또는 `alt` 텍스트를 동적으로 지정하려면 어떻게 해야 할까요? **`"`와 `"`를 `{`와 `}`로 바꿔 Javascript의 값을 사용할 수 있습니다**. @@ -67,11 +67,11 @@ export default function Avatar() { -Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup! +이미지를 둥글게 만드는 `"avatar"` CSS 클래스 이름을 지정하는 `className="avatar"`와 `avatar`라는 JavaScript 변수의 값을 읽는 `src={avatar}`의 차이점에 주목해야 합니다. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있기 때문입니다! ## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/} -JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `

`: +JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `

` @@ -88,7 +88,7 @@ export default function TodoList() { Try changing `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the To Do List title changes? -Any JavaScript expression will work between curly braces, including function calls like `formatDate()`: +Any JavaScript expression will work between curly braces, including function calls like `formatDate()` @@ -113,7 +113,7 @@ export default function TodoList() { ### Where to use curly braces {/*where-to-use-curly-braces*/} -You can only use curly braces in two ways inside JSX: +You can only use curly braces in two ways inside JSX 1. **As text** directly inside a JSX tag: `

{name}'s To Do List

` works, but `<{tag}>Gregorio Y. Zara's To Do List` will not. 2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `{avatar}`. @@ -122,7 +122,7 @@ You can only use curly braces in two ways inside JSX: In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. -You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute: +You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute @@ -150,7 +150,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; } Try changing the values of `backgroundColor` and `color`. -You can really see the JavaScript object inside the curly braces when you write it like this: +You can really see the JavaScript object inside the curly braces when you write it like this ```js {2-5}
    @@ -211,7 +211,7 @@ body > div > div { padding: 20px; } -In this example, the `person` JavaScript object contains a `name` string and a `theme` object: +In this example, the `person` JavaScript object contains a `name` string and a `theme` object ```js const person = { @@ -223,7 +223,7 @@ const person = { }; ``` -The component can use these values from `person` like so: +The component can use these values from `person` like so ```js
    @@ -234,7 +234,7 @@ JSX is very minimal as a templating language because it lets you organize data a -Now you know almost everything about JSX: +Now you know almost everything about JSX * JSX attributes inside quotes are passed as strings. * Curly braces let you bring JavaScript logic and variables into your markup. @@ -247,7 +247,7 @@ Now you know almost everything about JSX: ### Fix the mistake {/*fix-the-mistake*/} -This code crashes with an error saying `Objects are not valid as a React child`: +This code crashes with an error saying `Objects are not valid as a React child` @@ -295,7 +295,7 @@ Can you find the problem? This is happening because this example renders *an object itself* into the markup rather than a string: `

    {person}'s Todos

    ` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them. -To fix it, replace `

    {person}'s Todos

    ` with `

    {person.name}'s Todos

    `: +To fix it, replace `

    {person}'s Todos

    ` with `

    {person.name}'s Todos

    ` @@ -381,7 +381,7 @@ body > div > div { padding: 20px; } -Move the image URL into a property called `person.imageUrl` and read it from the `` tag using the curlies: +Move the image URL into a property called `person.imageUrl` and read it from the `` tag using the curlies @@ -525,7 +525,7 @@ body > div > div { padding: 20px; } -You can also move this expression into a separate function like `getImageUrl` below: +You can also move this expression into a separate function like `getImageUrl` below From 88a6f25d51ffb8c810f8a1048f845492df74cbc3 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 7 Dec 2021 21:31:20 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20Javascript=EC=9D=98=20=EC=84=B8?= =?UTF-8?q?=EA=B3=84=EB=A1=9C=20=EA=B0=80=EB=8A=94=20=EC=B0=BD=20=EC=84=B9?= =?UTF-8?q?=EC=85=98=20kr=20=EB=B2=88=EC=97=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript-in-jsx-with-curly-braces.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index 09b9c701e..d0288ec2f 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -4,16 +4,16 @@ title: JavaScript에서의 중괄호가 있는 JSX -JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 논리와 콘텐츠를 같은 곳에 위치할 수 있습니다. 때로는 JavaScript 논리를 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다. 이 상황에서 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다. +JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 논리와 콘텐츠를 같은 곳에 있을 수 있습니다. 때로는 JavaScript 논리를 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다. 이 상황에서 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다. * 따옴표로 문자열을 전달하는 방법 -* 중괄호가 있는 JSX 내부에서 Javascript의 변수를 참조하는 방법 -* 중괄호가 있는 JSX 내부에서 Javassript의 함수를 호출하는 방법 -* 중괄호가 있는 JSX 내부에서 Javascript의 객체를 사용하는 방법 +* 중괄호가 있는 JSX 안에서 Javascript의 변수를 참조하는 방법 +* 중괄호가 있는 JSX 안에서 Javascript의 함수를 호출하는 방법 +* 중괄호가 있는 JSX 안에서 Javascript의 객체를 사용하는 방법 @@ -43,7 +43,7 @@ export default function Avatar() { 여기에서는 `"https://i.imgur.com/7vQD0fPs.jpg"`와 `"Gregorio Y. Zara"`가 문자열로 전달되고 있습니다. -그러나 `src` 또는 `alt` 텍스트를 동적으로 지정하려면 어떻게 해야 할까요? **`"`와 `"`를 `{`와 `}`로 바꿔 Javascript의 값을 사용할 수 있습니다**. +그러나 `src` 또는 `alt` 텍스트를 동적으로 지정하려면 어떻게 해야 할까요? **`"`와`"`를 `{`와`}`로 바꿔 Javascript의 값을 사용할 수 있습니다**. @@ -67,11 +67,11 @@ export default function Avatar() { -이미지를 둥글게 만드는 `"avatar"` CSS 클래스 이름을 지정하는 `className="avatar"`와 `avatar`라는 JavaScript 변수의 값을 읽는 `src={avatar}`의 차이점에 주목해야 합니다. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있기 때문입니다! +이미지를 둥글게 만드는 `"avatar"` CSS 클래스 이름을 지정하는 `className="avatar"`와 `avatar`라는 JavaScript 변수의 값을 읽는 `src={avatar}`의 차이점에 주목해야 합니다. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있기 때문입니다. -## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/} +## 중괄호 사용하기: Javascript 세계로 가는 창 {/*using-curly-braces-a-window-into-the-javascript-world*/} -JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `

    ` +JSX는 JavaScript를 작성하는 특별한 방법입니다. 중괄호 `{ }`와 함께 안에서 JavaScript를 사용할 수 있습니다. 아래 예시는 이름 `name`을 선언한 다음 `

    ` 내부에 중괄호로 포함합니다. @@ -86,9 +86,9 @@ export default function TodoList() { -Try changing `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the To Do List title changes? +`name` 값을 `'Gregorio Y. Zara'`에서 `'Hedy Lamarr'`로 변경해 To Do List 제목이 어떻게 변경되는지 확인해봅시다. -Any JavaScript expression will work between curly braces, including function calls like `formatDate()` +`formatDate()`와 같은 함수 호출을 포함해 모든 JavaScript 표현식은 중괄호 사이에서 작동합니다. From 2cd97c5cb4243875f4022586c7a8780ac943b3ff Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 7 Dec 2021 21:52:41 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=EC=A4=91=EA=B4=84=ED=98=B8?= =?UTF-8?q?=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8A=94=20=EA=B3=B3,?= =?UTF-8?q?=20=EC=9D=B4=EC=A4=91=20=EC=A4=91=EA=B4=84=ED=98=B8=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EA=B8=B0=20=EC=84=B9=EC=85=98=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript-in-jsx-with-curly-braces.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index d0288ec2f..64816530b 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -111,18 +111,18 @@ export default function TodoList() { -### Where to use curly braces {/*where-to-use-curly-braces*/} +### 중괄호를 사용하는 곳 {/*where-to-use-curly-braces*/} -You can only use curly braces in two ways inside JSX +JSX 안에서 중괄호는 두 가지 방법으로만 사용할 수 있습니다. -1. **As text** directly inside a JSX tag: `

    {name}'s To Do List

    ` works, but `<{tag}>Gregorio Y. Zara's To Do List` will not. -2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `{avatar}`. +1. JSX 태그 안의 **문자**로: `

    {name}의 To Do List

    `는 작동하지만, `<{tag}>Gregorio Y. Zara의 To Do List` 작동하지 않습니다. +2. `=` 바로 뒤에 오는 **어트리뷰트**로: `src={avatar}`는 `avatar` 변수를 읽지만 `src="{avatar}"`는 `{avatar}` 문자열을 전달합니다. -## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} +## "이중 중괄호 사용하기": JSX의 CSS와 다른 객체 {/*using-double-curlies-css-and-other-objects-in-jsx*/} -In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. +문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에 객체를 전달할 수도 있습니다. 객체는 또한 `{ name: "Hedy Lamarr", inventions: 5 }`와 같이 중괄호로 표시됩니다. 따라서 JSX에서 객체를 전달하려면 `person={{ name: "Hedy Lamarr", inventions: 5 }}`와 같이 다른 중괄호 쌍으로 객체를 감싸야 합니다. -You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute +JSX의 인라인 CSS 스타일에서도 볼 수 있습니다. React는 인라인 스타일을 사용하도록 요구하지 않습니다(CSS 클래스는 대부분 잘 작동합니다). 그러나 인라인 스타일이 필요할 때 `style` 속성에 객체를 전달해야 합니다. @@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; } -Try changing the values of `backgroundColor` and `color`. +`backgroundColor`와 `color` 값을 변경해 보세요. -You can really see the JavaScript object inside the curly braces when you write it like this +아래와 같이 작성할 때 중괄호 안에 JavaScript 객체를 볼 수 있습니다. ```js {2-5}
      ``` -The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies! +JSX에서 `{{` 와 `}}`를 본다면 JSX 중괄호 안의 객체에 불과하다는 것을 알아야 합니다. -Inline `style` properties are written in camelCase. For example, HTML `
        would be written as `
          ` in your component. +인라인 스타일 프로퍼티는 캐멀 케이스로 작성됩니다. 예를 들어 HTML에서의 `
            `은 컴포넌트에서 `
              `로 작성됩니다. From 1501094fdd1dc9a69b074ef894e5cb9ce6459c84 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 7 Dec 2021 22:01:29 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20Javascript=20=EA=B0=9D=EC=B2=B4?= =?UTF-8?q?=EC=99=80=20=EC=A4=91=EA=B4=84=ED=98=B8=EB=A1=9C=20=EB=8D=94=20?= =?UTF-8?q?=EC=9E=AC=EB=AF=B8=EC=9E=88=EA=B2=8C=20=EC=84=B9=EC=85=98=20?= =?UTF-8?q?=EB=B2=88=EC=97=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript-in-jsx-with-curly-braces.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index 64816530b..aacb9bfa4 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -161,7 +161,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; } }> ``` -JSX에서 `{{` 와 `}}`를 본다면 JSX 중괄호 안의 객체에 불과하다는 것을 알아야 합니다. +JSX에서 `{{` 와 `}}` 를 본다면 JSX 중괄호 안의 객체에 불과하다는 것을 알아야 합니다. @@ -169,9 +169,9 @@ JSX에서 `{{` 와 `}}`를 본다면 JSX 중괄호 안의 객체에 불과하다 -## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/} +## Javascript 객체와 중괄호로 더 재미있게 {/*more-fun-with-javascript-objects-and-curly-braces*/} -You can move several expressions into one object, and reference them in your JSX inside curly braces +여러 표현식을 하나의 객체로 옮기고 중괄호 안의 JSX에서 참조할 수 있습니다. @@ -211,7 +211,7 @@ body > div > div { padding: 20px; } -In this example, the `person` JavaScript object contains a `name` string and a `theme` object +이 예시에서 `person` 객체는 `name` 문자열과 `theme` 객체를 포함합니다. ```js const person = { @@ -223,23 +223,23 @@ const person = { }; ``` -The component can use these values from `person` like so +컴포넌트는 `person` 값을 아래와 같이 사용할 수 있습니다. ```js

              {person.name}'s Todos

              ``` -JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript. +JSX는 JavaScript를 사용하여 데이터와 논리를 구성할 수 있어 템플릿 언어로서 매우 작습니다. -Now you know almost everything about JSX +이제 JSX에 대한 거의 모든 것을 알게 되었습니다. -* JSX attributes inside quotes are passed as strings. -* Curly braces let you bring JavaScript logic and variables into your markup. -* They work inside the JSX tag content or immediately after `=` in attributes. -* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces. +* 따옴표 안의 JSX 어트리뷰트는 문자열로 전달됩니다. +* 중괄호를 사용하면 JavaScript 논리와 변수를 마크업으로 가져올 수 있습니다. +* JSX 태그 내부 또는 어트리뷰트의 `=` 뒤에서 작동합니다. +* `{{` 및 `}}` 는 특별한 문법이 아닙니다. JSX 중괄호 안에 들어 있는 JavaScript 객체입니다. From 40f3d93b6d1c82229a09d4e8c30496811e711fa6 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 7 Dec 2021 22:08:37 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=EC=8B=A4=EC=88=98=20=EA=B3=A0?= =?UTF-8?q?=EC=B9=98=EA=B8=B0=20=EC=84=B9=EC=85=98=20=EB=B2=88=EC=97=AD=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learn/javascript-in-jsx-with-curly-braces.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index aacb9bfa4..bb3777408 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -245,9 +245,9 @@ JSX는 JavaScript를 사용하여 데이터와 논리를 구성할 수 있어 -### Fix the mistake {/*fix-the-mistake*/} +### 실수 고치기 {/*fix-the-mistake*/} -This code crashes with an error saying `Objects are not valid as a React child` +아래 코드는 `Objects are not valid as a React child`라는 오류가 발생합니다. @@ -287,15 +287,15 @@ body > div > div { padding: 20px; } -Can you find the problem? +문제를 찾았나요? -Look for what's inside the curly braces. Are we putting the right thing there? +중괄호 안에 무엇이 있는지 찾아봅시다. 중괄호 안에 올바른 것을 넣고 있나요? -This is happening because this example renders *an object itself* into the markup rather than a string: `

              {person}'s Todos

              ` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them. +이것은 예시가 *객체 자체*를 문자열이 아닌 마크업으로 렌더링하기 때문에 발생합니다. `

              {person}'s Todos

              `는 `person` 객체 전체를 렌더링하려고 합니다. 원시 객체를 텍스트 콘텐츠로 포함하면 React가 어떻게 표시할지 모르기 때문에 오류가 발생합니다. -To fix it, replace `

              {person}'s Todos

              ` with `

              {person.name}'s Todos

              ` +문제를 해결하려면 `

              {person}'s Todos

              `를 `

              {person.name}'s Todos

              `로 바꾸어야 합니다. From eadc84195fe858947cef1852dc03d19bf22fe001 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 7 Dec 2021 22:20:34 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=EC=A0=95=EB=B3=B4=EB=A5=BC=20?= =?UTF-8?q?=EA=B0=9D=EC=B2=B4=EB=A1=9C=20=EC=B6=94=EC=B6=9C=ED=95=98?= =?UTF-8?q?=EA=B8=B0,=20JSX=20=EC=A4=91=EA=B4=84=ED=98=B8=20=EC=95=88?= =?UTF-8?q?=EC=97=90=20=ED=91=9C=ED=98=84=EC=8B=9D=20=EC=9E=91=EC=84=B1?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EC=84=B9=EC=85=98=20=EB=B2=88=EC=97=AD=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript-in-jsx-with-curly-braces.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index bb3777408..458fc74a1 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -337,9 +337,9 @@ body > div > div { padding: 20px; }               -### Extract information into an object {/*extract-information-into-an-object*/} +### 정보를 객체로 추출하기 {/*extract-information-into-an-object*/} -Extract the image URL into the `person` object. +이미지 URL을 `person` 객체로 추출해 봅시다. @@ -381,7 +381,7 @@ body > div > div { padding: 20px; } -Move the image URL into a property called `person.imageUrl` and read it from the `` tag using the curlies +이미지 URL을 `person.imageUrl`이라는 프로퍼티로 이동하고 중괄호를 사용하여 `` 태그에서 읽습니다. @@ -424,13 +424,13 @@ body > div > div { padding: 20px; } -### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/} +### JSX 중괄호 안에 표현식 작성하기 {/*write-an-expression-inside-jsx-curly-braces*/} -In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension. +아래 객체에서 전체 이미지 URL은 기본 URL, `imageId`, `imageSize` 및 파일 확장자 네 부분으로 나누어져 있습니다. -We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `` tag specifies its `src`. +이미지 URL은 기본 URL (항상 `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`) 및 파일 확장자 (항상 `'.jpg'`)와 같은 어트리뷰트를 결합합니다. 그러나 `` 태그가 `src`를 지정하는 방식에 문제가 있습니다. -Can you fix it? +어떻게 고칠 수 있을까요? @@ -474,15 +474,15 @@ body > div > div { padding: 20px; } -To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit. +수정 사항이 제대로 작동하는지 확인하려면 `imageSize` 값을 `'b'`로 변경해 보세요. 수정 후에 이미지의 크기가 조정되어야 합니다. -You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`. +`src={baseUrl + person.imageId + person.imageSize + '.jpg'}`같이 작성할 수 있습니다. -1. `{` opens the JavaScript expression -2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string -3. `}` closes the JavaScript expression +1. `{` 는 Javascript 표현식을 엽니다. +2. `baseUrl + person.imageId + person.imageSize + '.jpg'` 는 올바른 URL 문자열을 생성합니다. +3. `}` 는 Javascript 표현식을 닫습니다. @@ -525,7 +525,7 @@ body > div > div { padding: 20px; } -You can also move this expression into a separate function like `getImageUrl` below +이 표현식을 아래의 `getImageUrl`과 같은 별도의 함수로 옮길 수도 있습니다. @@ -580,7 +580,7 @@ body > div > div { padding: 20px; } -Variables and functions can help you keep the markup simple! +변수와 함수는 마크업을 단순하게 유지하는 데 도움이 될 수 있습니다! From f6d5ade38aba140a4af21a7df2afe77393303a5f Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 7 Dec 2021 22:26:01 +0900 Subject: [PATCH 07/10] =?UTF-8?q?fix:=20sidebarLearn.json=EC=9D=98=20?= =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8B=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- beta/src/sidebarLearn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json index 25463d85c..53fd5083e 100644 --- a/beta/src/sidebarLearn.json +++ b/beta/src/sidebarLearn.json @@ -55,7 +55,7 @@ "path": "/learn/writing-markup-with-jsx" }, { - "title": "JavaScript in JSX with Curly Braces", + "title": "JavaScript에서의 중괄호가 있는 JSX", "path": "/learn/javascript-in-jsx-with-curly-braces" }, { From 5b49c0ac85923aa5783c9e3caa07a715012c31fe Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Thu, 9 Dec 2021 02:19:05 +0900 Subject: [PATCH 08/10] =?UTF-8?q?fix:=20x86chi=EB=8B=98=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md | 6 +++--- beta/src/sidebarLearn.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index 458fc74a1..1dfaedcf1 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -1,10 +1,10 @@ --- -title: JavaScript에서의 중괄호가 있는 JSX +title: JavaScript에서 중괄호가 있는 JSX --- -JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 논리와 콘텐츠를 같은 곳에 있을 수 있습니다. 때로는 JavaScript 논리를 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다. 이 상황에서 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다. +JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 곳에 놓을 수 있습니다. 때로는 JavaScript 논리를 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다. 이 상황에서 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다. @@ -120,7 +120,7 @@ JSX 안에서 중괄호는 두 가지 방법으로만 사용할 수 있습니다 ## "이중 중괄호 사용하기": JSX의 CSS와 다른 객체 {/*using-double-curlies-css-and-other-objects-in-jsx*/} -문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에 객체를 전달할 수도 있습니다. 객체는 또한 `{ name: "Hedy Lamarr", inventions: 5 }`와 같이 중괄호로 표시됩니다. 따라서 JSX에서 객체를 전달하려면 `person={{ name: "Hedy Lamarr", inventions: 5 }}`와 같이 다른 중괄호 쌍으로 객체를 감싸야 합니다. +문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에 객체를 전달할 수도 있습니다. 객체는 또한 `{ name: "Hedy Lamarr", inventions: 5 }`처럼 중괄호로 표시됩니다. 따라서 JSX에서 객체를 전달하려면 `person={{ name: "Hedy Lamarr", inventions: 5 }}`와 같이 다른 중괄호 쌍으로 객체를 감싸야 합니다. JSX의 인라인 CSS 스타일에서도 볼 수 있습니다. React는 인라인 스타일을 사용하도록 요구하지 않습니다(CSS 클래스는 대부분 잘 작동합니다). 그러나 인라인 스타일이 필요할 때 `style` 속성에 객체를 전달해야 합니다. diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json index 53fd5083e..b844c5b05 100644 --- a/beta/src/sidebarLearn.json +++ b/beta/src/sidebarLearn.json @@ -55,7 +55,7 @@ "path": "/learn/writing-markup-with-jsx" }, { - "title": "JavaScript에서의 중괄호가 있는 JSX", + "title": "JavaScript에서 중괄호가 있는 JSX", "path": "/learn/javascript-in-jsx-with-curly-braces" }, { From edb7cf78bf94306675fe7e990d102662f2b66762 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Fri, 10 Dec 2021 01:52:40 +0900 Subject: [PATCH 09/10] =?UTF-8?q?fix:=20hg-pyun,=20taehwanno=20=EB=8B=98?= =?UTF-8?q?=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript-in-jsx-with-curly-braces.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index 1dfaedcf1..4560ab63a 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -4,16 +4,16 @@ title: JavaScript에서 중괄호가 있는 JSX -JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 곳에 놓을 수 있습니다. 때로는 JavaScript 논리를 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다. 이 상황에서 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다. +JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 곳에 놓을 수 있습니다. 때로는 JavaScript 논리를 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다. 이 상황에서는 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다. * 따옴표로 문자열을 전달하는 방법 -* 중괄호가 있는 JSX 안에서 Javascript의 변수를 참조하는 방법 -* 중괄호가 있는 JSX 안에서 Javascript의 함수를 호출하는 방법 -* 중괄호가 있는 JSX 안에서 Javascript의 객체를 사용하는 방법 +* 중괄호가 있는 JSX 안에서 Javascript 변수를 참조하는 방법 +* 중괄호가 있는 JSX 안에서 Javascript 함수를 호출하는 방법 +* 중괄호가 있는 JSX 안에서 Javascript 객체를 사용하는 방법 @@ -69,9 +69,9 @@ export default function Avatar() { 이미지를 둥글게 만드는 `"avatar"` CSS 클래스 이름을 지정하는 `className="avatar"`와 `avatar`라는 JavaScript 변수의 값을 읽는 `src={avatar}`의 차이점에 주목해야 합니다. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있기 때문입니다. -## 중괄호 사용하기: Javascript 세계로 가는 창 {/*using-curly-braces-a-window-into-the-javascript-world*/} +## 중괄호 사용하기: Javascript 세계로 연결하는 창 {/*using-curly-braces-a-window-into-the-javascript-world*/} -JSX는 JavaScript를 작성하는 특별한 방법입니다. 중괄호 `{ }`와 함께 안에서 JavaScript를 사용할 수 있습니다. 아래 예시는 이름 `name`을 선언한 다음 `

              ` 내부에 중괄호로 포함합니다. +JSX는 JavaScript를 작성하는 특별한 방법입니다. 중괄호 `{ }` 사이에서 JavaScript를 사용할 수 있습니다. 아래 예시는 이름 `name`을 선언한 다음 `

              ` 내부에 중괄호로 포함합니다. @@ -115,12 +115,12 @@ export default function TodoList() { JSX 안에서 중괄호는 두 가지 방법으로만 사용할 수 있습니다. -1. JSX 태그 안의 **문자**로: `

              {name}의 To Do List

              `는 작동하지만, `<{tag}>Gregorio Y. Zara의 To Do List` 작동하지 않습니다. -2. `=` 바로 뒤에 오는 **어트리뷰트**로: `src={avatar}`는 `avatar` 변수를 읽지만 `src="{avatar}"`는 `{avatar}` 문자열을 전달합니다. +1. JSX 태그 안의 **문자**: `

              {name}'s To Do List

              `는 작동하지만, `<{tag}>Gregorio Y. Zara's To Do List` 작동하지 않습니다. +2. `=` 바로 뒤에 오는 **어트리뷰트**: `src={avatar}`는 `avatar` 변수를 읽지만 `src="{avatar}"`는 `{avatar}` 문자열을 전달합니다. ## "이중 중괄호 사용하기": JSX의 CSS와 다른 객체 {/*using-double-curlies-css-and-other-objects-in-jsx*/} -문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에 객체를 전달할 수도 있습니다. 객체는 또한 `{ name: "Hedy Lamarr", inventions: 5 }`처럼 중괄호로 표시됩니다. 따라서 JSX에서 객체를 전달하려면 `person={{ name: "Hedy Lamarr", inventions: 5 }}`와 같이 다른 중괄호 쌍으로 객체를 감싸야 합니다. +문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에 객체를 전달할 수도 있습니다. 또한 객체는 `{ name: "Hedy Lamarr", inventions: 5 }`처럼 중괄호로 표시됩니다. 따라서 JSX에서 객체를 전달하려면 `person={{ name: "Hedy Lamarr", inventions: 5 }}`와 같이 다른 중괄호 쌍으로 객체를 감싸야 합니다. JSX의 인라인 CSS 스타일에서도 볼 수 있습니다. React는 인라인 스타일을 사용하도록 요구하지 않습니다(CSS 클래스는 대부분 잘 작동합니다). 그러나 인라인 스타일이 필요할 때 `style` 속성에 객체를 전달해야 합니다. @@ -230,7 +230,7 @@ const person = {

              {person.name}'s Todos

              ``` -JSX는 JavaScript를 사용하여 데이터와 논리를 구성할 수 있어 템플릿 언어로서 매우 작습니다. +JSX는 JavaScript를 사용하여 데이터와 논리를 구성할 수 있는 매우 작은 템플릿 언어입니다. @@ -480,9 +480,9 @@ body > div > div { padding: 20px; } `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`같이 작성할 수 있습니다. -1. `{` 는 Javascript 표현식을 엽니다. +1. `{` 는 JavaScript 표현식을 엽니다. 2. `baseUrl + person.imageId + person.imageSize + '.jpg'` 는 올바른 URL 문자열을 생성합니다. -3. `}` 는 Javascript 표현식을 닫습니다. +3. `}` 는 JavaScript 표현식을 닫습니다. From 8a0244b7c08a0dcdb77303c3f9567e478b9dbcda Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Sat, 11 Dec 2021 15:40:43 +0900 Subject: [PATCH 10/10] =?UTF-8?q?fix:=20gnujoow,=20bugoverdose,=20taehwann?= =?UTF-8?q?o=EB=8B=98=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learn/javascript-in-jsx-with-curly-braces.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index 4560ab63a..a140fef59 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -11,9 +11,9 @@ JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성 * 따옴표로 문자열을 전달하는 방법 -* 중괄호가 있는 JSX 안에서 Javascript 변수를 참조하는 방법 -* 중괄호가 있는 JSX 안에서 Javascript 함수를 호출하는 방법 -* 중괄호가 있는 JSX 안에서 Javascript 객체를 사용하는 방법 +* 중괄호가 있는 JSX 안에서 JavaScript 변수를 참조하는 방법 +* 중괄호가 있는 JSX 안에서 JavaScript 함수를 호출하는 방법 +* 중괄호가 있는 JSX 안에서 JavaScript 객체를 사용하는 방법 @@ -43,7 +43,7 @@ export default function Avatar() { 여기에서는 `"https://i.imgur.com/7vQD0fPs.jpg"`와 `"Gregorio Y. Zara"`가 문자열로 전달되고 있습니다. -그러나 `src` 또는 `alt` 텍스트를 동적으로 지정하려면 어떻게 해야 할까요? **`"`와`"`를 `{`와`}`로 바꿔 Javascript의 값을 사용할 수 있습니다**. +그러나 `src` 또는 `alt` 텍스트를 동적으로 지정하려면 어떻게 해야 할까요? **`"`와`"`를 `{`와`}`로 바꿔 JavaScript의 값을 사용할 수 있습니다**. @@ -69,7 +69,7 @@ export default function Avatar() { 이미지를 둥글게 만드는 `"avatar"` CSS 클래스 이름을 지정하는 `className="avatar"`와 `avatar`라는 JavaScript 변수의 값을 읽는 `src={avatar}`의 차이점에 주목해야 합니다. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있기 때문입니다. -## 중괄호 사용하기: Javascript 세계로 연결하는 창 {/*using-curly-braces-a-window-into-the-javascript-world*/} +## 중괄호 사용하기: JavaScript 세계로 연결하는 창 {/*using-curly-braces-a-window-into-the-javascript-world*/} JSX는 JavaScript를 작성하는 특별한 방법입니다. 중괄호 `{ }` 사이에서 JavaScript를 사용할 수 있습니다. 아래 예시는 이름 `name`을 선언한 다음 `

              ` 내부에 중괄호로 포함합니다. @@ -169,7 +169,7 @@ JSX에서 `{{` 와 `}}` 를 본다면 JSX 중괄호 안의 객체에 불과하 -## Javascript 객체와 중괄호로 더 재미있게 {/*more-fun-with-javascript-objects-and-curly-braces*/} +## JavaScript 객체와 중괄호에 대해서 더 알아보기 {/*more-fun-with-javascript-objects-and-curly-braces*/} 여러 표현식을 하나의 객체로 옮기고 중괄호 안의 JSX에서 참조할 수 있습니다.