2.13 Installing Pug(퍼그 설치) Pug란? Pug는 view 엔진을 말함 pug 설치하기 콘솔에 npm install pug 로 설치한다. set함수로 application 설정하기 - app.set("view engine", "pug"); https://expressjs.com/ko/4x/api.html#app.set expressjs 공식 홈페이지> API 참조 > application> app.set() set 함수: application의 설정을 하는 함수 name과 value가 필요하다. 우리는 view engine 설정을 바꿀것이다. view engine 설정의 기본 값은 undefined인데 이것을 pug로 바꿀것이다. app.js에 다음과 같은 코드를 추가한다. app.se..

Promise Chaining (프로미스 연결하기) const fetchNumber = new Promise((resolve, reject) => { setTimeout (()=> resolve(1), 1000); }); //1초 있다가 성공하면 1을 전달하는 promise 작성 fetchNumber .then(num => num * 2) //resolve에서 전달된 값 1이 num으로 전달되어서 num*2인 2를 반환 .then(num => num * 3) // 위에서 받은 2가 num으로 전달되어 num*3인 6을 반환 .then(num => { return new Promise((resolve, reject) =>{ setTimeout( () => resolve(num-1), 1000); }); /..

프로미스(promise)란? - 프로미스는 자바스크립트 비동기 처리에 사용되는 객체(Object)이다. - 비동기 처리: ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미함 - 프로미스를 사용하면 콜백 함수를 계속해서 불러서 코드의 가독성이 떨어지는 일명 '콜백 지옥'을 없이 쉽게 비동기 처리 가능 - 프로미스는 정해진, 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행이 되어졌다면 "성공의 메시지와 함께 결과 값을 전달" - 만약 기능을 수행하다가 예상치못한 문제가 발생했다면 "Error를 전달" 프로미스 학습에 중요한 포인트 2가지 1) State(상태) 2) Producer VS Consumer - Producer(제공자): 우리가 원하는 ..

1. brush size const range = document.getElementById("jsRange"); 브러쉬 사이즈를 조정할 range를 자바스크립트에서 가져온다. if(range){ range.addEventListener("input", handleRangeChange) } 항상 이렇게 확인을 해주는 것이 좋다. (range가 존재할 때) Range에 이벤트를 추가해주는데, range는 input에 반응하기 때문에 저렇게 작성해준다.(onchange도 있긴 하던데) function handleRangeChange(event){ console.log(event); } 이렇게 해서 event를 확인해보면 event.target안에 value가 있는 것을 확인할 수 있다. function ha..