• 실시간 채팅방 만들기 - 설치하기
• 실시간 채팅방 만들기 - 구현하기
• 실시간 채팅방 만들기 - JS 라이브러리 관리

일반적으로 JS 라이브러리는 각 개발 사이트에서 다운로드 후 "/lib"과 같은 특정 폴더에 넣어 관리를 합니다.

그런데, 프로젝트가 계속 발전해가는 상황에서 위 방식으로 계속 관리를 하게 된다면

1. 의존성 관리
   "각 JS 라이브러리 간의 의존성/호환성 문제는 없는지?"
   
   
2. 버전 관리
   "내가 사용하고 있는 JS 라이브러리가 결함이 있는 버전은 아닌지, 최신 버전은 맞는지?"

등에 있어 문제점을 겪게될 수 있습니다.

이러한 문제점을 해소하기 위해 node.js의 package.json을 이용해 JS 라이브러리(모듈) 관리를 해보기로 하였습니다.

package.json

{
    "name": "app",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node ./bin/www"
    },
    "dependencies": {
        "JSON": "^1.0.0",
        "backbone": "https://github.com/jashkenas/backbone",
        "backbone-validation": "^0.11.5",
        "bootstrap": "4.0.0",
        "cookie-parser": "~1.4.3",
        "debug": "~2.6.9",
        "ejs": "~2.5.7",
        "express": "~4.16.0",
        "express-ejs-layouts": "^2.4.0",
        "http-errors": "~1.6.2",
        "jquery": "^1.12.4",
        "moment": "^2.22.0",
        "morgan": "~1.9.0",
        "redis": "^2.8.0",
        "requirejs": "^2.3.5",
        "requirejs-text": "^2.0.15",
        "socket.io": "^2.1.0",
        "underscore": "^1.8.3"
    }
}

name : 프로젝트 명

version : 프로젝트 버전

private : 개인 프로젝트 여부

scripts : npm run 단축 명령어, 예) npm run start

dependencies : 의존성 모듈

dependencies 버전 종류

• version(=version) : 동일한 버전 
• >version : 상위 버전 
• >=version : 상위 버전이거나 동일한 버전 
• <version : 하위 버전 
• <=version : 하위 버전이거나 동일한 버전 
• ~version : 해당 버전의 minor 버전 범위, 예) ~1.3.0 => 1.3.1, 1.3.2, .., 1.3.9, 1.4.0(x)
• ^version : 호환 버전

app.js

..
app.use('/javascripts', express.static(__dirname + '/node_modules'));
..

node_modules 폴더가 public 폴더와 같은 레벨에 있어 위 코드를 추가하였습니다.

app/config.js

require.config({
    urlArgs: 'version=0.0.1',
    baseUrl: "/javascripts",
    paths: {
        jquery : 'jquery/dist/jquery.min',
        underscore : 'underscore/underscore-min',
        backbone : 'backbone/backbone-min',
        backbone_validation : 'backbone-validation/backbone-validation-min',
        moment: 'momen/min/moment.min',
        bootstrap: 'bootstrap/dist/js/bootstrap.min',
        text: 'requirejs-text/text',
        "socket.io": 'socket.io-client/dist/socket.io'
    },
    shim : {
        underscore : {
            exports : '_'
        },
        backbone: {
            exports: 'Backbone',
            deps: ['jquery', 'underscore']
        },
        backbone_validation: {
            exports: 'BackboneValidation',
            deps: ['backbone']
        },
        bootstrap: {
            deps: ['jquery']
        }
    }
});

npm install

npm outdated

초기 세팅 시 app/config.js에서는 모듈 마다 파일 위치가 달라 약간의 시간이 걸리지만 한 번 세팅 후에는 

호환성/의존성 관리 뿐만 아니라 버전 관리도 할 수 있어 훨씬 견고한 프로젝트를 개발하실 수 있게 됩니다.