diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 17e53c41a4..77d3cb49bb 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -1,8 +1,4 @@ -<<<<<<< HEAD -# Chrome으로 디버깅하기 -======= -# Debugging in the browser ->>>>>>> upstream/master +# 브라우저에서 디버깅하기 좀 더 복잡한 코드를 작성하기 전에, 디버깅이란 것에 대해 이야기해봅시다. @@ -42,11 +38,7 @@ Sources 패널은 크게 세 개의 영역으로 구성됩니다. 콘솔 창에 구문(statement)을 입력하고 실행하면 아랫줄에 실행 결과가 출력됩니다. -<<<<<<< HEAD `1+2`를 입력하면 `3`이 출력되고, `hello("debugger")`를 입력하면 `undefined`가 출력되죠. `undefined`가 출력되는 이유는 `hello("debugger")`가 아무것도 반환하지 않기 때문입니다. -======= -For example, here `1+2` results in `3`, while the function call `hello("debugger")` returns nothing, so the result is `undefined`: ->>>>>>> upstream/master ![](chrome-sources-console.svg) @@ -70,22 +62,13 @@ Sources 패널 우측의 디버깅 영역을 보면 중단점 목록을 확인 - 마우스 오른쪽 버튼을 클릭했을 때 나오는 'Remove breakpoint' 옵션을 통해 중단점을 삭제할 수도 있습니다. - 이 외에도 다양한 기능이 있습니다. -<<<<<<< HEAD ```smart header="조건부 중단점" -줄 번호에 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하면 *조건부 중단점(conditional breakpoint)* 을 설정할 수 있습니다. `Add conditional breakpoint`를 클릭했을 때 뜨는 작은 창에 표현식을 입력하면, 표현식이 참인 경우에만 실행을 중지시킬 수 있습니다. -======= -```smart header="Conditional breakpoints" -*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression, that you should provide when you create it, is truthy. ->>>>>>> upstream/master +줄 번호에 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하면 *조건부 중단점(conditional breakpoint)* 을 설정할 수 있습니다. `Add conditional breakpoint`를 클릭했을 때 뜨는 작은 창에 표현식을 입력하면, 표현식이 참으로 평가되는 경우에만 실행을 중지시킬 수 있습니다. 조건부 중단점을 설정하면 변수에 특정 값이 할당될 때나 함수의 매개 변수에 특정 값이 들어올 때만 실행을 중단시킬 수 있어 디버깅 시 유용하게 활용할 수 있습니다. ``` -<<<<<<< HEAD ## debugger 명령어 -======= -## The command "debugger" ->>>>>>> upstream/master 아래 예시처럼 스크립트 내에 `debugger` 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 봅니다. @@ -101,12 +84,8 @@ function hello(name) { } ``` -<<<<<<< HEAD -debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열고 소스 코드 영역을 띄워 중단점을 설정하는 수고를 하지 않아도 됩니다. 에디터를 떠나지 않고도 중단점을 설정할 수 있기 때문에 편리하죠. +이 명령어는 개발자 도구가 열려있을 때만 동작하며, 그렇지 않으면 브라우저가 이를 무시합니다. -======= -Such command works only when the development tools are open, otherwise the browser ignores it. ->>>>>>> upstream/master ## 멈추면 보이는 것들 @@ -120,11 +99,7 @@ Such command works only when the development tools are open, otherwise the brows 1. **`Watch` -- 표현식을 평가하고 결과를 보여줍니다.** -<<<<<<< HEAD Add Expression 버튼 `+`를 클릭해 원하는 표현식을 입력한 후 `key:Enter`를 누르면 중단 시점의 값을 보여줍니다. 입력한 표현식은 실행 과정 중에 계속해서 재평가됩니다. -======= - You can click the plus `+` and input an expression. The debugger will show its value, automatically recalculating it in the process of execution. ->>>>>>> upstream/master 2. **`Call Stack` -- 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시합니다.** @@ -162,20 +137,11 @@ Such command works only when the development tools are open, otherwise the brows -- 'Step over': 다음 명령어를 실행하되, *함수 안으로 들어가진 않음* (단축키 `key:F10`) : 'Step'과 유사하지만, 다음 문이 함수 호출일 때 'Step'과는 다르게 동작합니다(`alert` 같은 내장함수에는 해당하지 않고, 직접 작성한 함수일 때만 동작이 다릅니다). -<<<<<<< HEAD 'Step'은 함수 내부로 들어가 함수 본문 첫 번째 줄에서 실행을 멈춥니다. 반면 'Step over'는 보이지 않는 곳에서 중첩 함수를 실행하긴 하지만 함수 내로 진입하지 않습니다. 실행은 함수 실행이 끝난 후에 즉시 멈춥니다. 'Step over'은 함수 호출 시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용합니다. -======= - -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`. -: Similar to the previous "Step" command, but behaves differently if the next statement is a function call (not a built-in, like `alert`, but a function of our own). - - If we compare them, the "Step" command goes into a nested function call and pauses the execution at its first line, while "Step over" executes the nested function call invisibly to us, skipping the function internals. - - The execution is then paused immediately after that function call. ->>>>>>> upstream/master -- 'Step into' (단축키 `key:F11`) : 'Step'과 유사한데, 비동기 함수 호출에서 'Step'과는 다르게 동작합니다. 이제 막 자바스크립트를 배우기 시작한 분이라면 비동기 호출에 대해 아직 배우지 않았기 때문에 'Step'과 'Step into'의 차이를 몰라도 괜찮습니다. @@ -191,13 +157,8 @@ Such command works only when the development tools are open, otherwise the brows -- 예외 발생 시 코드를 자동 중지시켜주는 기능을 활성화/비활성화 : 활성화되어 있고, 개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춥니다. 실행이 중단되었기 때문에 변수 등을 조사해 어디서 에러가 발생했는지 찾을 수 있게 됩니다. 개발하다가 에러와 함께 스크립트가 죽었다면 디버거를 열고 이 옵션을 활성화한 후, 페이지를 새로 고침하면 에러가 발생한 곳과 에러 발생 시점의 컨텍스트를 확인할 수 있습니다. -<<<<<<< HEAD ```smart header="Continue to here 옵션" 특정 줄에서 마우스 오른쪽 버튼을 클릭해 컨텍스트 메뉴를 열면 "Continue to here"라는 옵션을 볼 수 있습니다. -======= - -- enable/disable automatic pause in case of an error. -: When enabled, if the developer tools is open, an error during the script execution automatically pauses it. Then we can analyze variables in the debugger to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment. ->>>>>>> upstream/master 중단점을 설정하기는 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때 아주 유용한 옵션입니다. ``` @@ -226,11 +187,7 @@ for (let i = 0; i < 5; i++) { 2. `debugger`문 만났을 때 3. 에러가 발생했을 때(개발자 도구가 열려있고 버튼이 '활성화'되어있는 경우) -<<<<<<< HEAD 스크립트 실행이 중지되면 중단 시점을 기준으로 변수에 어떤 값이 들어가 있는지 확인할 수 있습니다. 또한 단계별로 코드를 실행해 가며, 어디서 문제가 발생했는지 추적할 수도 있습니다. 이런 식으로 디버깅이 진행됩니다. -======= -When paused, we can debug: examine variables and trace the code to see where the execution goes wrong. ->>>>>>> upstream/master 개발자 도구는 여기서 소개한 기능 이외의 다양한 기능을 지원합니다. Google에서 제공하는 개발자 도구 공식 매뉴얼은 에서 확인할 수 있습니다. diff --git a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md index 9a33bfa553..cc9316e2d3 100644 --- a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md +++ b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md @@ -2,7 +2,6 @@ 주석을 참고해 어떤 점이 좋지 않은지 살펴봅시다. ```js no-beautify -<<<<<<< HEAD function pow(x,n) // <- 인수 사이에 공백이 없음 { // <- 별도의 줄에 있는 중괄호 let result=1; // <- 할당 연산자 = 앞/뒤에 공백이 없음 @@ -16,21 +15,6 @@ let x=prompt("x?",''), n=prompt("n?",'') // <-- 에러를 발생시키는 코드 if (n<=0) // <- (n <= 0) 같이 공백을 넣는 게 좋고, 윗줄은 비워놓아야 함(세로 들여쓰기) { // <- 별도의 줄에 있는 중괄호 // 아랫줄같이 가로 길이가 길어지면 가독성을 위해 코드를 여러 줄로 쪼개는 게 좋음 -======= -function pow(x,n) // <- no space between arguments -{ // <- curly brace on a separate line - let result=1; // <- no spaces before or after = - for(let i=0;i>>>>>> upstream/master alert(`Power ${n} is not supported, please enter an integer number greater than zero`); } else // <- "} else {"같이 else와 중괄호는 한 줄에 작성하는 게 좋음 diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md index 4f3e55ea30..46d5d1c87f 100644 --- a/1-js/03-code-quality/02-coding-style/article.md +++ b/1-js/03-code-quality/02-coding-style/article.md @@ -116,11 +116,7 @@ if ( 탭 대신 스페이스를 이용했을 때의 장점 중 하나는 들여쓰기 정도를 좀 더 유연하게 변경할 수 있다는 점입니다. -<<<<<<< HEAD 아래 예시처럼 인수 모두의 위치를 여는 괄호와 맞출 수 있죠. -======= - For instance, we can align the parameters with the opening bracket, like this: ->>>>>>> upstream/master ```js no-beautify show(parameters, @@ -305,19 +301,11 @@ Linter라는 도구를 사용하면 내가 작성한 코드가 스타일 가이 유명 linter: -<<<<<<< HEAD -- [JSLint](http://www.jslint.com/) -- 역사가 오래된 linter -- [JSHint](http://www.jshint.com/) -- JSLint보다 세팅이 좀 더 유연한 linter -- [ESLint](http://eslint.org/) -- 가장 최근에 나온 linter +- [JSLint](https://www.jslint.com/) -- 역사가 오래된 linter +- [JSHint](https://jshint.com/) -- JSLint보다 세팅이 좀 더 유연한 linter +- [ESLint](https://eslint.org/) -- 가장 최근에 나온 linter -위 linter 모두 훌륭한 기능을 제공합니다. 글쓴이는 [ESLint](http://eslint.org/)를 사용하고 있습니다. -======= -- [JSLint](https://www.jslint.com/) -- one of the first linters. -- [JSHint](https://jshint.com/) -- more settings than JSLint. -- [ESLint](https://eslint.org/) -- probably the newest one. - -All of them can do the job. The author uses [ESLint](https://eslint.org/). ->>>>>>> upstream/master +위 linter 모두 훌륭한 기능을 제공합니다. 글쓴이는 [ESLint](https://eslint.org/)를 사용하고 있습니다. 대부분의 linter는 플러그인 형태로 유명 에디터와 통합해 사용할 수 있습니다. 원하는 스타일을 설정하는 것 역시 가능합니다. @@ -347,11 +335,7 @@ ESLint를 사용한다고 가정했을 때 아래 절차를 따르면 에디터 위 예시에서 지시자 `"extends"`는 "eslint:recommended"를 기반으로 이를 확장해 스타일 가이드를 설정하겠다는 걸 의미합니다. 이렇게 세팅한 이후에 자신만의 스타일을 설정하면 됩니다. -<<<<<<< HEAD -스타일 규칙을 모아놓은 세트를 웹에서 다운로드해 이를 기반으로 스타일 가이드를 설정하는 것도 가능합니다. 설치 방법에 대한 자세한 내용은 에서 확인해 보시기 바랍니다. -======= -It is also possible to download style rule sets from the web and extend them instead. See for more details about installation. ->>>>>>> upstream/master +스타일 규칙을 모아놓은 세트를 웹에서 다운로드해 이를 기반으로 스타일 가이드를 설정하는 것도 가능합니다. 설치 방법에 대한 자세한 내용은 에서 확인해 보시기 바랍니다. 몇몇 IDE에서는 자체 lint 도구가 있어 편리하긴 하지만 ESLint처럼 쉽게 설정을 변경하는 게 불가능하다는 단점이 있습니다. diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md index 3b7e8b9c33..5dd95310b7 100644 --- a/1-js/03-code-quality/03-comments/article.md +++ b/1-js/03-code-quality/03-comments/article.md @@ -143,11 +143,7 @@ function pow(x, n) { [WebStorm](https://www.jetbrains.com/webstorm/) 등의 다양한 에디터는 이런 주석을 이용해 자동 완성 기능, 자동 에러 검출 기능 등을 제공합니다. -<<<<<<< HEAD -[JSDoc 3](https://github.com/jsdoc3/jsdoc)이나 기타 유사한 툴을 사용하면 주석으로 HTML 문서를 만들 수 있습니다. 자세한 정보는 에서 확인하시기 바랍니다. -======= -Also, there are tools like [JSDoc 3](https://github.com/jsdoc/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at . ->>>>>>> upstream/master +[JSDoc 3](https://github.com/jsdoc/jsdoc)이나 기타 유사한 툴을 사용하면 주석으로 HTML 문서를 만들 수 있습니다. 자세한 정보는 에서 확인하시기 바랍니다. 왜 이런 방법으로 문제를 해결했는지를 설명하는 주석 : 무엇이 적혀있는지는 중요합니다. 그런데 무슨 일이 일어나고 있는지 파악하려면 무엇이 *적혀있지 않은 지*가 더 중요할 수 있습니다. '왜 이 문제를 이런 방법으로 해결했나?'라는 질문에 코드는 답을 해 줄 수 없기 때문입니다. diff --git a/1-js/03-code-quality/04-ninja-code/article.md b/1-js/03-code-quality/04-ninja-code/article.md index e093182fc7..44afd05d5c 100644 --- a/1-js/03-code-quality/04-ninja-code/article.md +++ b/1-js/03-code-quality/04-ninja-code/article.md @@ -1,14 +1,9 @@ # 닌자 코드 -<<<<<<< HEAD -```quote author="공자" +```quote author="공자(논어)" 생각 없이 배우기만 하면 얻는 것이 없고,
생각만 하고 배우지 않으면 오류나 독단에 빠질 위험이 있다. -======= -```quote author="Confucius (Analects)" -Learning without thought is labor lost; thought without learning is perilous. ->>>>>>> upstream/master ``` 닌자라 불리던 전설 속 개발자들은 유지보수 담당 개발자를 혹독하게 훈련하고자 (아래에서 소개해 드릴) 다양한 편법을 사용하곤 했습니다. @@ -111,15 +106,10 @@ i = i ? i < 0 ? Math.max(0, len + i) : i : 0; ## 동의어 사용하기 -<<<<<<< HEAD -```quote author="공자" -모든 일 중 가장 어려운 일은
-어두운 방에서 검은 고양이를 찾는 일이다.

-특히 그 방에 고양이가 없을 때에. -======= -```quote author="Laozi (Tao Te Ching)" -The Tao that can be told is not the eternal Tao. The name that can be named is not the eternal name. ->>>>>>> upstream/master +```quote author="노자(도덕경)" +말할 수 있는 도(道)는 영원한 도가 아니며,
+이름 붙일 수 있는 이름은
+영원한 이름이 아니다. ``` *유사한* 뜻을 가진 단어 여러 개를 *같은*걸 명명하는 데 사용해서 당신의 풍부한 어휘력을 은연중에 드러내 봅시다. diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md index ef10a90518..cd3c11fcb2 100644 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ b/1-js/03-code-quality/05-testing-mocha/article.md @@ -2,11 +2,7 @@ 테스트 자동화는 앞으로 풀어야 할 과제에서뿐만 아니라 현업에서도 광범위하게 쓰입니다. -<<<<<<< HEAD ## 테스트는 왜 해야 하는가? -======= -## Why do we need tests? ->>>>>>> upstream/master 함수를 하나 만들고 있다고 해 봅시다. 대부분 매개변수-결과 관계를 중심으로 어떻게 코드를 작성할지 구상하실 겁니다. @@ -55,11 +51,7 @@ describe("pow", function() { 스펙은 세 가지 주요 구성 요소로 이루어집니다. `describe("title", function() { ... })` -<<<<<<< HEAD : 구현하고자 하는 기능에 대한 설명이 들어갑니다. 우리 예시에선 함수 `pow`가 어떤 동작을 하는지에 대한 설명이 들어갈 겁니다. `it` 블록을 한데 모아주는 역할도 합니다. -======= -: What functionality we're describing? In our case we're describing the function `pow`. Used to group "workers" -- the `it` blocks. ->>>>>>> upstream/master `it("유스 케이스 설명", function() { ... })` : `it`의 첫 번째 인수엔 특정 유스 케이스에 대한 설명이 들어갑니다. 이 설명은 *누구나 읽을 수 있고 이해할 수 있는 자연어*로 적어줍니다. 두 번째 인수엔 유스 케이스 테스트 함수가 들어갑니다. @@ -75,47 +67,27 @@ describe("pow", function() { 실제 개발에 착수하면 아래와 같은 순서로 개발이 진행됩니다. -<<<<<<< HEAD 1. 명세서 초안을 작성합니다. 초안엔 기본적인 테스트도 들어갑니다. 2. 명세서 초안을 보고 코드를 작성합니다. -3. 코드가 작동하는지 확인하기 위해 [Mocha](http://mochajs.org/)라 불리는 테스트 프레임워크를 사용해 명세서를 실행합니다.(Mocha에 대해선 아래에서 다룰 예정입니다.) 이때, 코드가 잘못 작성되었다면 에러가 출력됩니다. 개발자는 테스트를 모두 통과해 에러가 더는 출력되지 않을 때까지 코드를 수정합니다. +3. 코드가 작동하는지 확인하기 위해 [Mocha](https://mochajs.org/)라 불리는 테스트 프레임워크를 사용해 명세서를 실행합니다.(Mocha에 대해선 아래에서 다룰 예정입니다.) 이때, 코드가 잘못 작성되었다면 에러가 출력됩니다. 개발자는 테스트를 모두 통과해 에러가 더는 출력되지 않을 때까지 코드를 수정합니다. 4. 모든 테스트를 통과하는 코드 초안이 완성되었습니다. 5. 명세서에 지금까진 고려하지 않았던 유스케이스 몇 가지를 추가합니다. 테스트가 실패하기 시작할 겁니다. 6. 세 번째 단계로 돌아가 테스트를 모두 통과할 때까지 코드를 수정합니다. 7. 기능이 완성될 때까지 3~6단계를 반복합니다. -======= -1. An initial spec is written, with tests for the most basic functionality. -2. An initial implementation is created. -3. To check whether it works, we run the testing framework [Mocha](https://mochajs.org/) (more details soon) that runs the spec. While the functionality is not complete, errors are displayed. We make corrections until everything works. -4. Now we have a working initial implementation with tests. -5. We add more use cases to the spec, probably not yet supported by the implementations. Tests start to fail. -6. Go to 3, update the implementation till tests give no errors. -7. Repeat steps 3-6 till the functionality is ready. ->>>>>>> upstream/master 위와 같은 방법은 *반복적인(iterative)* 성격을 지닙니다. 명세서를 작성하고 실행한 후 테스트를 모두 통과할 때까지 코드를 작성하고, 또 다른 테스트를 추가해 앞의 과정을 반복하니까요. 이렇게 하다 보면 종래에는 완전히 동작하는 코드와 테스트 둘 다를 확보하게 됩니다. 이제 실제 사례에 위 개발 프로세스를 적용해 보겠습니다. -<<<<<<< HEAD 함수 `pow`의 스펙 초안은 이미 위에서 작성했으므로, 첫 번째 단계는 이미 끝난 상황입니다. 코드를 본격적으로 작성하기 전에 잠시 자바스크립트 라이브러리 몇 가지를 사용해 테스트를 실행해 보겠습니다. 지금 상태에선 테스트 모두가 실패할 텐데 그런데도 실행해 보는 이유는 테스트가 실제로 돌아가는지 확인하기 위해서입니다. -======= -The first step is already complete: we have an initial spec for `pow`. Now, before making the implementation, let's use a few JavaScript libraries to run the tests, just to see that they are working (they will all fail). ->>>>>>> upstream/master ## 스펙 실행하기 본 튜토리얼에선 총 3개의 라이브러리를 사용해 테스트를 진행해보겠습니다. 각 라이브러리에 대한 설명은 아래와 같습니다. -<<<<<<< HEAD -- [Mocha](http://mochajs.org/) -- 핵심 테스트 프레임워크로, `describe`, `it`과 같은 테스팅 함수와 테스트 실행 관련 주요 함수를 제공합니다. -- [Chai](http://chaijs.com) -- 다양한 assertion을 제공해 주는 라이브러리입니다. 우리 예시에선 `assert.equal` 정도만 사용해 볼 예정입니다. -- [Sinon](http://sinonjs.org/) -- 함수의 정보를 캐내는 데 사용되는 라이브러리로, 내장 함수 등을 모방합니다. 본 챕터에선 사용하지 않고, 다른 챕터에서 실제로 사용해 볼 예정입니다. -======= -- [Mocha](https://mochajs.org/) -- the core framework: it provides common testing functions including `describe` and `it` and the main function that runs tests. -- [Chai](https://www.chaijs.com/) -- the library with many assertions. It allows to use a lot of different assertions, for now we need only `assert.equal`. -- [Sinon](https://sinonjs.org/) -- a library to spy over functions, emulate built-in functions and more, we'll need it much later. ->>>>>>> upstream/master +- [Mocha](https://mochajs.org/) -- 핵심 테스트 프레임워크로, `describe`, `it`과 같은 테스팅 함수와 테스트 실행 관련 주요 함수를 제공합니다. +- [Chai](https://www.chaijs.com/) -- 다양한 assertion을 제공해 주는 라이브러리입니다. 우리 예시에선 `assert.equal` 정도만 사용해 볼 예정입니다. +- [Sinon](https://sinonjs.org/) -- 함수의 정보를 캐내는 데 사용되는 라이브러리로, 내장 함수 등을 모방합니다. 본 챕터에선 사용하지 않고, 다른 챕터에서 실제로 사용해 볼 예정입니다. 세 라이브러리 모두, 브라우저나 서버 사이드 환경을 가리지 않고 사용 가능합니다. 여기선 브라우저 환경을 가정하고 사용해 보겠습니다. @@ -366,25 +338,14 @@ describe("pow", function() { ```smart header="다양한 assertion" 위에서 사용한 `assert.isNaN`은 `NaN`인지 아닌지를 확인해줍니다. -<<<<<<< HEAD -[Chai](http://chaijs.com)는 이 외에도 다양한 assertion을 지원합니다. +[Chai](https://www.chaijs.com/)는 이 외에도 다양한 assertion을 지원합니다. - `assert.equal(value1, value2)` -- `value1`과 `value2`의 동등성을 확인합니다(`value1 == value2`). - `assert.strictEqual(value1, value2)` -- `value1`과 `value2`의 일치성을 확인합니다(`value1 === value2`). - `assert.notEqual`, `assert.notStrictEqual` -- 비 동등성, 비 일치성을 확인합니다. - `assert.isTrue(value)` -- `value`가 `true`인지 확인합니다(`value === true`). - `assert.isFalse(value)` -- `value`가 `false`인지 확인합니다(`value === false`). -- 이 외의 다양한 assertion은 [docs](http://chaijs.com/api/assert/)에서 확인할 수 있습니다. -======= -There are other assertions in [Chai](https://www.chaijs.com/) as well, for instance: - -- `assert.equal(value1, value2)` -- checks the equality `value1 == value2`. -- `assert.strictEqual(value1, value2)` -- checks the strict equality `value1 === value2`. -- `assert.notEqual`, `assert.notStrictEqual` -- inverse checks to the ones above. -- `assert.isTrue(value)` -- checks that `value === true` -- `assert.isFalse(value)` -- checks that `value === false` -- ...the full list is in the [docs](https://www.chaijs.com/api/assert/) ->>>>>>> upstream/master +- 이 외의 다양한 assertion은 [docs](https://www.chaijs.com/api/assert/)에서 확인할 수 있습니다. ``` 새롭게 추가한 테스트를 통과할 수 있도록 `pow`에 코드를 몇 줄 추가해보겠습니다. diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md index 769341e85d..538d317241 100644 --- a/1-js/03-code-quality/06-polyfills/article.md +++ b/1-js/03-code-quality/06-polyfills/article.md @@ -1,145 +1,89 @@ -<<<<<<< HEAD -# 폴리필 +# 폴리필과 트랜스파일러 -자바스크립트는 끊임없이 진화하는 언어입니다. 새로운 제안(proposal)이 정기적으로 등록, 분석되고, 가치가 있다고 판단되는 제안은 에 추가됩니다. 그리고 궁극적으로 [명세서(specification)](http://www.ecma-international.org/publications/standards/Ecma-262.htm)에 등록됩니다. -======= -# Polyfills and transpilers - -The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at and then progress to the [specification](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/). ->>>>>>> upstream/master +자바스크립트는 끊임없이 진화하는 언어입니다. 새로운 제안(proposal)이 정기적으로 등록, 분석되고, 가치가 있다고 판단되는 제안은 에 추가됩니다. 그리고 궁극적으로 [명세서(specification)](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/)에 등록됩니다. 자바스크립트 엔진을 만드는 각 조직은 나름대로 우선순위를 매겨 명세서 내 어떤 기능을 먼저 구현할지 결정합니다. 명세서에 등록된 기능보다 초안(draft)에 있는 제안을 먼저 구현하기로 결정하는 경우도 있습니다. 구현 난도가 높아서 이런 결정을 내리는 경우도 있지만, 구미를 당기지 않아 이런 결정을 내리기도 합니다. -<<<<<<< HEAD 엔진이 표준 전체를 지원하지 않고 일부만 지원하는 건 흔한 일이죠. -엔진별로 어떤 기능을 지원하고 있는지는 에서 확인할 수 있습니다. 표가 상당히 큰데, 각 기능에 대해선 차근차근 배울 예정이니 너무 겁먹지 않으셔도 됩니다. - -## 바벨 - -명세서에 등록된 지 얼마 안 된 기능을 사용해 코드를 작성하다 보면 특정 엔진에서 우리가 작성한 코드를 지원하지 않는다는 걸 알게 되는 경우가 있습니다. 명세서 내 모든 기능을 모든 엔진이 구현하고 있지 않기 때문이죠. - -이럴 때 바벨을 사용할 수 있습니다. - -[바벨(Babel)](https://babeljs.io)은 [트랜스파일러(transpiler)](https://en.wikipedia.org/wiki/Source-to-source_compiler)로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔줍니다. - -바벨의 주요 역할은 다음과 같습니다. - -1. 트랜스파일러 -- 바벨은 코드를 재작성해주는 트랜스파일러 프로그램입니다. 바벨은 개발자의 컴퓨터에서 돌아가는데, 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경됩니다. 변경된 코드는 웹사이트 형태로 사용자에게 전달됩니다. [웹팩(webpack)](http://webpack.github.io/)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜줍니다. 이런 과정이 없으면 개발이 끝난 코드를 한데 통합하는 데 어려움이 있을 수 있습니다. - -2. 폴리필 - - 명세서엔 새로운 문법이나 기존에 없던 내장 함수에 대한 정의가 추가되곤 합니다. - 새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준을 준수하는 코드로 변경해줍니다. 반면, 새롭게 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있습니다. 자바스크립트는 매우 동적인 언어라서 원하기만 하면 어떤 함수라도 스크립트에 추가할 수 있습니다. 물론 기존 함수를 수정하는 것도 가능합니다. 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신 표준을 준수할 수 있게 작업할 수 있습니다. - - 이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필(polyfill)"이라 부릅니다. 폴리필(poly`fill`)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(`fill in`) 역할을 합니다. - - 주목할 만한 폴리필 두 가지는 아래와 같습니다. - - [core js](https://github.com/zloirock/core-js) -- 다양한 폴리필을 제공합니다. 특정 기능의 폴리필만 사용하는 것도 가능합니다. - - [polyfill.io](http://polyfill.io) -- 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스입니다. - -모던 자바스크립트를 이용해 스크립트를 작성하려면 트랜스파일러와 폴리필은 필수입니다. - -## 튜토리얼에서 예시 실행하기 - - -````online -튜토리얼 내 예시 대부분은 아래와 같이 클릭 한 번으로 바로 실행할 수 있습니다. - -```js run -alert('우측 상단 모서리에 있는 "재생" 버튼을 눌러 스크립트를 실행해 보세요.'); -``` - -모던 자바스크립트를 사용해 작성한 예시는 해당 기능을 지원하는 브라우저에서만 작동합니다. -```` - -```offline -오프라인에서 PDF 포맷으로 튜토리얼을 읽고 계신다면 예시를 실행할 수 없습니다. EPUB에선 일부 예시가 실행 가능합니다. -``` - -Google Chrome은 모든 브라우저 중 대개 가장 먼저 최신 기능을 지원합니다. 트랜스파일러 없이 최신 기능을 사용할 수 있기 때문에 Chrome은 데모용으로 사용하기 좋습니다. 그런데 다른 브라우저들도 많이 뒤처지는 편은 아니니 안심하고 사용하셔도 될 것 같습니다. -======= -So it's quite common for an engine to implement only part of the standard. - -A good page to see the current state of support for language features is (it's big, we have a lot to study yet). +엔진별로 어떤 기능을 지원하고 있는지는 에서 확인할 수 있습니다. 표가 상당히 큰데, 각 기능에 대해선 차근차근 배울 예정이니 너무 겁먹지 않으셔도 됩니다. -As programmers, we'd like to use most recent features. The more good stuff - the better! +개발자라면 누구나 최신 기능을 쓰고 싶기 마련입니다. 멋진 기능은 많을수록 좋으니까요! -On the other hand, how to make our modern code work on older engines that don't understand recent features yet? +그런데 최신 기능을 알아듣지 못하는 구식 엔진에서도 모던 코드가 잘 동작하게 하려면 어떻게 해야 할까요? -There are two tools for that: +이때 두 가지 도구를 활용할 수 있습니다. -1. Transpilers. -2. Polyfills. +1. 트랜스파일러(Transpiler) +2. 폴리필(Polyfill) -Here, in this chapter, our purpose is to get the gist of how they work, and their place in web development. +이번 챕터에선 두 도구가 어떻게 동작하는지, 웹 개발에서 어떤 역할을 하는지 큰 그림을 잡아보겠습니다. -## Transpilers +## 트랜스파일러 -A [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) is a special piece of software that translates source code to another source code. It can parse ("read and understand") modern code and rewrite it using older syntax constructs, so that it'll also work in outdated engines. +[트랜스파일러(transpiler)](https://en.wikipedia.org/wiki/Source-to-source_compiler)는 소스 코드를 다른 소스 코드로 바꿔 주는 프로그램입니다. 모던 코드를 분석("읽고 해석")한 다음 옛 문법으로 다시 작성해 주죠. 변환된 코드는 구식 엔진에서도 잘 동작합니다. -E.g. JavaScript before year 2020 didn't have the "nullish coalescing operator" `??`. So, if a visitor uses an outdated browser, it may fail to understand the code like `height = height ?? 100`. +예를 들어 2020년 이전 자바스크립트엔 "nullish 병합 연산자(nullish coalescing operator)" `??`가 없었습니다. 그래서 사용자가 구식 브라우저를 쓰고 있다면 `height = height ?? 100` 같은 코드를 처리하지 못할 수 있죠. -A transpiler would analyze our code and rewrite `height ?? 100` into `(height !== undefined && height !== null) ? height : 100`. +트랜스파일러는 코드를 분석해 `height ?? 100`을 `(height !== undefined && height !== null) ? height : 100`으로 변환해 줍니다. ```js -// before running the transpiler +// 트랜스파일러 실행 전 height = height ?? 100; -// after running the transpiler +// 트랜스파일러 실행 후 height = (height !== undefined && height !== null) ? height : 100; ``` -Now the rewritten code is suitable for older JavaScript engines. +이제 변환된 코드는 구버전 자바스크립트 엔진에서도 잘 돌아갑니다. -Usually, a developer runs the transpiler on their own computer, and then deploys the transpiled code to the server. +보통은 개발자가 자기 컴퓨터에서 트랜스파일러를 돌린 다음, 변환된 코드를 서버에 배포하는 식으로 사용합니다. -Speaking of names, [Babel](https://babeljs.io) is one of the most prominent transpilers out there. +잘 알려진 트랜스파일러로는 [바벨(Babel)](https://babeljs.io)이 있습니다. -Modern project build systems, such as [webpack](https://webpack.js.org/), provide a means to run a transpiler automatically on every code change, so it's very easy to integrate into the development process. +[웹팩(webpack)](https://webpack.js.org/) 같은 모던 빌드 시스템은 코드가 바뀔 때마다 트랜스파일러를 자동으로 돌려 주기 때문에, 개발 과정에 자연스럽게 녹여 쓸 수 있습니다. -## Polyfills +## 폴리필 -New language features may include not only syntax constructs and operators, but also built-in functions. +새로 추가되는 언어 기능엔 문법이나 연산자뿐 아니라 내장 함수도 포함됩니다. -For example, `Math.trunc(n)` is a function that "cuts off" the decimal part of a number, e.g `Math.trunc(1.23)` returns `1`. +예를 들어 `Math.trunc(n)`은 숫자의 소수점 이하를 "잘라내는" 함수입니다. `Math.trunc(1.23)`을 호출하면 `1`이 반환되죠. -In some (very outdated) JavaScript engines, there's no `Math.trunc`, so such code will fail. +그런데 (아주 오래된) 일부 자바스크립트 엔진엔 `Math.trunc`가 없어서 위 코드를 그대로 쓰면 에러가 납니다. -As we're talking about new functions, not syntax changes, there's no need to transpile anything here. We just need to declare the missing function. +이건 문법이 바뀐 게 아니라 함수가 추가된 경우라서 트랜스파일을 거칠 필요가 없습니다. 빠져 있는 함수를 직접 선언해 주기만 하면 되죠. -A script that updates/adds new functions is called "polyfill". It "fills in" the gap and adds missing implementations. +이렇게 함수를 새로 추가하거나 갱신해 주는 스크립트를 "폴리필(polyfill)"이라고 부릅니다. 빠진 자리를 "메워 주는(`fill in`)" 셈이죠. -For this particular case, the polyfill for `Math.trunc` is a script that implements it, like this: +`Math.trunc`를 위한 폴리필은 아래처럼 함수를 직접 구현해 주는 스크립트입니다. ```js -if (!Math.trunc) { // if no such function - // implement it +if (!Math.trunc) { // 함수가 없는 경우 + // 직접 구현 Math.trunc = function(number) { - // Math.ceil and Math.floor exist even in ancient JavaScript engines - // they are covered later in the tutorial + // Math.ceil과 Math.floor는 옛 자바스크립트 엔진에도 있습니다. + // 둘에 대해선 튜토리얼 뒷부분에서 다룰 예정입니다. return number < 0 ? Math.ceil(number) : Math.floor(number); }; } ``` -JavaScript is a highly dynamic language. Scripts may add/modify any function, even built-in ones. +자바스크립트는 동적인 언어입니다. 스크립트로 어떤 함수든 추가하거나 수정할 수 있고, 심지어 내장 함수도 예외가 아니죠. -One interesting polyfill library is [core-js](https://github.com/zloirock/core-js), which supports a wide range of features and allows you to include only the ones you need. +눈여겨볼 만한 폴리필 라이브러리로 [core-js](https://github.com/zloirock/core-js)가 있는데요, 다양한 기능을 폭넓게 지원하면서도 필요한 기능만 골라 쓸 수 있습니다. -## Summary +## 요약 -In this chapter we'd like to motivate you to study modern and even "bleeding-edge" language features, even if they aren't yet well-supported by JavaScript engines. +자바스크립트 엔진이 아직 잘 지원하지 않는 기능이라도, 모던 기능, 심지어 "최첨단(bleeding-edge)" 기능까지 적극적으로 공부해 보시길 권합니다. -Just don't forget to use a transpiler (if using modern syntax or operators) and polyfills (to add functions that may be missing). They'll ensure that the code works. +단, 모던 문법이나 연산자를 쓸 땐 트랜스파일러를, 일부 엔진에 없을 수 있는 함수를 추가할 땐 폴리필을 꼭 함께 사용하세요. 이 둘이 갖춰져야 코드가 제대로 동작합니다. -For example, later when you're familiar with JavaScript, you can setup a code build system based on [webpack](https://webpack.js.org/) with the [babel-loader](https://github.com/babel/babel-loader) plugin. +자바스크립트가 좀 익숙해진 뒤엔 [웹팩(webpack)](https://webpack.js.org/) 기반에 [babel-loader](https://github.com/babel/babel-loader) 플러그인을 얹어 빌드 시스템을 꾸려볼 수도 있죠. -Good resources that show the current state of support for various features: -- - for pure JavaScript. -- - for browser-related functions. +각 기능의 지원 현황을 확인할 땐 아래 자료가 유용합니다. +- - 순수 자바스크립트 기능 +- - 브라우저 관련 기능 -P.S. Google Chrome is usually the most up-to-date with language features, try it if a tutorial demo fails. Most tutorial demos work with any modern browser though. +참고로 Google Chrome은 보통 최신 언어 기능을 가장 빨리 지원합니다. 튜토리얼 데모가 잘 안 돌아간다면 Chrome으로 한 번 시도해 보세요. 대부분의 데모는 모던 브라우저 어디서나 잘 작동합니다. ->>>>>>> upstream/master diff --git a/1-js/04-object-basics/01-object/8-multiply-numeric/task.md b/1-js/04-object-basics/01-object/8-multiply-numeric/task.md index 8f4bd9ae5d..5117e2ebf9 100644 --- a/1-js/04-object-basics/01-object/8-multiply-numeric/task.md +++ b/1-js/04-object-basics/01-object/8-multiply-numeric/task.md @@ -2,15 +2,9 @@ importance: 3 --- -<<<<<<< HEAD # 프로퍼티 값 두 배로 부풀리기 객체 `obj`의 프로퍼티 값이 숫자인 경우 그 값을 `두 배` 해주는 함수 `multiplyNumeric(obj)`을 만들어보세요. -======= -# Multiply numeric property values by 2 - -Create a function `multiplyNumeric(obj)` that multiplies all numeric property values of `obj` by `2`. ->>>>>>> upstream/master 예시: