빵 입니다.

method-override HTTP 요청방식 중 GET/POST를 제외한 것들 PUT, DELETE 등을 사용하려면 필요한 패키지 HTTP은 GET과 POST만 제공한다. PUT, DELETE 등을 가상으로 만들어 사용하게 만든다. _method 로 쿼리를 넘겨주어 해당 요청방식을 사용하게 한다. var methodOverride = require('method-override'); app.use(methodOverride('_method'));

Reflow 화면에서 요소를 배치하기 위해 브라우저에서 사용하는 프로세스를 Reflow라고 한다. Reflow 되는 상황 - DOM 요소를 조작 - 기하학에 대한 CSS 규칙이 변경 - 브라우저 크기가 조정 - 대상 요소를 기반으로 스타일을 다시 계산해야하는 경우 각 요소의 하위 항목, 상위 항목 및 DOM에 표시된 요소에 대해 실행 Repaint redraw라고도하는 repaint 레이아웃이 아닌 스타일을 업데이트해야 할 때 사용하는 프로세스 위치, 너비, 높이와 관련이없는 스타일로 color, background 등을 조작

폴더 구조 ├── app.js └── views ├── layout │ ├── inc │ │ ├── header.hbs │ │ └── footet.hbs │ └── layout.hbs └── partials └── list.hbs layout.hbs {{> header }} {{> left }} {{{body}}} {{> footer }} npmjs => express-handlebars에 나오는 readme에 나오는대로 추가했다. handlebars 템플릿 사용을 위해 app.js configuration 을 추가했다. var express = require('express'); var app = express(); var exphbs = require('express-handlebars'); app...

Mysql을 쓸 땐, 자동으로 컬럼의 숫자 값 증가하게 하기 위해 auto_increment 를 유용하게 사용했다. CREATE TABLE users ( id INT NOT NULL AUTO_INCREMENT, name CHAR(30) NOT NULL, PRIMARY KEY (id) ); MongoDB에는 같은 기능이 없다. 그래서 함수를 만들어 따로 구현해주어야 한다. ...더보기 MongoDB에서 auto-increment를 제공하지 않는 이유 같은 이유 MongoDB에서 _id 필드나 다른 어떤 필드를 위한 auto-increment 패턴을 사용할 필요가 없다. auto-increment 패턴을 사용하면 데이터베이스에 많은 documents가 있을 경우 확장성이 떨어진다. 기본값인 ObjectId ..

1. MongDB 설치하기 MongoDB 공식 홈페이지의 다운로드 페이지에서 설치 프로그램(MongoDB Community Edition)을 다운로드한다. 아래의 경로에 설치된다. C:\Program Files\MongoDB\Server\4.0\bin\ ※ ↑ 해당 버전에서 Compass(MongoDB GUI)를 설치할 경우, 제대로 설치가 완료되지 않아, 체크박스를 풀고 설치함. ...더보기 MongoDB를 설치하기 위해 여러 글들을 보았다. MySQL이나 MSSQL과 달리 윈도우 서비스 등록을 수동을 해주어야하고, 환경 설정 파일을 만들어 주어야한다고 명시되어 있었다. 하지만 MongoDB 4.0부터 하지 않아도 된다. ※ 윈도우 서비스 등록하기 ===> MongoDB 4.0부터는 설치하는 동안 Wi..

data-*속성은 HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었다. data-*속성은 표준이 아닌 속성이나 추가적인 DOM 속성을 조작 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해준다. data-*속성은 사용자가 직접 data- 로 시작하는 속성을 만들 수 있다. data- 뒤에 원하는 이름을 지정하고 사용하면 된다. 안녕하세요. data-*속성 하나로 javascript, css에서 모두 접근할 수 있다. javascript에서 접근하기 .dataset 속성을 통해 data-*속성에 접근이 가능하다. var greeting = document.getElementById('greeting'); arti..

기능 정의Todo 입력Todo 수정Todo 삭제Todo Total 갯수 체크Todo 완료 갯수 체크Todo 미완료 갯수 체크 ES2015 버전에 class가 도입되었다.이름은 클래스(Class)이지만나 다른 OOP 언어의 클래스와는 다르다.자바스크립트의 class 는 함수의 prototype을 기반으로 동작한다.그렇지만 함수로 작성하기에 번거로운 문법적 요소들이 많은 부분 개선되었다. 함수에서 함수 자체가 new 연산자와 결합했을때 생성자 역할을 하지만, class는 명시적인 constructor가 존재한다.함수로 상속을 구현시 상위 함수의 prototype 을 직접 연결해줘야 하지만, class 는 extends 를 사용함으로써 보다 편리하게 상속을 지원한다.클래스에서 인스턴스를 생성하려면 반드시 ne..

기능 정의Todo 입력Todo 수정Todo 삭제Todo Total 갯수 체크Todo 완료 갯수 체크Todo 미완료 갯수 체크 자바스크립트는 프로토타입(Prototype) 기반의 언어라고 한다.자바스크립트는 원형 객체를 복사하여 새로운 객체를 생성한다.프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다. 자바스크립트에서 프로토타입은 두 가지로 해석된다.1. 객체 멤버인 __proto__ 속성이 참조하는 숨은 링크어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 것으로 객체원형이 어떤 객체인지 가리키는 연결이다.prototype에 대한 link는 상위에서 물려받은 객체의 프로토타입에 대한 정보이다.빈객체의 원형은 자바스크립트의 최상위 객체인 Object이다. 2. 프로토타입 객체..

기능 정의Todo 입력Todo 수정Todo 삭제Todo Total 갯수 체크Todo 완료 갯수 체크Todo 미완료 갯수 체크 객체 형식으로 만들어서 객체의 메서드만 실행하면 내부적으로 모든 이벤트가 바인딩 되고, 실행하도록 만들었다. handlebars.js를 사용하여 html을 템플릿으로 빼서 사용하였다. 정말 필요한 부분만 변수에 담고, 가능한 event 객체를 이용해 이벤트를 코딩했다. Object.assign을 사용해 템플릿에, 이벤트에 따라 항상 변화하는 갯수 값을 바인딩했다. 새로운 메서드들을 사용하니 코드의 양과 중복된 코드가 확연히 줄어들었다. 가독성도 높아졌다. HTML Todo 추가 CSS @charset "UTF-8"; @import url(//fonts.googleapis.com/e..

기능 정의 Todo 입력 Todo 수정 Todo 삭제 Todo Total 갯수 체크 Todo 완료 갯수 체크 Todo 미완료 갯수 체크 시각적으로 보이는 리스트들을 todo들 관리를 쉽게하기 위해 배열에 넣었다. 배열을 관리하면 되기 때문에 상태 체크가 훨씬 쉽고 안정적이었다.초기 실행함수를 만들어서 todo 추가하는 기능을 바인딩했다. (최초의 이벤트 바인딩)부분적으로 스트링 템플릿을 사용해서 html에 있던 코드들을 많이 생략할 수 있었다.ES6의 let, const, map, filter 등을 사용해서 코드를 더 간결하게 만들었다.Todo 가 간단한 구조이기 때문에 변경될 때마다 화면을 새로 그리도록 만들었다. HTML Todo 추가 CSS @charset "UTF-8"; @import url(//..