2주차 실습

NPM 사이트

npm 사이트

NPM 명령어로 외부 패키지 모듈 중 http-server 모듈 설치하기

http-server 모듈

파일 export, import하기 (commonJS)

자바스크립트를 병합하는 모듈을 만들 겁니다.
mergeScripts.js 파일을 생성하고 다음과 같은 소스 내용을 작성합니다.

                    
                        // mergeScripts.js 파일 내용

                        // 사용자 정의 모듈 'modules/combineJS.js' 호출
                        var combineJS = require('./modules/combineJS.js');

                        // combineJS 모듈 사용
                        combineJS();
                    
                

## Note
Node.js는 ES6를 '부분적'으로 지원합니다.
그래서 ES6에서 제공하는 모듈기능은 사용하지 못합니다. (import, export)
그래서 여전히 commonJS에서 제공하는 모듈 기능인 require 함수를 사용해야합니다.
Node.js에서 ES6의 모듈(import, export)을 읽게하려면 babel이라는 추가 환경세팅을 해야됩니다.
이 부분은 다음에 해보도록 하겠습니다.

그리고 modules 폴더를 만든 후에 modules 폴더 안에 combineJS.js 파일을 만들고 다음과 같은 소스 내용을 작성합니다.

                    
                        // modules/combineJS.js 파일 내용

                        // combineJS 모듈 정의
                        function combineJS(){
                            console.log('combineJS 모듈');
                        }
                    
                

그리고 mergeScripts.js 파일이 있는 곳에서
node mergeScripts.js 명령어로 mergeScripts 파일을 실행합니다. 위와 같이 TypeError가 나는 이유는 mergeScripts.js 파일에서 combineJS를 호출해오지 못하기 때문입니다.
그 이유는 export 안했기 때문입니다.
다음과 같이 combineJS 파일에서 combineJS() 함수를 외부로 출력합니다.

                    
                        // modules/combineJS.js 파일 내용

                        // combineJS 모듈 정의
                        function combineJS(){
                            console.log('combineJS 모듈');
                        }

                        // combineJS 모듈 외부로 출력 (Exports)
                        module.exports = combineJS;
                    
                

위의 소스를 아래처럼도 쓸 수 있습니다.

                    
                        // modules/combineJS.js 파일 내용

                        // combineJS 모듈 외부로 출력 (Exports)
                        module.exports = function (){
                            console.log('combineJS 모듈');
                        };
                    
                

파일 인자값 전달하기

자바스크립트를 병합하는 모듈의 특성상 자바스크립트 파일을 읽고 쓸 수 있어야 합니다.
combineJS.js 파일 위쪽에 Node.js 내장 모듈인 File System을 호출합니다.

                    
                        // modules/combineJS.js 파일 내용

                        // File System 내장 모듈 호출
                        var fs = require('fs');

                        /*
                         * combineJS 모듈 정의 및 외부로 출력
                         * 모듈 내부에 전달받을 인자(배열, 문자열) 설정
                         */
                        module.exports = function(jsSrc, exportJs){
                            console.log(jsSrc, exportJs);
                        }
                    
                

그리고 mergeScripts.js 파일도 다음과 같이 수정합니다.

                    
                        // mergeScripts.js 파일 내용

                        // 사용자 정의 모듈 'modules/combineJS.js' 호출
                        var combineJS = require('./modules/combineJS.js');

                        /*
                        *  combineJS 모듈 사용
                        *  전달인자 1 : 병합하고자 하는 JS 파일 리스트(배열)
                        *  전달인자 2 : 병합되어 생성된 파일 경로(문자열)
                        * */
                        combineJS(['./script1.js', './script2.js'], './jsCombine.js');
                    
                

첫번째 인자로 전달받은 배열 아이템(병합할 개별 자바스크립트 파일)마다 코드를 적용할 수 있도록 배열 객체를 제어할 수 있는 forEach() 함수를 사용했습니다.

                    
                        // modules/combineJS.js 파일 내용

                        // File System 내장 모듈 호출
                        var fs = require('fs');

                        /*
                         * combineJS 모듈 정의 및 외부로 출력
                         * 모듈 내부에 전달받을 인자(배열, 문자열) 설정
                         */
                        module.exports = function(jsSrc, exportJs){
                            // 배열 jsSrc를 개별적으로 접근 조작하기 위해
                            // forEach 배열 메소드 사용
                            jsSrc.forEach(function(file, index){
                                console.log(file, index);
                            });
                        }
                    
                

인자값으로 전달한 파일 내용 읽기

아래 소스처럼 file의 경로로 문서 내용을 읽어오는 코드를 추가로 입력합니다.
combineJS.js 파일에서 내장모듈 File system의 readFileSync()에 file을 전달하여 동기적으로 읽어 들이고,
변수 content가 참조한 내용을 콘솔에 출력하도록 코드를 입력하고 저장합니다.

                    
                        // modules/combineJS.js 파일 내용

                        // File System 내장 모듈 호출
                        var fs = require('fs');

                        /*
                         * combineJS 모듈 정의 및 외부로 출력
                         * 모듈 내부에 전달받을 인자(배열, 문자열) 설정
                         */
                        module.exports = function(jsSrc, exportJs){
                            // 배열 jsSrc를 개별적으로 접근 조작하기 위해
                            // forEach 배열 메소드 사용
                            jsSrc.forEach(function(file, index){
                                var content = fs.readFileSync(file);
                                console.log('콘텐츠: \n' + content);
                            });
                        }
                    
                

파일 병합하기

아래 소스처럼 문자열을 참조한 변수 mergeCode를 생성하여 각 파일의 내용을 병합합니다.
readFileSync() 메소드를 활용하여 동기적으로 실행되도록 합니다.

                    
                        // modules/combineJS.js 파일 내용

                        // File System 내장 모듈 호출
                        var fs = require('fs');

                        /*
                         * combineJS 모듈 정의 및 외부로 출력
                         * 모듈 내부에 전달받을 인자(배열, 문자열) 설정
                         */
                        module.exports = function(jsSrc, exportJs){
                            var mergeCode = '';
                            // 배열 jsSrc를 개별적으로 접근 조작하기 위해
                            // forEach 배열 메소드 사용
                            jsSrc.forEach(function(file, index){
                                // fs.readFileSync() 사용하여 파일 내용 읽기
                                mergeCode += fs.readFileSync(file);
                            });
                            console.log(mergeCode);
                        }
                    
                

병합한 내용을 작성하여 파일로 내보내기

                    
                        // modules/combineJS.js 파일 내용

                        // File System 내장 모듈 호출
                        var fs = require('fs');

                        /*
                         * combineJS 모듈 정의 및 외부로 출력
                         * 모듈 내부에 전달받을 인자(배열, 문자열) 설정
                         */
                        module.exports = function(jsSrc, exportJs){
                            var mergeCode = '';
                            // 배열 jsSrc를 개별적으로 접근 조작하기 위해
                            // forEach 배열 메소드 사용
                            jsSrc.forEach(function(file, index){
                                // fs.readFileSync() 사용하여 파일 내용 읽기
                                mergeCode += fs.readFileSync(file);
                            });
                            fs.writeFileSync(exportJs, mergeCode);
                        }
                    
                

npm 외부 모듈을 사용하여 compress 기능 추가하기

먼저 npm init 명령어로 package.json 파일을 생성합니다. 그리고 다음 명령어로 minify 모듈을 설치합니다.
minify 모듈은 파일을 min 파일처럼 만들어주는 역할을 하는 모듈입니다.

                    
                        npm install --save minify
                        npm i -S minify
                    
                

minify 모듈이 설치되면, 다음을 참고하여 minify 모듈을 호출하는 코드와 minify() 모듈을 사용하는 코드를 입력합니다.

                    
                        // modules/combineJS.js 파일 내용

                        const fs = require('fs'),
                            minify = require('minify'),
                            options = {
                                html: {
                                    removeAttributeQuotes: false,
                                    removeOptionalTags: false
                                },
                            };

                        module.exports = function(jsSrc, exportJs){
                            jsSrc.forEach(function(file, index){
                                minify(file, options)
                                    .then(console.log)
                                    .catch(console.error);
                            });
                        }
                    
                

압축 코드 파일로 내보내기

                    
                        // modules/combineJS.js 파일 내용

                        // File System 내장 모듈 호출
                        var fs = require('fs'),
                            minify = require('minify');

                        module.exports = function (jsSrc, exportJs) {
                            var mergeCode = '';
                            jsSrc.forEach(function (file, index) {
                                minify(file).then(function (data) {
                                    mergeCode += data;
                                    if (index == jsSrc.length - 1) {
                                        writeFile();
                                    }
                                });
                            });

                            function writeFile() {
                                fs.writeFileSync(exportJs, mergeCode);
                            }
                        };
                    
                

combineJS 모듈 사용할 때, compress할건지 말건지 사용자가 설정할 수 있도록 min 인자값 추가

                    
                        // mergeScripts.js 파일 내용

                        // 사용자 정의 모듈 'modules/combineJS.js' 호출
                        var combineJS = require('./modules/combineJS.js');

                        /*
                        *  combineJS 모듈 사용
                        *  전달인자 1 : 병합하고자 하는 JS 파일 리스트(배열)
                        *  전달인자 2 : 병합되어 생성된 파일 경로(문자열)
                        * */
                        combineJS(['./script1.js', './script2.js'], './jsCombine.js', true);
                    
                

                    
                        // modules/combineJS.js 파일 내용

                        // File System 내장 모듈 호출
                        var fs = require('fs'),
                            minify = require('minify');

                        module.exports = function (jsSrc, exportJs, min) {
                            var mergeCode = '',
                                len = jsSrc.length - 1,
                                compress = min;
                            jsSrc.forEach(function (file, index) {
                                if (compress) {
                                    minify(file).then(function (data) {
                                        mergeCode += data;
                                        if (index == len) {
                                            writeFile();
                                        }
                                    });
                                } else {
                                    mergeCode += fs.readFileSync(file);
                                    if (index == len) {
                                        writeFile();
                                    }
                                }
                            });

                            function writeFile() {
                                fs.writeFileSync(exportJs, mergeCode);
                            }
                        };
                    
                

NPM에 배포하기

combineJS.js 파일이름을 index.js로 바꾸고 combineJS 폴더를 생성하여 그 안으로 넣습니다.
파일 이름을 index.js로 변경한 이유는 다음처럼 모듈을 호출할 때 파일 확장자를 생략하고 디렉터리 이름만으로 불러올 수 있게 하려는 것입니다. 배포하기전 package.json을 통해 정보를 담을 수 있습니다.
keywords 는 어떤 검색어로 검색했을 때 내가올린 모듈이 나올지를 정하는 부분입니다.
gir repository 정보도 담을 수 있습니다. npm adduser 명령어로 본인 npm 계정과 비밀번호, 이메일을 입력합니다. npm publish 명령어로 모듈을 배포합니다.
아래와 같은 오류가 생기는 이유는 모듈 name이 이미 있거나, 또는 version이 똑같아서입니다.
즉, 이미 내가 올린 모듈에 또 올리려면 version을 달리하거나 아니면 아예 다른 모듈로 올릴경우는 name을 달리해야합니다. 아래와 같이 모듈이 배포된것을 확인할 수 있습니다.

배포한 모듈 설치 및 테스트하기

npm i (배포한모듈이름) 명령어를 통해 모듈을 설치합니다. require 부분을 다시 확인하면서 mergeScripts 파일을 위에서 작성한대로 작성한 후
node mergeScripts 명령어로 실행합니다.