Skip to content

Commit

Permalink
리뷰 : RxJS가 해결하려고했던 문제3 - 로직 오류
Browse files Browse the repository at this point in the history 
- 예제소스의 indent를 수정하였습니다.
- First-class object와 First-class citizens은 엄밀히 말하자면 조금 다릅니다.
  - First-class citizens 으로 부터 First-class object가 유래되었습니다.
  • Loading branch information
@weumj
weumj authored Aug 11, 2017
1 parent 8bef7a7 commit 42f136c
Showing 1 changed file with 38 additions and 38 deletions.
76 changes: 38 additions & 38 deletions docs/part1/04.logic.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,41 +25,41 @@ DB로부터 조회한 사용자 목록 데이터가 입력값이라면 이 값
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
const jsonData = JSON.parse(xhr.responseText);
const jsonData = JSON.parse(xhr.responseText);
document.getElementById("users").innerHTML = process(jsonData);
}
}
};
xhr.open("GET", "http://swapi.co/api/people/");
xhr.send();

// 데이터를 처리하는 함수
function process(people) {
const html = [];
const html = [];
for (const user of people.results) {
if (/male|female/.test(user.gender)) {
let broca;
let bmi;
let broca;
let bmi;
if (user.gender == "male") {
broca = (user.height - 100 * 0.9).toFixed(2);
bmi = (user.height / 100 * user.height / 100 * 22).toFixed(2);
} else {
broca = (user.height - 100 * 0.9).toFixed(2);
bmi = (user.height / 100 * user.height / 100 * 21).toFixed(2);
}
const obesityUsingBroca = ((user.mass - broca) / broca * 100).toFixed(2);
const obesityUsingBmi = ((user.mass - bmi) / bmi * 100).toFixed(2);
broca = (user.height - 100 * 0.9).toFixed(2);
bmi = (user.height / 100 * user.height / 100 * 22).toFixed(2);
} else {
broca = (user.height - 100 * 0.9).toFixed(2);
bmi = (user.height / 100 * user.height / 100 * 21).toFixed(2);
}
const obesityUsingBroca = ((user.mass - broca) / broca * 100).toFixed(2);
const obesityUsingBmi = ((user.mass - bmi) / bmi * 100).toFixed(2);

html.push(`<li class='card'>
<dl>
<dt>${user.name} <i class="fa fa-${user.gender}"></i></dt>
<dd><span>키 : </span><span>${user.height} cm</span></dd>
<dd><span>몸무게: </span><span>${user.mass} kg</span></dd>
<dd><span>BROCA 표준체중 : </span><span>${broca} kg</span></dd>
<dd><span>BROCA 비만도 : ${obesityUsingBroca}</span></dd>
<dd><span>BMI 표준체중 : </span><span>${bmi} kg</span></dd>
<dd><span>BMI 비만도 : ${obesityUsingBmi}</span></dd>
</dl>
</li>`);
html.push(`<li class='card'>
<dl>
<dt>${user.name} <i class="fa fa-${user.gender}"></i></dt>
<dd><span>키 : </span><span>${user.height} cm</span></dd>
<dd><span>몸무게: </span><span>${user.mass} kg</span></dd>
<dd><span>BROCA 표준체중 : </span><span>${broca} kg</span></dd>
<dd><span>BROCA 비만도 : ${obesityUsingBroca}</span></dd>
<dd><span>BMI 표준체중 : </span><span>${bmi} kg</span></dd>
<dd><span>BMI 비만도 : ${obesityUsingBmi}</span></dd>
</dl>
</li>`);
}
}
return html.join("");
Expand Down Expand Up @@ -99,7 +99,7 @@ function process(people) {
이렇게 함으로써 로직의 의미를 더욱 명확히 할 수 있으며 재사용성을 더욱 높일 수 있다.

> 자바스크립트 함수는 일급객체이다.
일급 객체(First-class citizens)는 다음과 같은 특성을 가지고 있다.
일급 객체(First-class object)는 다음과 같은 특성을 가지고 있다.
> - 변수 혹은 데이터 구조에 저장할 수 있다
> ```js
> var savedFunction = function() {};
Expand Down Expand Up @@ -172,15 +172,15 @@ function makeHtml(user) {
logic, makeHtml함수를 이용하면 다음과 같이 process 함수를 작성할 수 있다.
```js
function process(people) {
const html = [];
const html = [];
for (const user of people.results) {
if (/male|female/.test(user.gender)) {
const result = logic(user.height, user.mass, user.gender);
Object.assign(user, result);
html.push(makeHtml(user));
const result = logic(user.height, user.mass, user.gender);
Object.assign(user, result);
html.push(makeHtml(user));
}
}
return html.join("");
return html.join("");
}
```
logic, makeHtml 함수를 만듦으로서 우리는 핵심 로직을 작성는데 집중할 수 있게 되었다.
Expand All @@ -195,11 +195,11 @@ logic, makeHtml 함수를 만듦으로서 우리는 핵심 로직을 작성는

```js
function process(people) {
return people.results
.filter(user => /male|female/.test(user.gender))
return people.results
.filter(user => /male|female/.test(user.gender))
.map(user => Object.assign(
user,
logic(user.height, user.mass, user.gender)
user,
logic(user.height, user.mass, user.gender)
))
.reduce((acc, user) => {
acc.push(makeHtml(user));
Expand All @@ -217,11 +217,11 @@ if문은 filter로 변환하고, 값을 변환해야하는 경우에는 map을
> - 다른 함수를 인자로 받거나 그 결과로 함수를 반환하는 함수.
> 출처: wikipedia https://en.wikipedia.org/wiki/Higher-order_function
> - 고차 함수는 변경되는 주요 부분을 함수로 제공함으로서 동일한 패턴 내에 존재하는 문제를 손쉽게 해결할 수 있는 고급 프로그래밍 기법이다.
> - 고차 함수를 이용하면 함수의 합성, 변형과 같은 작업을 손쉽게 할수 있다. 더불어 Currying과 Memorization과 기법도 사용할 수 있다.
> - 고차 함수를 이용하면 함수의 합성, 변형과 같은 작업을 손쉽게 할수 있다. 더불어 Currying, Memoization과 같은 기법도 사용할 수 있다.
> ```js
> const twice = (f, v) => f(f(v));
> const f = v => v + 3;
> console.log(twice(f, 7)); // 13
> const fn = v => v + 3;
> console.log(twice(fn, 7)); // 13
> ```
## RxJS는 어떻게 개선하였나?
Expand All @@ -237,7 +237,7 @@ ES5 Array의 고차함수들과 RxJS의 Observable 모두 `Immutable한 객체
> 생성 후에도 상태를 변경할 수 있는 객체를 말한다.
> - 자바스립트에서는 참조로 넘길수 있는 Object, Array가 여기에 해당한다.
>
> ES5 Array 고차함수의 반환값인 Array는 변경가능한 가변객체이지만 고차함수를 호출할때마다 새로 객체를 만들기 때문에 기존 객체의 상태를 변경하지 못한다. 따라서 `Immutable한 형태`라고 이야기할 수 있다.
> ES5 Array 고차함수의 반환값인 Array는 가변객체이지만 고차함수를 호출할때마다 새로 객체를 만들기 때문에 기존 객체의 상태를 변경하지 못한다. 따라서 `Immutable한 형태`라고 이야기할 수 있다.
ES5 Array의 고차함수들이 반환값으로 새로운 Array 객체를 반환하여 각각에 영향을 미치지 않도록 하는 것과 같이 RxJS의 operator는 새로운 Observable을 반환함으로써 Array의 고차함수와 같은 효과를 낸다.
Expand Down

0 comments on commit 42f136c

Please sign in to comment.