태그 보관물: javascript

(Javascript | mithril) Todo 앱 – 예제

mithril 관련 글

  1. mithril 앱의 기본 구성 및 m()
  2. m.render – 가상 DOM 렌더링하기
  3. m.mountmithril을 이용한 양방향 바인딩 & 템플릿 렌더링
  4. m.prop 양방향 바인딩을 위한 데이터 래퍼
  5. m.withAttr 양방향 바인딩을 위한 이벤트 매퍼
  6. m.componentmithril 앱을 컴포넌트화하기
  7. * Todo
  8. m.route – 단일페이지 애플리케이션 및 라우팅 규칙
  9. m.request – 서버 API와 통신하기

간단한 TODO앱을 작성해보도록하자. ToDo 앱은 MVC 패턴으로 구성할 수 있는 가장 간단한 앱의 형태이다. 이 앱을 만들기 위한 기본적인 스케치는 다음과 같다.

  1. 텍스트를 입력할 수 있는 input 박스와 버튼이 있다. 텍스트에 할일을 입력하고 버튼을 클릭하면 아래쪽으로 새로운 할일이 목록에 추가된다.
  2. 목록의 각각의 할일은 체크 박스를 가지고 있다. 완료한 일은 체크 박스에 체크하여 완료로 표시한다. 완료 상태가 되면 해당 할일은 취소선을 적용하여 표시한다.
    계속 읽기

자바스크립트 배열의 정렬

javascript에서 배열의 sort() 메소드는 좀 좌절스러운 것이…

a = [0 to 10].map -> parseInt Math.random! * 100
# [ 74, 7, 45, 41, 43, 85, 84, 66, 41, 91 ]
a.sort!
# [ 41, 41, 43, 45, 66, 7, 74, 84, 85, 91 ]

숫자로 된 배열을 정렬할 때도 사전식으로 비교하는 통탄할…. sort 메소드는 비교 함수를 받긴하므로, 정수 크기별로 비교하려면, 다음과 같이 각 값을 정수형으로 계산한 결과를 던져주는 비교함수를 넣어준다. (-첫째인자 + 둘째인자로 코딩하면 -첫째인자에 의해서 자동으로 정수형으로 인식함.

a.sort -> +&0 -&1
# [ 7, 41, 41, 43, 45, 66, 74, 84, 85, 91 ]