Ecmascript/Javascript (14) 썸네일형 리스트형 [closure] 간단한 로직으로 이해하는 클로져 클로져 한마디로 함수 내부의 함수에서 바깥 함수의 변수를 참조하고 있으면 바깥 함수의 호출이 끝나고 그 변수가 살아있는 것이다. 즉 바깥변수의 값이 지속되기 때문에 이 값을 이용해서 무언가를 할 수 있다. 말은 어려우니 코드로 알아보자 클릭할때마다 버튼에 클릭횟수가 표시 버튼 클릭 횟수:0 시간을 매개변수로 받아는 스톱워치 0 [module] import, require, module.exports, export 노드랑 리액트랑 번갈아가면서 하다보면 헷갈릴때가 있어서 정리함 import, require 외부 모듈 가져오는 것 node는 commonJS를 지원 -> require만 가능 module.exports, export 외부에서 사용할수 있게 모듈로 내보내는 것 node는 commonJS를 지원 -> exports, module.exports만 가능 /** moduler객체니 default로 내보내면 변수로 내보내기 때문에 한파일에 한번만 내보내기 가능 **/ // 한개만(module) 내보내기 : commonJS 방식 module.exports = {name: "react"}; // 한개만(default) 내보내기 export default React; /** 객체로 묶어내보내기 때문에 여러개를 묶어 내보.. [operator] + !! || && + !! || && ||와 &&는 잘쓰면 if문을 훨씬 덜 쓸수 있어서 평범하게 if문을 쓰지 못하는 jsx에서 매우 유용 !!는 이중부정으로 boolean 값으로 형변환 해준다. 는 덧셈 연산자이지만 숫자형 문자열 앞에 쓰면 number 값으로 형변환 해준다 + parseInt()메소드나 Number() 생성자 함수대신 사용할 수 있다. 숫자형 문자열을 숫자랑 === 비교해야 할때 간단하게 사용하기 좋다. let str = "1234"; console.log(typeof parseInt(str), parseInt(str); // number, 1234 console.log(typeof +str, +str); // number, 1234 !! 값이 있으면 true 값이 없는 것들을 전부 false로 변환.. [비동기 처리] generator의 활용 -> function* generator 함수 실행 중지와 실행 재개가 컨트롤이 가능한 함수 function으로 구현하며 함수명 앞에 *이 붙는다. return이 아닌 yield로 값을 반환한다.(중단점 + 값 반환 역할) next()를 호출하면 yield 앞까지의 값이 반환된다. next()의 반환값은 {value: 반환값, done: 제너레이터 함수 끝까지 실행여부} function * counter() { yield 1 yield 2 yield 3 } const g = counter(); console.log(g.next()); // {value: 1, done: false} console.log(g.next()); // {value: 2, done: false} console.log(g.next()); // {value.. [비동기 병렬 처리]Promise의 메서드 Promise.all(배열) 매개변수 배열에 담긴 Promise들이 병렬로 모두 실행이 끝날때까지 기다리고 모두 성공한 경우 처리를 실행 then의 매개변수에는 Promise들에서 전달된 결과값이 배열로 들어옴 const promise1 = new Promise((resolve, reject) => resolve('즉시 호출')); // Promise 내부에 setTimeout이 있으므로 그 시간만큼 기다림 const promise2 = new Promise((resolve, reject) => { setTimeout(() => resolve('3초 뒤 호출'), 3000); }); Promise.all([promise1, promise2]) .then(values => co.. [비동기 처리] Promise와 async/await 비동기의 콜백방식 처리 사실 실무에서는 setTimeout처리보다는 ajax등 비동기통신으로 오는 데이터를 가지고 처리하는데서 발생하는 문제지만 간단한 설명/분석을 위해서 setTimeout으로 예를 들었다. // 3초뒤에 2가 출력되는 것을 바라고 평범하게 코딩함 function doSomething() { let num=1; setTimeout(function(){ num = 2; },3000); console.log(num); // 결과는 바로 1 출력 } // callback 방식으로 처리 function callSomething(callback) { setTimeout(function(){ callback(2); },3000); } callSomething(function(data){ conso.. 이전 1 2 다음