npm 소개 및 사용 방법

npm 소개 및 사용 방법

npm은 node package manager의 약자이다.

이것은 타인이 제공하는 모듈을 사용하기 위해 그 모듈을 설치하고 관리하는 툴이라고 할 수 있겠다.

우린 이 npm을 어떻게 사용하는지를 알아볼 것이다.

 홈페이지 접속 및 패키지 검색

https://www.npmjs.com/

위의 링크를 들어가보면 아래와 같은 npm 패키지들을 사용할 수 있는 홈페이지가 나온다.

위의 검색 바에 uglify-js를 입력하고 검색해보자

그럼 uglify-js에 대한 패키지로 이동된다.

"UglifyJS는 JavaScript를 분석하고 간소화하고 압축하고 아름답게 만드는 툴킷입니다."라고 설명되어 있다.

아직 어떠한 기능을 하는지 잘 모르겠으니 스크롤을 내려 예제를 보자.

example.js라는 파일이 있고 그 안에 JavaScript코드가 작성되어 있다.

그것을 이러한 명령어를 통해서

띄어쓰기나 들여쓰기, 엔터, 탭과 같은 기능들을 삭제하고 변수들의 네이밍을 간략하게 하여 최대한 적은 라인의 소스로 튜닝해주는 기능을 하는 패키지이다.

라고 예제를 통해 알려주고 있다.

 패키지 독립 설치 하기

그럼 패키지가 어떠한 기능을 하는지 알았으니 이 패키지를 npm프로그램을 통해 설치해보자.

패키지 설치 방법은 패키지를 설명하는 페이지에 나와있다.

"가장 먼저 최신 버전의 node.js가 설치되어있어야 합니다."

이후 NPM을 이용하여 설치하는 방법을 설명하고 있다.

-g(글로벌)이라는 명령어의 차이가 있는데 -g 명령어가 붙으면 컴퓨터 전역에서 독립적인 소프트웨어로 설치가 된다는 의미이다.

-g 명령어 없이 설치하는 경우 npm을 설치하는 프로젝트 내에 부품으로써 설치한다는 의미이다.

일단 여기서 패키지를 설치할 때 -g 명령어를 붙여 독립적인 소프트웨어로 설치하도록 하겠다.

cmd에서 수행하면 위 그림 처럼 설치가 진행된다.

 패키지 기능 사용하기

패키지를 설치했으니 이제 기능을 사용해보자.

위에서 예제를 통해 설명을 봤던 것 처럼 코드를 간소화하고 네이밍을 간략하게 하는 방법을 해볼 것이다.

프로젝트 폴더에 pretty.js파일을 생성하고 아래의 코드를 작성하자.

코드를 작성한 다음 저장을 누르고 cmd를 통해 아래의 명령어를 입력해보자.

uglifyjs화 시키면 작성했던 코드들이 띄어쓰기, 들여쓰기, 개행 등 여러 줄에서 한 줄로 간소화되는 것을 알 수 있다.

더 나아가 -m 명령어를 추가해서 적용하면 변수명도 간소화되어 표현되는 것을 알 수 있다.

여기서 -o 파일명.js를 작성하면 uglified 된 내용을 파일로 저장할 수가 있다.

생성된 파일을 열어보면 간소화된 코드로 저장된 것을 확인할 수 있다.

 npm 패키지를 소프트웨어의 부품으로 설치하기

이번에는 npm패키지를 소프트웨어의 부품으로 설치하는 방법을 알아보자.

npm사이트에 들어가서 검색란에 underscore라는 패키지를 검색해보자.

underscore패키지는 다운로드 방법이라던가 API등 내용이 따로 홈페이지로 제공하고 있다.

해당 홈페이지를 접속해보자.

홈페이지를 접속해보면 따로 다운로드 파일도 제공하며 설치 방식도 제공하고 있다.

우리는 설치방식으로 진행할 것이다.

 프로젝트 디렉토리를 npm 패키지 디렉토리로 지정하기

npm패키지를 내 프로젝트의 모듈로 포함시키기 전에 나의 프로젝트 디렉토리를 패키지로 지정해야한다.

cmd를 열고 프로젝트 폴더로 이동해서 "npm init"명령어를 입력하자.

명령어를 입력하면 아래와 같이 네모칸에 입력해야할 부분들이 나타난다.

package name: 이 프로젝트의 이름을 지정 (자동으로 폴더명으로 지정되므로 엔터만 입력하자)

version: 자동으로 등록됨

description: 프로젝트의 설명을 등록

entry point: 우리가 만든 패키지에서 어떠한 모듈이 패키지를 실행시키는 모듈인가를 지정 (자동으로 파일이 선택되므로 엔터만 입력하고 넘어가자. 추후에 바꿀 수도 있음.)

test command: 어떠한 명령어로 테스트를 진행할 것인가 지정 (넘어가도 된다.)

git repository: git 저장소를 지정 (만약 프로젝트가 github에 업로드한 프로젝트라면 자동으로 설정된다.)

keywords: 생략

author: 생략

license: 생략 (자동으로 ISC라는 값으로 지정됨)

Is this OK (yes): yes

위의 작업으로 프로젝트 폴더는 npm의 패키지의 디렉토리로 선언이 된 것이다.

그리고 작업이 완료되면 프로젝트 폴더 내에 package.json이 생성된다.

위 행위가 완료되면 추후 내 프로젝트 폴더를 npmjs.org에 업로드하여 사람들과 공유할 수가 있게 된다.

 npm 패키지를 프로젝트에 의존시켜 설치하기

이제 설정이 완료되었으니 underscore패키지를 설치하자.

cmd에서 "npm install underscore"를 입력하여 설치하자.

설치가 완료되면 프로젝트 폴더 내에 다운로드 받은 패키지명으로 js파일들이 생성된다.

그러나 아직 작업이 완료되지 않았다.

underscore라는 패키지를 프로젝트에 포함시켰지만 의존성이 주입된 것은 아니다.

그것은 설치된 package.json을 열어보면 알 수 있는데 underscore패키지에 대한 "dependencies" 버전 정보가 등록되어있지 않다.

다시한번 cmd에서 underscore를 설치하는데 여기에 "--save"명령어를 추가하여 설치해주자.

설치가 완료되면 다시 package.json을 열어 확인해보면 dependencies 항목에 underscore 패키지의 버전 정보가 등록되게 된다.

이 dependencies 항목에 정보가 등록이 되면 언제든지 underscore 1.9.1버전을 내 프로젝트에 포함시킬수가 있게 된다.

따라서 모듈을 설치할 때는 dependencies 등록을 해야한다.

 패키지 기능 사용하기

패키지에서 underscore.js파일을 생성하자.

이후 해당 파일에 아래처럼 코드를 작성하자.

underscore라는 의존된 패키지를 불러와 변수에 담는다.

이 때 underscore 패키지는 변수명을 언더바"_"로 지정하는 것이 규칙이므로 지키도록 하자.

그리고 arr이라는 이름으로 배열을 생성한다.

배열에 저장된 값을 가져오거나 호출하는 방법은 자바스크립트로 다음과 같은 명령으로 호출할 수 있다.

"arr[index]"코드로 배열의 값에 접근할 수가 있다.

그런데 자바스크립트 언어는 배열에 대한 기능이 아쉬운 부분들이 있다.

underscore는 이런 아쉬운 부분들에 대해 더 손쉽게 접근하고 간결하게 코드를 작성할 수 있도록 지원해주는 패키지이다.

underscore 사이트를 보면 좌측 사이드바에 지원하는 기능들의 API index가 존재한다.

여기서 Arrays의 first를 클릭해보자.

"Note: 모든 배열 함수들은 인자 객체에서도 작동한다. 그러나, 언더스코어 함수들은 희소배열들에서 설계되도록 만들지 않았다."

라는 내용이 있다.

그리고 아래에 다양한 함수들에 대한 사용방법과 설명들이 적혀있다.

빨간박스를 친 내용을 보자.

"배열의 첫 요소를 리턴한다. n을 전달하면 배열의 첫번째 n 요소를 리턴한다."

핵심은 처음의 내용이다.

"배열의 첫 요소를 리턴한다."

예제를 통해서 사용하는 방법도 얻었으니 직접 사용해보자.

언더바 변수에 담았던 underscore모듈을 이용해서 arr배열을 인자로 _.first()함수를 호출하고 그것을 console.log()함수로 출력한다.

그리고 출력해보면 자바스크립트로 배열에 접근하는 방식과 동일한 결과를 나타낸다.

하지만 이 방법은 오히려 더 많은 문자들을 작성하게 했다.

다음과 같은 상황은 어떨까?

배열의 가장 끝 요소에 접근하려고 한다.

배열의 index를 지정할 때 가장 끝 요소의 index를 호출해야 하므로 "배열의 길이 - 1"을 통해 끝 요소의 index를 꽤어낸다.

머리를 조금 사용하긴 했지만 어찌되었든 배열의 끝 요소에 접근할 수 있었다.

그렇다면 이걸 underscore로는 어떻게 작업할 수 있을까?

바로 API 문서에 적혀있는 last()라는 함수를 이용하는 것이다.

"배열의 마지막 요소를 리턴한다."

매우 간단하다.

그저 "_.last(arr)"만으로 가독성이 좋아졌고 코딩이 훨씬 편해졌다.

코드는 간결해졌고 가독성이 좋아졌는데 결과 또한 동일한 결과가 출력된다.

이렇듯 커스텀 패키지를 통해 우리는 좀 더 나은 좀 더 간결하고 가독성이 좋은 코드를 작성할 수가 있게 된다.

패키지라는 기능은 개발자에게 있어서 매우매우 필요하고 감사한 기능이다.

앞으로 다양한 패키지들을 찾아보고 사용해보며 활용스킬을 늘려보자.