express 관리자 서버 코드를 확인 하던 중 알아보게 되었다.
Grunt-contrib-watch 플러그인의 LiveReload 기능
Grunt
JavaScript 기반의 자동화 도구로, 프론트엔드 및 웹 개발에서 반복적인 작업을 자동화하고 효율적으로 수행할 수 있도록 도와주는 도구이다. Grunt는 다양한 작업을 실행하고 관리하는 데 사용되며, 이러한 작업에는 파일 병합, 파일 압축, 코드 검증, 이미지 최적화, 로컬 서버 시작, LiveReload와 같은 기능을 포함할 수 있다.
[특징]
Task Runner: Grunt는 개발 작업을 자동화하기 위해 tasks를 정의하고 실행하는 데 사용된다. 이러한 tasks는 JavaScript 코드로 작성되며, 필요한 동작을 구현한다.
플러그인 생태계: Grunt는 플러그인을 활용하여 다양한 작업을 수행한다. Grunt의 플러그인 생태계는 다양하며, 프로젝트에 필요한 작업을 수행하기 위한 다양한 플러그인을 사용할 수 있다. 예를 들어, CSS 파일을 병합하고 압축하기 위한 플러그인, JavaScript 코드를 검증하고 압축하기 위한 플러그인, 이미지 최적화를 수행하기 위한 플러그인 등이 있다.
설정 파일: Grunt는 Gruntfile.js라는 설정 파일을 사용하여 어떤 작업을 수행할 것인지 정의한다. 이 파일에는 사용할 플러그인 및 작업의 설정이 포함된다.
커맨드 라인 인터페이스 (CLI): Grunt CLI를 사용하여 명령줄에서 Grunt 태스크를 실행할 수 있습니다. 이를 통해 개발자는 터미널에서 간단하게 작업을 실행하고 관리할 수 있다.Grunt는 프론트엔드 개발에서 자주 사용되며, 프로젝트 빌드, 코드 최적화, 테스트 실행, 개발 서버 구축 등의 작업을 자동화하여 개발 프로세스를 향상시킬 수 있다. Grunt 외에도 Gulp, Webpack, Parcel 등의 다른 자동화 도구도 있으며, 프로젝트의 요구 사항에 맞게 선택할 수 있다.
Grunt-contrib-watch
Grunt 빌드 도구의 플러그인 중 하나로, 파일 변경을 감지하고 해당 변경 사항에 대한 작업을 수행하는 데 사용된다. 이 플러그인은 빌드 및 개발 프로세스를 자동화하고 개발자에게 더 효율적인 개발 환경을 제공하는 데 도움이 된다. 이 플러그인의 중요한 기능 중 하나는 LiveReload 서버를 통해 파일 변경 사항을 실시간으로 반영하는 것이다.
LiveReload 서버 설정
'use strict';
const tinylr = require('tiny-lr');
const _ = require('lodash');
// 서버를 저장하는 객체
const servers = Object.create(null);
module.exports = function(grunt) {
// 기본 설정
const defaults = { port: 35729 };
function LR(options) {
// 옵션 처리
if (options === true) {
options = defaults;
} else if (typeof options === 'number') {
options = { port: options };
} else {
options = _.defaults(options, defaults);
}
const host = (options.host || '*') + ':' + options.port;
// 이미 실행 중인 서버 사용 또는 새로운 서버 시작
if (servers[host]) {
this.server = servers[host];
} else {
this.server = tinylr(options);
// 에러 핸들링
this.server.server.removeAllListeners('error');
this.server.server.on('error', function(err) {
if (err.code === 'EADDRINUSE') {
grunt.fatal('Port ' + options.port + ' is already in use by another process.');
} else {
grunt.fatal(err);
}
process.exit(1);
});
// 서버 시작
this.server.listen(options.port, options.host, function(err) {
if (err) {
return grunt.fatal(err);
}
grunt.log.verbose.writeln('Live reload server started on ' + host);
});
servers[host] = this.server;
}
}
// 파일 변경 시 LiveReload 트리거
LR.prototype.trigger = function(files) {
grunt.log.verbose.writeln('Live reloading ' + grunt.log.wordlist(files) + '...');
this.server.changed({ body: { files: files } });
};
return function(options) {
return new LR(options);
};
};이 코드는 LiveReload 서버를 설정하고 파일 변경을 감지하는 핵심적인 기능을 제공해준다. 코드 내부에서는 옵션 처리, 서버 관리, 에러 핸들링, 서버 시작 및 파일 변경 감지에 관한 로직이 구현되어 있다.
결론
grunt-contrib-watch 플러그인을 사용하면 파일 변경 사항을 실시간으로 감지하고 이를 효과적으로 처리할 수 있다. 이를 통해 개발 프로세스가 더 효율적으로 진행되며, 개발자는 실시간으로 변경 사항을 확인할 수 있다.
Grunt-contrib-watch 플러그인은 파일 변경 사항을 실시간으로 반영하는 데 도움이 되는 강력한 도구 중 하나로 더 많은 Grunt 플러그인과 함께 사용하면 프로젝트를 자동화하고 개발 생산성을 향상시킬 수 있다.
