메로그

gulp gulp는 node.js 기반의 task runner, 자바스크립트 자동화 빌드 시스템입니다. 자바스크립트의 코드 결과를 한 번에 받는 방식이 아닌 Stream기반의 방식으로 이벤트마다 전달받는 방식을 이용합니다. Stream을 기반으로 하고 있기 때문에 작업 속도가 빠릅니다. gulp 안에는 task들이 존재하는데, 이 task들이 pipe로 연결되어 병렬 수행을 합니다. (각 task에서 작업 수행.) install gulp gulp를 셋팅하기 전에는 기본적으로 node와 npm이 설치가 되어 있어야 한다. // Install the gulp command line utility npm install --global gulp-cli // Install the gulp package in yo..

비동기 특정 작업이 완료될 때까지 기다리지 않고, 다음 작업을 이어서 실행해 나가는 것을 말합니다. 자바스크립트는 기본적으로 싱글 스레드 기반으로 동기적으로 실행되는데, 이렇다 보니 웹에서 계속 동기적으로 기능이 동작하다 보면, 속도가 느린 것처럼 보이게 되는 현상이 발생합니다.. (그렇기 때문에 비동기를 써야 함!) 콜백 콜백 함수는 함수의 인수로 넘기는 함수인데, 콜백함수는 비동기 프로그래밍에서 아주 유용한 녀석입니다. 콜백 함수를 이용하면, 비동기 방식에 시점을 잡아 특정 시점에 호출할 수가 있다. 간단하게 아래와 같이 콜백 함수를 이용하여 비동기를 처리할 수 있습니다. const myCallBack = () => console.log('콜백!'); // 5초 뒤, myCallBack 호출!! se..

자바스크립트 최적화 웹 개발을 하게 되면, 웹페이지의 성능 문제를 만나게 됩니다... 거기서 대부분의 문제는 리플로우와 리페인트가 발생(돔을 건드리면.. 아주 큰일..나는 거야..) 하며, 시간을 잡아먹습니다... (특히, 자사 웹페이지 또는 솔루션을 개발하다 보면 이와 같은 이슈를 더 많이 만나게 됩니다... 슬픔..) 하지만, 이런 리플로우나 리페인트가 발생하는 것은 어쩔 수 없는 것입니다. 하지만, 이러한 현상을 얼마나 최소하면서 최적화 시킬 수 있는지가 성능을 개선할 수 있는 요지입니다.. 브라우저 렌더링 Dom, Cssom 생성 => RenderTree 생성 => 레이아웃 => 페인트 브라우저 렌더링은 HTML, CSS 문서를 파싱 후, DOM Tree와 CSSOM Tree를 생성 이후에, 이 ..