멋진 인생이 기록되도록 30분만 더 하자!: 9월 2016

2016년 9월 28일 수요일

함수형 자바스크립트 -클로저 와 자유변수

클로져

내부함수를 포함하는함수는 내부에 정의된 내용을 자유롭게 볼수있다하여 자유변수라한단다

function averageDamp(FUN){
return function(n){

return average([n,FUN(n)]);
}
}

var averageSq = averageDamp(function(n) {return n*n});
console.log(averageSq(10));

n의 값은 10이 들어가게 되니 10* 10 = 100

그리고 그 평균(10, 100) 이되니 55가 나오는게 맞군요!

러닝 언더스코어 .js 책의 목차

1장. Underscore.js 시작하기
__왜 Underscore인가
__예제로 Underscore 시작하기
____ECMAScript 5 초보 예제
____Underscore의 find를 적용한 초보 예제
____Underscore의 countBy를 적용한 초보 예제
__Underscore 핵심 함수
____Underscore의 each
____Underscore의 map과 reduce
__함수형 프로그래밍 기본
__ECMAScript 5를 대상으로 한 자바스크립트 애플리케이션에서의 유용한 패턴과 실례
____즉시 실행 함수 표현
____노출식 모듈 패턴
____자바스크립트 엄격 모드
__Underscore를 살펴보기 위한 개발 워크플로우 설정
____Node.js로 자바스크립트 개발하기
________윈도우
________맥 OS X
________리눅스
________Node.js 설치 확인
____Bower로 자바스크립트 의존성 관리하기
____자바스크립트 편집기 고르기
__Jasmine으로 자바스크립트 코드 테스트하기
____Jasmine 소개
____기본 Jasmine 인프라를 사용한 테스트 추가하기
__요약

2장. Underscore.js에서 컬렉션 사용하기
__Underscore 핵심 함수 다시 보기: each, map, reduce
____리플렉션 기술 적용하기
____this 변수 조작하기
____객체 프로퍼티에 map과 reduce 사용하기
__탐색과 필터링
____탐색하기
________Underscore의 find
________Underscore의 some
________Underscore의 findWhere
________Underscore의 contains
____필터링
________Underscore의 filter
________Underscore의 where
________Underscore의 reject와 partition
________Underscore의 every
__집계와 변환
____집계
________Underscore의 max와 min
____변환
________Underscore의 sortBy
________Underscore의 groupBy
________Underscore의 indexBy
________Underscore의 countBy
__기타 컬렉션 기반 함수들
__요약

3장. Underscore에서 배열, 객체, 함수 사용하기
__배열
____배열의 처음과 끝 추출하기
____합집합, 교집합, 관계 함수
____배열 관련 기타 함수
__객체
____Underscore의 keys
____Underscore의 values와 pairs
____Underscore의 invert와 functions
____Underscore의 pick, omit
____Underscore의 extend, clone, defaults
____Underscore의 has, property, propertyOf, matcher
____객체 간 비교와 객체에 대한 표명
____다른 객체 관련 기타 함수
__함수
____bind, bindAll, partial로 함수 합성하기
____memoize, wrap, negate, compose로 함수 합성하기
____함수의 호출 시간 및 횟수 제어하기
__유틸리티 함수
__요약

4장. Underscore.js에서의 프로그래밍 패러다임
__객체지향 프로그래밍 패러다임
____객체 리터럴로 상속하기
____객체 생성자로 상속하기
____Underscore를 사용한 객체지향 프로그래밍 패러다임
________원본 고객 데이터로 클래스 사용하기
________Underscore로 생성자 검증하기
__함수형 프로그래밍 패러다임
__함수형 프로그래밍 스타일로 전환하기
__Underscore를 사용한 함수형 프로그래밍
__요약

5장. 서버의 브라우저에서 데이터베이스를 이용한 Underscore.js 사용하기
__브라우저에서 Underscore 사용하기
__부트스트랩을 사용해 향상된 예제 결과 얻기
____Underscore 템플릿을 사용해 더 나은 HTML 마크업 사용하기
__Node.js를 가지고 서버에서 Underscore 사용하기
____Node.js를 가지고 자바스크립트 실행하기
____Node.js 모듈 사용하기
____모듈 위치 관련
____npm 패키지 만들기
____자바스크립트 코드를 Node.js 모듈로 변경하기
____Node.js로 테스트하기
__MongoDB와 함께 Underscore 사용하기
____MongoDB 설치하고 설정하기
________윈도우에서 MongoDB 설치하기
________우분투 리눅스에서 MongoDB 설치하기
________맥 OS X에서 MongoDB 설치하기
________MongoDB 설정하고 동작시키기
____MongoDB 클라이언트와 Underscore를 사용해 초기 데이터 만들기
____Node.js를 사용한 비동기 프로그래밍
____MongoDB Node.js 드라이버를 사용해 데이터 접근하기
__PostgreSQL을 가지고 Underscore 사용하기
____PostgreSQL 설치하고 설정하기
________윈도우에서 PostgreSQL 설치하기
________우분투 리눅스에서 PostgreSQL 설치하기
________맥 OS X에서 PostgreSQL 설치하기
____기본 데이터베이스 명령을 가지고 psql 사용하기
____PostgreSQL 데이터 타입
________SQL 타입
________jsonb 타입
____plv8을 가지고 PostgreSQL 사용하기
____plv8과 Underscore를 사용해 데이터 만들기
__요약

6장. 관련된 Underscore.js 라이브러리와 ECMAScript 표준
__Underscore-contrib 라이브러리 사용하기
____Underscore-contrib 기능 소개
____Underscore-contrib의 예
__lodash 라이브러리 사용
____lodash 기능 소개
____Underscore에서 lodash로의 프로젝트 마이그레이션
__Underscore와 자바스크립트 표준
____ECMAScript 5.1(ES5)
____ECMAScript 2015(ES6)
________배열: 새로운 기능
________그 외 중요한 새로운 기능
________현재 ECMAScript 2015(ES6)와 트랜스파일러
________ECMAScript 2015(ES6) 예제
__요약

7장. Underscore.js 빌드 자동화와 코드 재사용성 살펴보기
__Gulp를 이용한 빌드 자동화
__클라이언트와 서버 간의 Underscore 기반 코드 재사용
____Browserify를 이용한 클라이언트 코드 패키징을 위한 CommonJS 모듈
____Browserify를 이용한 브라우저에서의 CommonJS 모듈 테스팅
____Browerify와 Gulp의 통합
__Browserify의 ECMAScript 2015(ES6) 지원
__요약

Book Details
Publisher:	Packt Publishing
By:	Alex Pop
ISBN:	978-1-78439-381-6
Year:	2015
Pages:	224
Language:	English
File size:	11 MB
File format:	PDF

2016년 9월 26일 월요일

functional javascript를 읽으며...

1장 함수형 프로그래밍이란 이런것이다.

함수형태로 '존재'의 추상화를 정의한다.
기존 함수를 이용해서 '참 거짓' 의 추상화를 정의한다.
위 함수를 다른 함수의 파라미터로 제공해서 어떤 동작을 하도록 한다.

코딩트레이닝 2-3

코딩트레이닝 2-2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript">

var name, leng_name,str;

//입력

name = prompt('이름을 입력해주세요');

//처리
leng_name = name.length;

str = '<div > <h2>What is the input string? <p id="display_name">'+ name
+'<br> '+ name + ' has</p></h2> <p id="display_name_count">' +leng_name + ' </p>charaters </div>';

//출력

$(document).ready(function(){

//처리

//텍스트 박스의 내용이 입력되었을때
$('#name').change(function(){

//디브 - h2 - p의 내용이 변경되어야 한다. 이름 / 이름의 수
name = $('#name').val();
leng_name = name.length;

$('#display_name').text(name);
$('#display_name_count').text(leng_name);

})

//출력

$('#foo').append(str);
});

</script>
</head>
<body>

<div id="foo">
<input type="text" id="name">
</div>

</body>
</html>

2016년 9월 25일 일요일

코딩트레이닝 2-1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script>

//입력
// var name = prompt('input your name');

//처리
// var str = "<h2>What is your name? Hello "+name+ ", nice to meet you!<h2>";

//랜덤 배열
var textArray = [
'호 키 포키! ',
'아빠 상어 뚜루뚜뚜루',
'뚜뚜뚜와 뚜뚜뚜뚜와뚜와!'
]
var randomNumber = Math.floor(Math.random() *textArray.length);

//출력
$(document).ready(function(){

$('#foo').append('<h2>What is your name? <br> Hello '+ prompt('input your name')+ ', nice to meet you!<h2> <br>'+textArray[randomNumber]);
});

</script>
</head>
<body>
<div id="foo">

</div>

</body>
</html>

이름을 입력받는것은 변수없이 구현

코딩트레이닝 첫번째 실습 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
</script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript">

function lalala(){
return "lalala";
}

/*
팁 계산기

이 프로그램이 받는것은 가격 price 팁비율 tip_ratio

주 기능은

팁을 계산하여 팁과 전체 가격을 표시해 주는것이다.

*/

//출력

window.onload = function(){

var inputvalues
var inputArr

var price
var ratio

function promptVal(){

inputvalues = prompt('가격과 할인률을 ,로 구분하여 입력하여 주세요','ex) 15,11');
inputArr = inputvalues.split(',');

//음수값일경우 절대값으로 변환
if(inputArr[0]< 0) {
console.log(inputArr[0]);
inputArr[0] = Math.abs(inputArr[0]);
}

price = parseInt(inputArr[0]);
price.toFixed(2);

console.log(isNaN(price), typeof(ratio));

ratio = parseInt(inputArr[1]);
}

while(isNaN(price)){
promptVal();
}

var tip,total;

function calcTip(price, ratio){
tip = price * (ratio/100);
tip = parseFloat(tip.toFixed(2));
total = parseFloat(parseFloat(price) + tip);
}

calcTip(price, ratio);
refreshView();

$('#price').focusout(function(){
price = $('#price').val();
calcTip(price, ratio);
refreshView();

});

$('#ratio').change(function(){
ratio = $('#ratio').val();
calcTip(price, ratio);
refreshView();

});

$('#tip').focusout(function(){
tip = $('#tip').val();
calcTip(price, ratio);
refreshView();

});

$('#total').focusout(function(){
total = $('#total').val();
calcTip(price, ratio);
refreshView();

});

function refreshView(){
//가격
$('#table1 tr:nth-child(1) td:nth-child(2) input').val(price);
//비율
$('#table1 tr:nth-child(2) td:nth-child(2) input').val(ratio);
//팁
$('#table1 tr:nth-child(3) td:nth-child(2) input').val(tip);
//토탈
$('#table1 tr:nth-child(4) td:nth-child(2) input').val(total);
}
}
</script>
<title></title>
</head>
<body>

<table border=1 id="table1">

<tr>
<td>가격</td>
<td ><input type="text" id="price"></td>
</tr>
<tr>
<td>팁 비율</td>
<td ><input type="range" min="0" max="20" id="ratio" /></td>
</tr>
<tr>
<td>팁 </td>
<td ><input type="text" id="tip"></td>
</tr>
<tr>
<td>합산가격</td>
<td ><input type="text" id="total"></td>
</tr>

</table>
</body>
</html>

-- index.html

자바스크립트로 연습해 보았습니다 ^^

2016년 9월 7일 수요일

음 오랜만에 다시 파이썬 예제를 하는데...

python manage.py makemigration blog

이런식으로 마이그레이션하려고 하는데

"Migration %s in app %s has no Migration class" % (migration_name, app_config.label)
django.db.migrations.loader.BadMigrationError: Migration settings in app blog has no Migration class

이런 처음보는에러를 뱉는다

이럴땐 프로젝트 루트 폴더에서 해당 blog 폴더 밑의 migrations 폴더를 south_migration으로변경

mv migrations/ south_migrations/

해주면 잘된다.

대체 왜 south야?

2016년 9월 6일 화요일

web development with node and express 셋째날

10장 미들웨어

미들웨어(개념적) 애플리케이션에 대한 HTTP요청에서 동작하는 기능을 캡슐화 하는방법
현실적으로 말하면 3가지 매개변수를 받는 함수 요청, 응답,next

에러,요청,응답,넥스트

194페이지 까지 읽어봤는데

예상과는 다르다는걸 느꼈다. 읽을수록 자바스크립트 문법에대해 내가 모르는게 많다는걸 느낀다.

객체지향 자바스크립트의 원리
javascript patterns

빠른 시일 내에 이 두 권의 책을 읽어봐야겠다.

5장의 hood-river 테스트 쪽에서 자꾸 Fatal unspecified error 가 나서

직접 테스트를 해보았다.

브라우저에 직접 해당주소를 넣고 엔터를 때리고나서 링크를 손수 클릭해주니

hidden field에 정확히 원하는 값이 들어가있다.

그런데 왜 테스트에서는 정의하지 않은 에러가 나올까?

그래서 console.log(browser.field('referrer'))로 해당 테스트스윗? 에다가 찍어봤더니...

   { _childNodes: { '0': [Object], '1': [Object] },
     _ownerDocument: [Circular],
     _attributes:
      { _ownerDocument: '#document',
        _parentNode: [Circular],
        _readonly: false,
        '_$ns_to_attrs': {},
        '_$name_to_attrs': {},
        length: 0 },
     _nodeName: '#document',
     _childrenList: null,
     _version: 341,
     _nodeValue: null,
     _parentNode: null,
     _memoizedQueries: { '2': [Object], '11': [Object], '12': [Object] },
     _readonly: false,
     _tagName: '#document',
     _contentType: 'text/html',
     _doctype:
      { _childNodes: {},
        _ownerDocument: [Circular],
        _attributes: [Object],
        _nodeName: 'html',
        _childrenList: null,
        _version: 0,
        _nodeValue: null,
        _parentNode: [Circular],
        _memoizedQueries: {},
        _readonly: false,
        _name: 'html',
        _tagName: 'html',
        _entities: [Object],
        _notations: [Object],
        _publicId: '',
        _systemId: '',
        _fullDT: '<!doctype html>',
        toString: [Function] },
     _implementation: { _ownerDocument: undefined, _features: [Object] },
     _documentElement:
      { _ownerDocument: [Circular],
        _childNodes: [Object],
        _attributes: [Object],
        _nodeName: 'html',
        _childrenList: null,
        _version: 12,
        _nodeValue: null,
        _parentNode: [Circular],
        _memoizedQueries: {},
        _readonly: false,
        _tagName: 'html',
        _namespaceURI: 'http://www.w3.org/1999/xhtml',
        _created: true,
        _localName: 'html',
        _attached: true,
        _attachedToDocument: true,
        _style: [Object],
        _ignoreValueOfStyleAttr: false },
     _ids: { fieldName: [Object] },
     _attached: true,
     _referrer: 'http://localhost:3000/tours/hood-river',
     _cookie: undefined,
     _cookieDomain: '127.0.0.1',
     _URL: '/',
     _documentRoot: '/',
     _queue: { paused: false, tail: [Object] },
     readyState: 'complete',
     _listeners: { load: [Object], DOMContentLoaded: [Object] },
     _styleSheets:
      { '0': [Object],
        '1': [Object],
        '2': [Object],
        '3': [Object],
        '4': [Object],
        '5': [Object],
        '6': [Object],
        _length: 7 },
     _localStorage: { _area: [Object] },
     _sessionStorage: { _area: [Object] },
     _html5shiv: 1,
     _nwmatcher:
      { ACCEPT_NODE: 'r[r.length]=c[k];if(f&&false===f(c[k]))break main;else continue main;',
        byId: [Function],
        match: [Function],
        first: [Function],
        select: [Function],
        compile: [Function],
        contains: [Function],
        configure: [Function],
        getAttribute: [Function],
        hasAttribute: [Function],
        setCache: [Function],
        shortcuts: [Function],
        loadResults: [Function],
        saveResults: [Function],
        emit: [Function],
        Config: [Object],
        Snapshot: [Object],
        Operators: [Object],
        Selectors: {},
        Version: 'nwmatcher-1.3.8',
        registerOperator: [Function],
        registerSelector: [Function] } },
_childNodes: {},
_attributes:
   { '0':
      { _childNodes: [Object],
        _ownerDocument: [Object],
        _attributes: [Object],
        _nodeName: 'type',
        _childrenList: null,
        _version: 1,
        _nodeValue: '',
        _parentNode: [Circular],
        _memoizedQueries: {},
        _readonly: false,
        _name: 'type',
        _specified: true,
        _tagName: 'type',
        _namespaceURI: null,
        _localName: 'type',
        _prefix: null,
        _ownerElement: [Circular],
        _created: true },
     '1':
      { _childNodes: [Object],
        _ownerDocument: [Object],
        _attributes: [Object],
        _nodeName: 'name',
        _childrenList: null,
        _version: 1,
        _nodeValue: 'referrer',
        _parentNode: [Circular],
        _memoizedQueries: {},
        _readonly: false,
        _name: 'name',
        _specified: true,
        _tagName: 'name',
        _namespaceURI: null,
        _localName: 'name',
        _prefix: null,
        _ownerElement: [Circular],
        _created: true },
     _ownerDocument:
      { _childNodes: [Object],
        _ownerDocument: [Circular],
        _attributes: [Object],
        _nodeName: '#document',
        _childrenList: null,
        _version: 341,
        _nodeValue: null,
        _parentNode: null,
        _memoizedQueries: [Object],
        _readonly: false,
        _tagName: '#document',
        _contentType: 'text/html',
        _doctype: [Object],
        _implementation: [Object],
        _documentElement: [Object],
        _ids: [Object],
        _attached: true,
        _referrer: 'http://localhost:3000/tours/hood-river',
        _cookie: undefined,
        _cookieDomain: '127.0.0.1',
        _URL: '/',
        _documentRoot: '/',
        _queue: [Object],
        readyState: 'complete',
        _listeners: [Object],
        _styleSheets: [Object],
        _localStorage: [Object],
        _sessionStorage: [Object],
        _html5shiv: 1,
        _nwmatcher: [Object] },
     _parentNode: [Circular],
     _readonly: false,
     '_$ns_to_attrs': { null: [Object] },
     '_$name_to_attrs': { type: [Object], name: [Object] },
     length: 2,
     type:
      { _childNodes: [Object],
        _ownerDocument: [Object],
        _attributes: [Object],
        _nodeName: 'type',
        _childrenList: null,
        _version: 1,
        _nodeValue: '',
        _parentNode: [Circular],
        _memoizedQueries: {},
        _readonly: false,
        _name: 'type',
        _specified: true,
        _tagName: 'type',
        _namespaceURI: null,
        _localName: 'type',
        _prefix: null,
        _ownerElement: [Circular],
        _created: true },
     name:
      { _childNodes: [Object],
        _ownerDocument: [Object],
        _attributes: [Object],
        _nodeName: 'name',
        _childrenList: null,
        _version: 1,
        _nodeValue: 'referrer',
        _parentNode: [Circular],
        _memoizedQueries: {},
        _readonly: false,
        _name: 'name',
        _specified: true,
        _tagName: 'name',
        _namespaceURI: null,
        _localName: 'name',
        _prefix: null,
        _ownerElement: [Circular],
        _created: true } },
_nodeName: 'input',
_childrenList: null,
_version: 2,
_nodeValue: null,
_parentNode:
   { _ownerDocument:
      { _childNodes: [Object],
        _ownerDocument: [Circular],
        _attributes: [Object],
        _nodeName: '#document',
        _childrenList: null,
        _version: 341,
        _nodeValue: null,
        _parentNode: null,
        _memoizedQueries: [Object],
        _readonly: false,
        _tagName: '#document',
        _contentType: 'text/html',
        _doctype: [Object],
        _implementation: [Object],
        _documentElement: [Object],
        _ids: [Object],
        _attached: true,
        _referrer: 'http://localhost:3000/tours/hood-river',
        _cookie: undefined,
        _cookieDomain: '127.0.0.1',
        _URL: '/',
        _documentRoot: '/',
        _queue: [Object],
        readyState: 'complete',
        _listeners: [Object],
        _styleSheets: [Object],
        _localStorage: [Object],
        _sessionStorage: [Object],
        _html5shiv: 1,
        _nwmatcher: [Object] },
     _childNodes:
      { '0': [Object],
        '1': [Circular],
        '2': [Object],
        '3': [Object],
        '4': [Object],
        '5': [Object],
        '6': [Object],
        '7': [Object],
        '8': [Object],
        '9': [Object],
        '10': [Object],
        '11': [Object],
        '12': [Object],
        '13': [Object],
        '14': [Object],
        '15': [Object],
        '16': [Object] },
     _attributes:
      { _ownerDocument: [Object],
        _parentNode: [Circular],
        _readonly: false,
        '_$ns_to_attrs': {},
        '_$name_to_attrs': {},
        length: 0 },
     _nodeName: 'form',
     _childrenList: null,
     _version: 17,
     _nodeValue: null,
     _parentNode:
      { _ownerDocument: [Object],
        _childNodes: [Object],
        _attributes: [Object],
        _nodeName: 'div',
        _childrenList: null,
        _version: 16,
        _nodeValue: null,
        _parentNode: [Object],
        _memoizedQueries: {},
        _readonly: false,
        _tagName: 'div',
        _namespaceURI: 'http://www.w3.org/1999/xhtml',
        _created: true,
        _localName: 'div',
        _attached: true,
        _attachedToDocument: true },
     _memoizedQueries: {},
     _readonly: false,
     _tagName: 'form',
     _namespaceURI: 'http://www.w3.org/1999/xhtml',
     _created: true,
     _localName: 'form',
     _attached: true,
     _attachedToDocument: true },
_memoizedQueries: {},
_readonly: false,
_tagName: 'input',
_namespaceURI: 'http://www.w3.org/1999/xhtml',
_created: true,
_localName: 'input',
_attached: true,
_attachedToDocument: true }

객체 하나 던져주시는데 documentElement밑에 _refferrer에 해당 내용이 있다

그런데 이걸 어찌꺼내야 하는지...

zombie 버전이 다른탓인지 문법이 다르다 한참을 고생해도 뭔가 해결책이 안나온다.

197페이지는 그대로 따라하면 missing semicolon 이라는 경고가 나오면서 무한루프에 들어간다

;;;;

고난이다.

2016년 9월 1일 목요일

자바스크립트를 깨우치다. 첫날

원시값은 "값으로 참조" 되지 않고 다른 여러 값으로 구성된합성체를 표현할 수 없는 반면,
복합객체는 "값으로 참조"되며 다른 값을 포함하거나 캡슐화할 수 있다.

new키워드를 사용해서 객체를 만들면 복합객체
new를 사용하지 않고 예를들어
let primitiveNumber2 = Number('22') 이런식으로 변수를 선언하면 원시값을 갖게된다.

프로 리엑트를 읽다가 반납기간이 되어 책을 반납하고 새로운 책을 대여했습니다.

web development with node & express

자바스크립트개발이 어렵지만 다시 해보고싶어 읽게되었습니다.

천천히 한권 한권 읽다보면 지식이 되고 피가되고 살이될거라 믿습니다.

p73

페이지 테스트에서

mocha,
chai -> assertion
zombie -> 단순한 교차페이지 테스트

page 78에서 교차 페이지 테스트를 하다보면

ReferenceError: Set is not defined 라는 에러를 만나게 된다

node 0.10 ~ 좀비 4점대 버전에서 지원 안하는듯하다

좀비 버전 3.1.0으로 재설치하면 테스트 할수 있다.
관련 :http://stackoverflow.com/questions/29662551/installing-zombie-js-error-referenceerror-set-is-not-defined-what-am-i-doing

프로 리액트 2일차

속성은 컴포넌트의 구성정보에 해당한다. 속성은 상위 컴포넌트로부터 받으며, 이를 받은 컴포넌트 내에서는 변경할수 없다.

상태는 컴포넌트의 생성자에 정의된 기본값에서 시작해(일반적으로 사용자 이벤트에 의해) 여러차례 변경될 수 있다. 컴포넌트는 자신의 상태를 내부적으로 관리한다. 또한 상태가 변경될 때마다 컴포넌트가 다시 렌더링 된다.

오늘은 3장 부터 5장까지 읽어볼 예정이다.

페이지 94

let originalTicket={ company: 'Dalta', flightNo: '0990', departure: { airport: 'LAS', time: '2016-08-21T10:00:00.000Z'}, arrival:{ airport: 'MIA', time: '2016-08-21T14:41:10.000Z'}, codeshare: [ {company:'GL', flightNo:'9840'}, {company:'TM',flightNo:'5010'} ] }

let new Ticket = Object.assign({}, originalTicket, {flightNo: '5690'})

2객체를 만들었다.

그리고

2번째 객체의

newTicket.arrival.airport="MCO"

arrival의 객체 내부값을 변경했더니

1번째, 2번째 객체의 내용이 변경되어버렸다. 이것은 자바스크립트의 기본동작의 문제이므로
리액트의 불변성도우미를 사용하면 해결할수 있다.

110페이지 부근

소스코드를 전부따라서 입력했는데

bundle.js:22060 Uncaught TypeError: Cannot read property 'bind' of undefined

정의되지않은 속성(바인드)을 읽을수 없다.

해결 )

checkInpuKeyPress(evt){
    if(evt.key === 'Enter'){
      this.props.taskCallbacks.add(this.props.cardId, evt.target.value);
      evt.target.value='';
    }
}
checkList.js 의 엔터키 체크하는 부분에 오타가 있었다.

bundle.js 에러난 부분을 유심히 살펴보면 디버깅 시간을 줄일수 있다.

멋진 인생이 기록되도록 30분만 더 하자!