원문: https://www.reaktor.com/blog/refactoring-30000-lines-js-types/?utm_source=javascriptweekly&utm_medium=email

AS-IS

Let’s look at a first example, to give you a taste of what working with promises is like.

TO-BE

아래의 첫 번째 예제는 promise로 어떻게 동작하는지 보여주기 위함이다.

5.1 섹션 바로 아래
“(maximally minimal classes)[http://wiki.ecmascript.org/doku.php?id=strawman:maximally_minimal_classes]”라고

->

“maximally minimal classes”라고

수정

What makes promises so useful for asynchronous functions (with one-off results) is that once a promise is settled, it doesn’t change anymore. Furthermore, there are never any race conditions, because it doesn’t matter whether you invoke then() before or after a promise is settled:

AS-IS

promise 상태가 설정되면 더는 어느 것도 변하지 않게 됩니다. 그래서 promise는 비동기함수를 위하여(일회성 결과) 유용하게 만들어졌습니다. 게다가 promise는 경쟁상태(race condition)를 일으키지 않습니다. 왜냐면 then() 을 promise 전이나 상태가 세팅된 후에 실행하든 중요하지 않기 때문입니다.

TO-BE

비동기 함수를 위한 promise가 어떤 점에서 좋냐면, promise 상태가 한 번 설정되면 더이상 어느 것도 변하지 않게 된다는 점이다.  게다가 비동기 함수들은 경쟁상태(race condition)가 절대 되지 않는다. 왜냐하면 then()을 실행하는 게 promise가 처리되기 전이냐 후냐는 중요하지 않기 때문이다. (promise는 어차피 resolve와 reject에 의해 진행되므로)

https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-6-db502830403#.ubj6j44cn

AS-IS

함수 호출자는 연산된 결과를 알려주는 promise와 함께 콜백을 등록합니다.(The caller of the function registers callbacks with the promise to be notified once the result has been computed) 이 함수는 promise를 통해 결과를 전송합니다.

TO-BE

함수 호출자는 결과 계산이 완료되었다는 것을 알림 받기 위해 콜백을 promise 패턴으로 등록한다.

함수형 프로그래머가 되고 싶다고? (Part 5)

하지만 멀테 쓰레드에는 2가지 주요 문제점이 있다. 

멀테 -> 멀티

하지만, 순서를 중요하게 생각지 않고, 모든 것을 병렬로 처리해벼리면 어떻게 될까?

처리해벼리면 -> 처리해버리면

원문: https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35#.h493rgis2

https://github.com/FEDevelopers/tech.description/wiki/%EB%8F%94-%EC%A1%B0%EC%9E%91

4. HTML 요소를 접근하는 방법 (MDN Reference)

innerHTML은 element 자손의 HTML 구문을 가져오거나 설정할 때 사용한다.

// get the HTML of "element"
var content = element.innerHTML;

// set the HTML of "otherElement"

otherElement.innterHTML = content;
otherElement.innerHTML = content;

http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-1/

기존 번역 하려고 한건 보류...

불변성 섹션 위부분

자바스크립트, 자바, 씨샵과 같은 명령형 프로그래밍 언어에서는 어디에서나 부작용이 존재한다. 이건 디버깅을 어렵게 한다. 왜냐하면 변수 값이 바뀔 수 있기 때문이다. 그래서 변수가 잘못된 값으로 바뀌어서 바뀌어서 버그가 발생할 때, 어디를 봐야할까? 소스 코드 모든 곳을 봐야할까? 그 방법은 썩 좋지 못하다.

바뀌어서가 두번 반복됌

https://medium.com/outsystems-experts/beyond-memory-leaks-in-javascript-d27fd48ae67e#.grvvsvdwd

자바스크립트 메모리 누수 관련 글입니다.

원문: https://hackernoon.com/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7#.fvgsharrz

Webpack - 헷갈리는 부분

Webpack은 React와 Redux 앱을 위한 주요한 module bundler 이다. Angular2와 다른 프레임워크를 사용하는 사람들 또한 많이 사용하는 것 같다.

내가 처음 Webpack 설정 파일을 봤을 때, 매우 헷갈리고 외계인(alien-y) 같아 보였다. 몇시간 동안 Webpack을 둘러본 후 Webpack은 고유한 구문과 새로운 철학 때문에 혼란을 가질 수 있다고 생각 하였습니다. 또한 이러한 철학들은 책임을 가지고 있습니다. (Incidentally, these philosophies are also responsible for making it so popular.)

처음 시작할 때 헷갈리기 때문에, 저는 다른 사람이 쉽게 시작 하고 파워풀한 기능을 사용할 수 있도록 포스트를 작성할 것입니다.

Webpack 핵심 철학

Webpack의 두가지 핵심 철학:

• 모든것은 module이다.
  • JS 파일들은 모듈(modules)이 될 수 있다. 또한 다른 모든 것(CSS, Images, HTMLS..)들도 모듈(modules)가 될 수 있다. 그것은 당신은 require(“myJSfile.js”) 또는 require(“myCSS.css”) 처럼 할 수 있다. 이는 작은 조각으로 파일(artifact) 을 나누거나 재사용할 수 있다는걸 의미 합니다.
• 당신이 필요한것 그리고 필요한 때에 불러진다(Load).
  • 전형적인 module bundlers는 모든 모듈을 주고, 거대한 bundler.js 파일 하나를 생산한다. 그러나 실제 앱들은 bundle.js는 10~15MB이고 영원히 로드 되고있다. 그래서 Webpack은 코드 분할 과 다중 “bundle” 파일 같은 다양한 기능을 가지고 있으며, 또한 당신이 필요한 것, 필요한 때에 앱이 비동기적으로 한부분을 로드 하게 해준다.

이제 헷갈려하는 부분에 대해 알아보자.

Development(개발모드) VS Production(배포모드)

첫번째 주의할 점으로 Webpack은 기능의 톤(종류라고생각 : tons of features)을 가지고 있다. 몇몇은 “개발용”, 또 몇몇은 “배포용” 그외 또다른 사람은 “배포-개발용”에 대한 것입니다.

일반적으로 대부분의 프로젝트는 2가지의 Webpack 설정 파일을 가지고 사용한다.

그리고 bundels 파일을 만들기 위하여 package.json 안에 스크립트를 다음고 같이 작성한다.

 “scripts”: {
  //npm run build to build production bundles
  “build”: “webpack --config webpack.config.prod.js”,
  //npm run dev to generate development bundles and run dev. server
  “dev”: “webpack-dev-server”
 }

webpack CLI(Command Line Interface) VS webpack-dev-server

Webpack은 2가지 인터페이스를 제공하는 점에 대해 유의해야 합니다.

1. Webpack CLI tool - 기본 인터페이스(Webpack이 아라서 설치한다.)
2. webpack-dev-server - Node.js server 사용(nodeJS 설치요망)

Webpack CLI ( 배포 빌드엔 굿! )

이 도구 는 CLI를 사용하거나, 설정 파일(default : webpack.config.js)을 통해 bundle을 위하여 Webpack에 옵션을 제공한다.
아마 당신은 CLI를 사용하여 Webpack을 공부하지만, 훗날 대부분 배포용으로만 사용 할 것입니다.

Usage:

OPTION 1:

//Install it globally
npm install webpack —g

//Use it at the terminal 
$ webpack //<--Generates bundle using webpack.config.js

OPTION 1:

//Install it locally & add it to package.json
npm install webpack —save

//Add it to package.json's script 
“scripts”: {
 “build”: “webpack --config webpack.config.prod.js -p”,
 ...
 }

//Use it by running the following:
"npm run build"

webpack-dev-server ( 개발모드로 굿 )

이는 nodeJS(express)서버, 8080 포트로 러닝 됩니다. 서버는 내부적으로 Webpack을 호출 합니다. 그러면 브라우저 리로딩(실시간 로딩), “Hot Module Replacement” 와 같은 추가적인 기능을 사용할 수 있는 이점이 있습니다.

Usage:

OPTION 1:

//Install it globally
npm install webpack-dev-server --save

//Use it at the terminal
$ webpack-dev-server --inline --hot

OPTION 2:

// Add it to package.json's script 
“scripts”: {
 “start”: “webpack-dev-server --inline --hot”,
 ...
 }

// Use it by running 
$ npm start

Open browser at:
http://localhost:8080

Webpack Vs webpack-dev-server options

inline, hot 과 같은 옵션은 오로지 webpack-dev-server에만 있다는 것에 주목할 필요가 있다. 그리고 hide-modules은 CLI에만 있는 옵션이다.

webpack-dev-server CLI options Vs config options

관심 가질 또다른 점은 webpack-dev-server로 옵션을 전달 할 수 있는 2가지 방법이 있다.

• webpack.config.js를 통해서 devServer 객체를 사용한다.

//Via webpack.config.js
devServer: {
 inline: true,
 hot:true
 }

• 단순 CLI 옵션

//Via CLI
//package.json
{
scripts: 
   {“start”: “webpack-dev-server --hot --inline”}
}

때론 devServer 설정이 안될 때가 있다. 그래서 CLI 옵션을 좀더 선호한다.

“hot” Vs “inline” webpack-dev-server options

inline 은 전체 페이지에 대한 실시간 리로딩(“Live Reloading”) 옵션이며, hot 은 컴포넌트가 수정 될 경우 그 수정된 부분만 리로드 해주는 부분 모듈 리로딩(“Hot Module Reloading”) 옵션이다. 만약 두개 옵션을 모두 지정할 경우 “Hot Module Reloading”이 처음 발생한다. 그리고 “Hot Module Reloading”이 안되면 전체 페이지 로딩을 한다.

//1. 페이지를 로딩하지 않는다.
$ webpack-dev-server

//2. 전체 페이지를 로딩 한다.
$ webpack-dev-server --inline

//3. 부분 로딩  또는 전체 페이지 로딩
$ webpack-dev-server  --inline --hot

“entry” — String Vs Array Vs Object

“entry”는 root 모듈의 위치 또는 시작 지점이라고 Webpack이 말하더군요. “entry”는 String, Array, Object 형태로 만들 수 있습니다. 이것이 바로 혼란스러운 점인데 다른 타입은 결국 다른 목적에 사용된다고 생각하면 됍니다.
만약 당신이 시작지점이 1개라면 다음과 같은 output format을 사용할 수 있습니다.

entry - Array

만약 당신이 서로간 의존성이 없는 여러개의 파일을 사용하고 싶다면 Array 형식으로 사용하면 된다.
예를 들어 “googleAnalystic.js” 파일을 HTML안에 필요로 한다면, 당신은 “bundle.js” 마지막에 붙여서 output이 되어집니다.

entry-object

만약 당신이 SPA(Single Page App)가 아니라 다중 페이지 어플리케이션을 개발한다면, entry-object를 사용하여 한번에 다중 bundle을 만들어서 사용 할 수 있습니다.
아래 설정 파일은 2개의 bundle JS파일을 생성합니다.(indexEntry.js , profileEntry.js 가 나오며 index.html, profile.html에 각각에 사용할 수 있다.)

Usage:

//profile.html
<script src=”dist/profileEntry.js”></script>

//index.html
<script src=”dist/indexEntry.js”></script>

Note : “entry”의 객체 key가 파일 이름으로 매핑된다.

entry-combination

당신은 entry Object안에 Array 타입을 사용 할 수 있다. 예를 들어 아래 설정을 보면 3가지 파일이 생성된다.(3개의 파일이 있는 vendor.js 와 index.js , profile.js가 생성된다.)

슬랙 연동 테스트 입니다.슬랙 연동 테스트 입니다.슬랙 연동 테스트 입니다.

http://www.2ality.com/2017/01/import-operator.html

As a consumer of promise, you are notified of a fulfillment or a rejection via reactions – callbacks that you register with the method then():

AS-IS

promise 소비자(consumer)로서, 당신은 then() 메서드에 등록한 콜백을 통해 성공 또는 거절 상태 알림을 받게 됩니다.

TO-BE

promise 소비자(consumer)로서, 당신은 fulfillment 혹은 rejection 이라는 반환 상태에 따라 then() 메소드에 등록한 콜백 함수로부터 알림을 받게 된다.

원문: https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-5-c70adc9cf56a#.wi73guugf

원문: https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-1-1f15e387e536#.rtwcyn91x

원본링크: https://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene

Object-Oriented JavaScript — A Deep Dive into ES6 Classes

번역예정 글입니다.

That is unfortunate, because the subroutine has no use for its own this, but it shadows the this of the surrounding method, making it inaccessible.

그것은 불행하다, 왜냐면 서브루틴은 그 자신의 this를 사용하지 못하기 때문이다. 하지만 그것은 this를 둘러싸고 있는 메서드들에 접근이 어렵게 숨긴다.

전 여기까지인거 같습니다. 좀더 디벨롭 해서 해석 바래요 ㅋㅋ

번역 다른걸로 변경
https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/?utm_source=frontendfocus&utm_medium=email

완료하셨다면 브라우저에셔 (html파일을) 엽니다.

->

완료하셨다면 브라우저에서 (html파일을) 엽니다.

• In the former case, the appropriate reaction is called as soon as the promise is settled.
• In the latter case, the promise result (fulfillment value or rejection value) is cached and handed to the appropriate reaction “immediately” (queued as a task).

AS-IS

- 전자의 경우, promise 상태가 세팅된 직후 호출됩니다.
- 후자의 경우, promise 결과(성공 또는 거절의 결과값)는 캐시 되고, 적절한 반응을 즉시 다룰 수 있게 됩니다.(task 큐와 같이), the promise result (fulfillment value or rejection value) is cached and handed to the appropriate reaction “immediately” (queued as a task).

TO-BE

- 전자(invoke then()  before promise is settled)의 경우, promise가 처리된 후 바로 적절한 반환 상태가 호출된다. 
- 후자(invoke then()  after promise is settled)의 경우, promise 결과(성공 또는 거절 값)가 캐시 되고, 적절한 반환 상태로 바로 전달된다. (task로써 큐에 쌓임)

All of these statements can end with a ; but none of them must. Some consider it a good habit to terminate each statement with a ; – that makes your code a little easier to parse, and to compress: if you remove line breaks you needn’t worry about several statements ending up unseparated on the same line.

AS-IS

위 statements는 ;와 함께 종료 할수 있습니다. 
그러나 그것들 중에 ;이 없을수도 있습니다.
;를 통해 각 statement를 종료 하게 해주는 좋은 습관에 대해 고려하십시오. 
- 당신의 코드를 조금은 쉽게 파싱하고 압축하게 만들어준다. 
만약 당신이 줄바꿈을 제거하는 경우, 같은 줄에 분리되지 않은 몇몇 statements에 대해 걱정할 필요가 없습니다.
(if you remove line breaks you needn’t worry about several statements ending up unseparated on the same line. 역자주:갑자기 이 문장이 나오는게 이해가안됌)

TO-BE

위의 모든 구문은 세미콜론으로 종료될 수 있다. 
하지만 위의 코드 모두 꼭 세미콜론을 붙일 필요는 없다. 
몇몇은 모든 구문의 종료마다 세미콜론을 써주는 것을 좋은 습관이라고 고려한다. 
그러한 습관은 당신 코드를 해석하기 쉽게 만들어주고, 쉽게 압축할 수 있게 해준다. 
(세미콜론을 사용해서 코드의 종료를 명확하게 하면) 코드에서 줄바꿈(br이나 \n)을 제거하더라도 몇몇 구문이 같은 줄에서 불완전하게 끝나는 것에 대해 걱정할 필요가 없다.

이 프로젝르는 webpack과 Babel 만 필요합니다.

->

이 프로젝트는 webpack과 Babel 만 필요합니다.

https://leanpub.com/setting-up-es6/read#sec_webpack-babel 에서 (Chapter 3.3) Browser Setup: ES6 via webpack and Babel

머하지?

원문: https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-3-1b0fd14eb1a7#.ii6um685m

ECAMScript2016 Promises

@apple77y 님이
https://github.com/FEDevelopers/es6features 을 포크 해서 translate-ko 브랜치 생성해놨습니다.

ES6 includes the following new features:

1. arrows
2. classes
3. enhanced object literals
4. template strings
5. destructuring
6. default + rest + spread
7. let + const
8. iterators + for..of
9. generators
10. unicode
11. modules
12. module loaders
13. map + set + weakmap + weakset
14. proxies
15. symbols
16. subclassable built-ins
17. promises
18. math + number + string + array + object APIs
19. binary and octal literals
20. reflect api
21. tail calls

위 21가지 챕터 중 하고싶은 것 7개씩 적어주세요. 중복되는 건 서로간에 협의해서 진행하도록 하겠습니다.
( 미참가 하고싶은신분은 미참가로 해주세요~ 부담없이 해주세요~ 저흰 항상 자율이기때문에 )

위키리스트에 넘버링 하는거 삭제 하고 없애는 방향으로 가면 좋을거 같습니다.

시리즈별로 올릴때마다 순서대로 봐야 좋고, 카테고리할때 뭉쳐서 하면좋은데

그럴때마다 넘버를 바꿔야해서 너무 귀찮습니다.

원문: http://www.2ality.com/2012/04/arrow-functions.html

http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/

AS-IS

이런 기능을 구현하기 위해선 당신은 결과를 위해 지정해 놓은 객체인(an object that is a placeholder for the result) promise 를 반환해야 합니다. 

TO-BE

이런 기능을 구현하기 위해선 promise 를 반환해야 합니다. promise는 결과를 위해 지정해놓은 객체를 의미한다.

혹은 조금 더 의역해서..

이런 기능을 구현하기 위해선 promise 를 반환해야 합니다. promise는 결과를 보장받기 위한 객체를 의미한다.

A promise is settled (the computation it represents has finished) if it is either fulfilled or rejected. A promise can only be settled once and then stays settled. Subsequent attempts to settle it have no effect.

AS-IS

promise는 성공(fulfilled)이나 거절(rejected) 중 하나로 고정됩니다.(연산이 끝났을 때) (A promise is settled (the computation it represents has finished) if it is either fulfilled or rejected.) promise 상태는 한 번만 지정되며, 그 후 상태를 유지합니다. 그 후에 상태를 바꾸려고 해도 아무 변화가 없습니다.

TO-BE

promise는 연산이 끝난 뒤 fulfilled 혹은 rejected 상태로 처리(settle)된다. promise는 한 번 처리되면 그 처리 상태로 유지된다. 

맨마지막 부분에서

그래서 함수 합성의 장점은 한계가 있으므로 이 두 개의 함수를 결함(marry)할 수 없게 되었다. 강력한 기능이지만, 너무 아쉽다.

결함(marry) -> 결합

아닐가요?

for,while`과 같은 루프

마크다운 문법 오타인것 같습니다.

https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-4-18fbe3ea9e49#.k2a094155

함수형 프로그래머가 되는 법 part4

원문: https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-2-7005682cec4a#.c8jieq3gc

http://www.nearform.com/nodecrunch/developer-initiates-io-operation-wont-believe-happens-next/

1.용어소개 에서 첫번째 예제 코드 아래 "함수는 호출될 때마다 두 가지 스코프(=문맥)를 가진다" 이후 에 "Its lexical scopes are the syntactic constructs that surround it " 문장이 빠진거 같습니다.

문서에서 tons of features는 수천 가지의 기능으로 봐도 무방할 것 같습니다.

진행하고 있는 Promise API 가 너무 길고 영어가 어렵게 되어있어

잠시 쉬어가기 위해 세미콜론 정책에 대한 짧은 글을 번역한다.

https://www.codecademy.com/blog/78