한 입 크기로 잘라먹는 리액트Node.js 패키지에서는 외부 패키지를 설치해 사용할 수 있습니다. 외부 패키지란 자신이 만든 Node.js 패키지를 서버에 올려 다른 사람도 사용할 수 있도록 배포한 파일입니다. 외부 패키지를 이용하면 모든 기능을 사용자가 직접 개발하지 않아도 됩니다. 필요한 부분이 있다면 해당 기능을 수행하는 외부 패키지를 찾아 설치하면 됩니다.
외부 패키지를 다른 말로 라이브러리라고 합니다. 라이브러리는 프로그램을 개발할 때 공통으로 사용할 수 있는 기능들을 모아 모듈화한 것입니다. 라이브러리는 완전한 프로그램은 아니며 특정 기능만을 수행합니다. 예를 들어 자바스크립트에서 유명한 ‘Lodash’는 배열, 객체를 다루는 데 필요한 복잡한 기능들을 단순한 함수 형태로 만들어 제공해 주는 라이브러리입니다.
바퀴를 다시 발명하지 마라!
“바퀴를 다시 발명하지 마라”라는 프로그래밍 격언이 있습니다. 이 격언은 이미 누군가 훌륭하게 만들어 놓은 것을 다시 만들기 위해 고생하지 말라는 뜻입니다.
자바스크립트 생태계는 이 격언의 가장 좋은 예시입니다. 자바스크립트 생태계에서는 ‘오픈소스’ 정신이라는 큰 목적을 위해 수많은 프로그래머가 훌륭한 부품들을 만들어 배포하고 있습니다. 누구나 이 부품을 자유롭게 사용할 수 있으며, 원한다면 부품을 개선하여 오픈소스 발전에 기여할 수도 있습니다.
이런 환경 덕택에 짧은 기간 내에 자바스크립트를 활용한 새로운 기술들이 수없이 탄생하였으며, 앞으로도 더 멋진 작품들이 세상에 쏟아져 나올 겁니다. 이 책의 학습 목표인 리액트 또한 이러한 배경에서 탄생한 오픈소스 프로젝트입니다.
라이브러리 설치하기
패키지 관리 도구인 npm(Node Package Manager)을 직접 개발한 팀이 관리하는 npmjs.com이라는 웹 사이트가 있습니다. npmjs.com에는 전 세계 개발자들이 만든 라이브러리가 등록되어 있으며, 누구나 여기서 라이브러리를 탐색하고 설치할수 있습니다. npmjs.com에 등록한 대다수 라이브러리는 오픈소스이므로 설치를 위한 어떠한 권한도 비용도 요구하지 않습니다.
이번에는 npmjs.com에 접속해 라이브러리를 탐색하고 설치하겠습니다. 다음 URL을 입력해 홈페이지에 접속합니다.
실습을 위해 lodash 라이브러리를 설치하고 사용해 보겠습니다. lodash는 주간 평균 다운로드 수가 5천만에 이르는 세계적으로 유명한 라이브러리입니다. 국내외 많은 기업에서 사랑받고 있으며 실무에서도 자주 사용됩니다.
npmjs.com 페이지의 상단 검색 폼에서 ‘lodash’를 입력해 검색합니다.
검색 결과 여러 라이브러리가 나타납니다. 이 중 ‘exact match(정확히 일치)’라는 태그가 붙은 라이브러리를 클릭하면 해당 라이브러리의 상세 페이지로 이동합니다.
라이브러리 상세 페이지는 탭 단위로 정보를 나누어 제공합니다. 여러 탭에서 처음에 기본으로 활성화되어 있는 탭은 [Readme]입니다. [Readme] 탭은 라이브러리에 대한 설명, 사용 방법, 설치 방법 등에 대한 중요 정보를 제공합니다.
[Readme] 탭의 우측 상단 Install 항목에는 npm i lodash와 같이 이 라이브러리를 설치하는 명령어가 나타납니다. npm i는 npm install로 대체해 사용할 수도 있습니다. npm i 다음에 필요한 라이브러리 이름을 입력하면 npmjs.com 서버에서 불러와 패키지를 자동으로 설치합니다.
chapter3 패키지에 lodash를 설치하겠습니다. 비주얼 스튜디오 코드에서 터미널을 열고, 작업 경로가 이 패키지의 루트 폴더가 맞는지 확인한 다음 명령어를 입력합니다.
코드를 불러오는 중 입니다 ...터미널에서 npm i lodash를 입력하면 lodash 설치가 진행됩니다. 라이브러리 설치는 라이브러리의 크기에 비례하는데, 적게는 10초, 많게는 1분 이상이 소요될 수 있습니다.
라이브러리 설치가 끝나면 터미널에 added 1 package라는 메시지가 나타납니다. 현재 패키지에 1개의 라이브러리를 추가(설치)했다는 뜻입니다.
만약 에러가 발생한다면 다음 항목을 확인합니다.
- 인터넷 환경이 원활한지 확인합니다.
- 터미널의 현재 작업 경로가 chapter3 폴더의 경로와 일치하는지 확인합니다.
- Node.js와 npm의 설치가 정상적으로 이루어졌는지 다시 확인합니다.
- MacOS 사용자라면 명령어 앞에 sudo를 붙여 실행합니다.
라이브러리 설치 이후 패키지의 변화
라이브러리를 설치하면 chapter3 패키지에는 다음과 같이 3가지 변화가 일어납니다.
- 패키지 루트에 lodash 라이브러리를 저장하는 ‘node_modules’ 폴더가 생성됩니다.
- package.json에 lodash 라이브러리의 정보를 저장하는 dependencies 항목이 추 가됩니다.
- 패키지 루트 아래에 package-lock.json이라는 이름의 파일이 생성됩니다.
패키지에서 lodash 라이브러리를 설치하면 일어나는 사항들을 좀 더 자세히 알아 보겠습니다.
node_modules
패키지에 라이브러리를 설치하면 자동으로 ‘node_modules’ 폴더가 생성됩니다. 이 폴더는 라이브러리가 실제로 설치되는 곳입니다. 비주얼 스튜디오 코드에서 이 폴더를 열어 보겠습니다.
node_modules 폴더에는 앞서 설치한 라이브러리 lodash 폴더가 있습니다. 그리고 lodash 폴더에는 이 라이브러리의 소스 코드 파일들이 있습니다. 이렇듯 node_modules 폴더는 패키지에 설치된 라이브러리가 실제로 저장되는 곳입니다. 패키지에 node_modules 폴더가 이미 있는 상황에서 새로운 라이브러리를 설치하면, 이 폴더에는 지금 설치한 라이브러리의 폴더가 추가됩니다.
package.json의 dependencies
패키지에 라이브러리를 설치하면 package.json에 dependencies 항목이 추가됩니다. package.json 파일을 열어 dependencies 항목이 추가되었는지 확인합니다.
dependencies(의존) 항목에서는 이 패키지에 설치한 라이브러리의 이름과 버전이 표시되어 있습니다. Node.js
패키지에서 dependencies란 이 패키지를 실행하기 위해 필요한 추가 라이브러리라는 뜻 입니다.
lodash의 버전을 자세히 보면 ^X.Y.Z 형태로 ^가 버전 코드 앞에 붙어 있습니다.
^는 캐럿 이라고 부르며, 캐럿과 함께 표기된 버전은 버전의 범위 (Version Range)를 뜻합니다.
package-lock.json
패키지에 라이브러리를 설치하면 package-lock.json 파일이 자동으로 생성됩니다.
package-lock.json은 설치된 라이브러리의 버전을 정확히 밝히기 위해 존재하는 파일입니다. 이 파일을 별도로 생성하는 이유는 package.json의 dependencies에는 설치된 라이브러리의 정확한 버전이 아니라 버전의 범위(Version Range)만 있기때문입니다.
따라서 패키지에 설치된 라이브러리의 정확한 버전을 알려면 package-lock.json을 확인해야 합니다. package-lock.json을 열어 앞서 설치한 lodash의 버전을 확인합니다.
2022년 9월 19일 기준으로 lodash의 최신 버전은 4.17.21입니다. lodash는 오픈소스로 버전이 꾸준히 업데이트되는 프로젝트이므로, 여러분이 설치했을 때는 이 책의 예제와 다른 버전일 가능성이 높습니다. 이 책에서는 버전이 달라져도 변하지 않는 예제만 엄선해 다루므로, 다르더라도 크게 신경 쓰지 않아도 됩니다.
라이브러리 다시 설치하기
node_modules 폴더는 외부 라이브러리가 실제로 설치되는 곳이기 때문에 Node.js 패키지 중에서 용량이 가장 큽니다. Node.js 패키지를 인터넷에 올리거나 공유할 때는 보통 이 폴더는 제외하고 공유합니다.
따라서 패키지를 공유한 사람은 공유한 패키지에 node_modules가 존재하지 않으므로 라이브러리를 사용하지 못합니다. 공유자가 이 라이브러리를 사용하기 위해서는 자신의 터미널에서 npm install 명령을 수행해야 합니다. 그럼 공유한 package.json과 package-lock.json에 있는 정보를 토대로 node_modules를 다시 만듭니다.
npm install 명령어는 공유한 패키지에서 package.json의 dependencies에 표시한 버전 범위와 package-lock.json에 표시한 정확한 버전 이름을 이용해 node_modules 폴더에 필요한 패키지를 자동으로 설치합니다.
만약 이 패키지에 package-lock.json이 없다면 packge.json의 버전 범위를 기반으로 라이브러리를 설치합니다.
chapter3 패키지에서 node_modules 폴더를 삭제하겠습니다. 그리고 npm install 명령어를 터미널에서 입력합니다. 이때 터미널의 작업 경로는 당연히 패키지의 루트 폴더여야 합니다.
npm install을 수행하면 node_modules 폴더가 다시 생성됩니다. 따라서 패키지를 배포할 때 용량이 큰 node_modules는 공유할 필요 없이 package.json과 package-lock.json만 공유하면 이 명령어를 이용해 라이브러리를 다시 설치할 수 있습니다.
라이브러리 사용하기
외부 라이브러리를 설치했으니 라이브러리 lodash를 직접 사용해 보겠습니다. 다음과 같이 index.js를 수정하고 npm run start로 실행합니다.
코드를 불러오는 중 입니다 ...① 라이브러리를 불러올 때는 경로와 확장자를 명시하지 않아도 됩니다. lodash 라이브러리를 불러와 내보내기한 기본값을 변수 lodash에 저장합니다. ② lodash의 uniqBy 메서드는 인수로 전달한 배열에서 중복값을 제거하고 반환합니다.
lodash는 uniqBy 메서드 외에도 배열과 객체를 위한 수많은 기능을 제공합니다.
lodash의 더 많은 기능에 대해서는 아래 lodash 공식 문서에서 확인할 수 있습니다.
