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

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 에러난 부분을 유심히 살펴보면 디버깅 시간을 줄일수 있다.