최근 소스들을 까보다가 발견했는데, npm에 등록된 패키지를 CDN으로 바로 활용 가능한 서비스가 있다. 바로 unpkg이다. 리젼은 여기서 확인 가능하다.

사용법은 엄청나게 간단하다. node_modules 폴더 안에 있는 구조를 URL에 그대로 입력만 해주면 된다. 몇 가지 예로 확인해보자.

<!-- React -->
<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<!-- Lodash -->
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
<!-- Bootstrap css -->
<script src="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"></script>

node_modules 안의 경로가 생각나지 않는다 라면 폴더 경로까지만으로 웹에서 접근해보자. 예를 들어 Bootstrap4라면 https://unpkg.com/[email protected]/ 까지만 들어가면 폴더 구조가 보인다.

여담

블로그의 스크립트도 unpkg로 바꿨는데, 로딩속도가 1초 가까이 줄어든 느낌이다.

이슈

unpkg로 스크립트를 가져오는 도중에 503 timeout 에러가 발생해서 블로그가 동작하지 않았었다. 같은 방법으로 동작하지만 좀 더 reliable한 서비스인 jsdelivr를 사용하자.

Bower의 시대가 끝났다. 홈페이지를 들어가보면 다음과 같은 문구가 보인다.

..psst! While Bower is maintained, we recommend yarn and webpack for new front-end projects!

Yarn을 사용해보자.

2020년에는 npm 사용을 추천드립니다. 더 이상 느리지 않습니다.

NPM으로 설치할 수도 있는데 추천하는 방법은 Installer이니 다운받고 설치해주면 된다! NPM으로 설치시에는 환경변수 등록을 거쳐야한다.

설치 후 Bash에서 확인해보자.

$ yarn --version
0.24.5

사용법

npm 사용법과 아주 유사하다. 기존 NodeJS 패키지에서 yarn 명령어만을 입력하면 완벽히 호환이 되고, 새로운 프로젝트라면 yarn init 명령어를 실행하면 된다. package.json을 사용하기 때문에 그냥 명령어만 바뀌었다고 생각하면 된다. (패키지들도 npm의 것을 공유한다.)

명령어 비교​

install이 add로, uninstall이 remove로, update가 upgrade로 바뀐게 사실상 끝이다. 자세한 옵션은 CLI Docs를 참조하자.

Global 경로

• Windows: %LOCALAPPDATA%/Yarn/config/global

환경 변수 설정​

설정을 확인한 뒤 prefix 경로를 PATH에 추가해주면 된다.

$ yarn config list
# { prefix: 'C:\\Users\\{NAME}\\npm' }

결론

bower_components 안녕 이젠 node_modules만 있겠구나

npm으로 npm의 버전을 업데이트 할 때의 명령어는 다음과 같다.

$ npm install -g npm

업데이트 명령 실행 후 오류가 발생한 뒤 npm 명령어가 없다는 경우가 생길 수 있다. 당황하지 말고 아래 명령어를 실행한다.

# 캐시 강제 삭제
$ npm cache clean -f

# npm 다운로드
$ curl http://npmjs.org/install.sh | sh

다시 npm이 설치되어 npm 명령어를 실행할 수 있다.

앵귤러 또는 다른 브라우저에 필요한 스크립트를 npm 으로 설치하고 node_modules 안에 있는 스크립트로 참조하고 싶을 때 다음과 같이 라우팅을 추가한다.

// scripts 경로로 접근시 node_modules을 사용할 수 있게 설정
app.use("/scripts", express.static(path.join(__dirname, "node_modules")));

<!-- 결과 -->
<script src="/scripts/angular/angular.min.js"></script>

mariasql package 설치 명령어 실행시 오류를 내뿜으며 node-debug.log 를 확인하라고 명령어가 나올 경우 아래와 같이 하면 된다.

debug log 에는 node-gyp rebuild 를 하라고 나오는데, 이 오류메세지와는 아무 관련이 없다.

해결

Python 2.7 설치​

윈도우에 Python 2.7 버전이 설치되어있지 않으면 설치해야한다. 파이썬 2 이상 3 미만 버전을 쓰면 되는데, 2.7 을 강조하니 쓰자.

여기서 다운로드 한다. 설치시 Window PATH 등록 옵션을 꼭 선택해야한다.

Python 경로를 npm 에 등록​

$ npm config set python "/the/python/path" --global

the/python/path 에 자신의 python 설치 경로를 넣어주자.

Microsoft Visual Studio Community 2015 설치​

왜 VS 2015 를 설치해야하지? 라고 생각이 들텐데, **Visual C++**을 사용하기 때문이다.

여기서 다운로드한다. 설치시 프로그래밍언어 탭에서 Visual C++을 꼭 선택해서 설치해야한다.

기존에 VS2015 가 설치되어있는 경우, 프로그램 추가/삭제에서 선택 후 수정 메뉴를 눌러 Visual C++ 옵션을 추가한 뒤 업데이트해준다.

2017 년 기준 위 링크가 만료되어 cpp-build-tools를 설치해야한다

Visual Studio 버전을 npm 에 등록​

$ npm config set msvs_version "2015" --global

MariaSQL Package 설치​

$ npm install mariasql --save

여담

Windows10 에서 mariasql package 설치시 C++ 컴파일이 필요하니, VS2015 로 C++ 컴파일러를 설치해야된다라는 걸 msdn 이나 npm 에 친절히 남겨줬으면 이렇게까지 시간을 날리지 않았을텐데...

최근 해결방법​

빠르고 위의 오류가 절대 발생하지 않는 mysql2 패키지를 사용하면 된다.

mongoose-post-find 모듈 사용시 bson 라이브러리를 찾지 못해 설치가 안되는 경우가 있다.

{ Error: Cannot find module '../build/Release/bson'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    // 여기서 오류가 발생한다
    at Object.<anonymous> (your project\mongoose-post-find\node_modules\bson\ext\index.js:15:10)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (your project\mongoose-post-find\node_modules\bson\lib\bson\index.js:3:24)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32) code: 'MODULE_NOT_FOUND' }
js-bson: Failed to load c++ bson extension, using pure JS version

해결

해당 패키지 경로의 15번째 줄을 따라가보면 bson 패키지의 경로를 지정해주는 부분이 있는데, 이 부분을 같은 패키지 내의 bson 경로로 일치시켜주면 된다.

var bson = null;

try {
  // Load the precompiled win32 binary
  if (process.platform == "win32" && process.arch == "x64") {
    bson = require("./win32/x64/bson");
  } else if (process.platform == "win32" && process.arch == "ia32") {
    bson = require("./win32/ia32/bson");
  } else {
    bson = require("../build/Release/bson");
  }
} catch (err) {
  // Attempt to load the release bson version
  try {
    // 여기의 상대경로를 같은 패키지의 bson의 경로로 일치시켜주면 된다.
    bson = require("../browser_build/bson");
  } catch (err) {
    console.dir(err);
    console.error(
      "js-bson: Failed to load c++ bson extension, using pure JS version"
    );
    bson = require("../lib/bson/bson");
  }
}