package.json 과 package-lock.json 은 무엇일까?

제목 : package.json 과 package-lock.json

---

이 두 파일을 접하게 된 시기는 2~3년 전, 처음으로 React 라이브러리를 설치하는 과정에서,

package.json 과 package-lock.json 이 생겨나는 것을 보았을 때 였다.

항상 처음 라이브러리나 어떠한 프레임워크를 사용 할 때, 해당 라이브러리나 프레임워크에 집중하듯

저 위의 2 파일은 내 관심사의 밖이었었다.

심지어는 JavaScript 를 제대로 익히지 않고 먼저 React 에 집중하게 되었으니, 당연한 결과이기도 했다.

그러나, Node.js 엔진을 이용한 라이브러리와 프레임워크를 이용하며 체계적인 폴더 구조를 익히고,

그 내부의 철학 또한 익히는 과정에서 package.json 과 package-lock.json 이

이러한 라이브러리와 프레임워크를 지탱하고 있다는 것을 알게 되었다.

심지어는 CI/CD 과정에서 package.json 내부의 script 를 이용해서

어플리케이션을 실행하거나, 실행 전 테스팅 파일이 통과하는지를 검사하거나,

내 스스로의 명령어 스크립트를 만들어서 script 에 추가 할 수도 있었다.

그러나, package.json 의 역할은 이것 뿐 만이 아니었다.

package.json 은 {} 내부에 적힌 수많은 옵션들이 존재했는데,

이는 NPM 레지스트리에 내가 창조한 라이브러리를 다른 유저들이 사용할 수도 있게끔 만들 수도 있었다.

위의 역할은 프로그래머스 부트캠프 강의 중 알게 된 것이었다.

.json 확장자란?

나는 .json 확장자를 가진 파일은 xml 형식의 저장 파일들의 가독성을 해결하기 위해 나왔다고 알고 있다.

xml 을 접하게 된 개인적인 경험

대학교 재학 시절, 군대에 속하되, 대학교에서 강의를 하시는 교수님이 계셨다.

강의 내용은 전쟁의 역사와 나라가 평화를 이룩하는 방법에 대해서 논의하는 강의였었다.

나는 보통 강의를 듣고 나서, 다들 나간 강의실에서 혼자 노트북에 코딩하는 것을 좋아했다.

그 때 당시 쿠팡의 사이트 렌더링 과정에서 나온 부산물이,

쿠팡에서 제품을 판매하는 회사에서 제공하는 구독 프로그램(월 100 만원) 에 치명적인 정보이기에,

나는 이것을 분석하여 실제 프로그램으로 만들었으며, 이를 짧은 10초 동영상으로 제출하여

쿠팡 본사에 제출했었던 시기였다. - 결국은 내가 3,000 달러의 포상금을 얻었다. 세금으로 80 만원을 뜯겼다..

이야기가 좀 샜는데, 그 때 혼자 남아서 노트북에 열심히 무언가를 두드리는 내가 신기하셨는지,

교수님하고 이야기를 하게 되었다.

교수님은 제대로 정규화되지 않아 빠져있는 해양 선박 데이터를 규합하고 싶어하셨고,

나는 공공데이터를 이용하여 "적어도 한 번은 등록된 적이 있는" 데이터를 전부 규합했다.

물론 옛날에 수기로 등록된 데이터에 의해 빠진 정보가 존재했지만, 교수님도 충분히 만족하셨었다.

이 때, 내가 공공데이터에 요청한 데이터는 xml 의 형태로 날아왔었다.

xml 은 <>, </>, <> <></> </> 이러한 형태로 데이터가 날아오는 형식이다.

그러니까, html 을 보는 것과 매우 유사하다고 말할 수 있다.

어지러운 데이터를 보다 보니, 새로운 데이터 전송 방식인 json 이 왜 탄생했는지 알 것 같았다.

하지만, 옛날에 사용되던 방식인 xml 은 옛날 통신 장비들이 여전히 사용되고 있다.

따라서, 공공데이터가 xml 을 제공하던 것도, 진화를 하지 않은 것이 아니라, 일종의 최적화라고 판단했다.

요약해서, .json 확장자의 파일은, .xml 의 데이터 형식의 가독성을 매우 높였다고 말할 수 있다.

package.json 을 알기 전에, NPM 부터!

NPM 은, Node Package Manager 의 약자이다.

사실, package.json 에 대해서 작성하기 전에, npm 에 대해서 먼저 글을 작성해야 한다고 지금 생각이 든다.

아마 곧 작성할 것 같다.

이 글은 package.json 에 대해서 얘기하므로, 간단하게 짚고 넘어가도록 하자.

npm 을 알게 되는 경로는 다양할 것이라고 생각한다.

하지만, 그 중에서도 대다수의 사람들이 Node.js 엔진에서 파생된 라이브러리, 혹은 프레임워크를 사용하기 위해

혹은 수업에서 사용하니까 npm init --y 로 처음 접해보았을 것이다.

이는 npm 명령어를 사용하여 라이브러리를 설치하기 전에,

설치된 라이브러리의 메타데이터(설정정보 및 버전, 레지스트리 주소...) 를 저장하기 위해

package.json 을 미리 만들어 두는 작업이다.

npm init 으로 하면, 조금 설정이 귀찮아 지기도 한다.

기본적으로 npm 은 로컬 스토리지(내 플젝) 에 package.json 을 만들기도 하지만,

아예 "전역 환경" 을 구축해 주기도 한다.

그런데, 나는 HomeBrew 라는 전역 패키지 매니저를 사용해서, 굳이 npm 을 이용해서 내 컴퓨터에

전역 명령어를 설치하지는 않는다.

요약 : npm 은 프로젝트에 설치 할 때 package.json 을 이용하고,

시스템 전반에서 이용하게 만들려면, npm i -g xxxxx 로 설치한다.

이는 로컬 컴퓨터가 아닌, 리눅스 인스턴스에서 사용하기 편하겠다는 생각을 한다.

웹 페이지로서의 NPM

나는 package.json, package-lock.json 을 배우기 위해서,

웹 페이지로서의 NPM 도 알아야 한다고 생각한다.

그 이유는, 방대한 라이브러리 속에서 내가 원하는 라이브러리를 찾기 위해서,

NPM 사이트 에 들어가야 하기 때문이다.

그리고, NPM 오픈소스를 등록하는 사람들도 이 사이트를 이용한다.

---

package.json

의존성을 사용하기 위한 측면

사실, 위에서 NPM 에 대해서 설명 한 이유는 package.json 과 이어진다.

package.json 은, npm 명령어가 의존성을 관리하기 위해 만들어 진 파일이다.

의존성이란 무엇일까?

물론 Vanilla JavaScript 로 Node.js 엔진을 구동하거나,

웹 페이지를 라이브러리 없이 구현하는 사람들도 존재한다.

그러나, Node.js 엔진 스펙에 추가되지 않아 필요해진 수 많은 라이브러리들을 추가 해 주어야 한다.

이러한 라이브러리들은

• npm install --save xxxx or npm i xxxx - package.json 이 속한 프로젝트에 의존성 추가
• npm install --save-dev xxxx or npm i -D xxxx - 파일이 속한 프로젝트에 "개발" 의존성 추가
• npm install -g xxxx - npm 이 설치된 기기의 위치에 전역 명령어로 사용할 수 있는 라이브러리 추가

이러한 형식으로 다운로드 된다.

설치된 라이브러리는 node_modules 라는 정해진 폴더명에 저장된다.

이후, 우리는 import, require 문으로 외부 의존성을 쉽게 사용 할 수 있다.

의존성을 등록하기 위한 측면

위에서 말했듯이, npm 명령어를 이용하여 외부 의존성(라이브러리)를 이용하는 방법도 있지만,

또한 누군가가 나의 오픈소스 프로그램을 npm 으로 사용하게 만들기 위해

package.json 이 사용되기도 한다.

실제로 npm init --y 를 통해 간단하게 package.json 의 초기 모습을 본다면,

$ cat package.json 
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

우리가 npm install 혹은 npm i -D 로 설치해야 나타나는

• dependencies : 의존성
• devDependencies : 개발 의존성

이 항목은 보이지 않는다.

즉, npm 은 개발 의존성을 관리 해 주기도 하지만,

기본적으로 npm 레지스트리에 올리기 위해 준비를 해 주는 행동과도 동일하다고 볼 수 있다.

기본적인 package.json 의 옵션 의미

기초적으로 생성되는 옵션과 더불어,

npm i 혹은 npm i -D 를 통해 의존성을 설치했을 때 나타나는 명칭과 의미를 살펴보자.

dependencies - 의존성

이 항목은, Node.js 엔진이 실제로 사용하게 될 라이브러리들을 의미한다.

express 와 같이, 실제로 Node.js 엔진에 장착하게 될 라이브러리를 의미한다.

Example :

$ npm i express # npm install 이 처음이라면, package.json 에 "dependencies" 항목이 추가됨.

devDependencies - 개발 의존성

프로젝트의 산출물에 관여하지 않는 특성이 있으며, 테스팅 및 타입 리졸버에 해당한다.

다양한 라이브러리들이 타입스크립트와 자신의 라이브러리를 리졸브하기 위해

@types/<기존 라이브러리 이름> 으로 등록한다.

이 때, npm i -D @types/<기존 라이브러리 이름> 으로 개발 의존성을 추가할 수 있다.

하지만, 설치하기 전에 NPM 사이트에 들어가서 누군가 기존 라이브러리에

이름 @types/ 만 붙여서 장난 쳐 놓은 것은 아닐지 보는 것을 추천한다.

개발 의존성에는 주로 이러한 것들이 들어간다.

• 사용 라이브러리에 해당하는 Type Resolver
• 테스팅 관련 라이브러리 - jest 같은 것
• eslint 관련 라이브러리
• 최신 typescript 자체

name - 프로젝트 폴더명

디폴트로 생성했을 때, 현재 package.json 이 존재하는 프로젝트 폴더명을 가르킨다.

version - 내 오픈소스 라이브러리의 버전

만약에 자신이 npm 모듈로서 오픈소스를 배포하고자 할 때 중요한 부분인데,

버전은 전 세계 모두가 보고, 컨벤션이 정해져 있으므로,

Versioning Convention 을 참고하는 것이 중요하다.

내가 HyperSkill 영문서를 번역한 것이 있는데,

이것을 참조하면 좋을 것이라고 생각한다.

Semantic versioning - 의미론적 버전 관리

description - 내 프로젝트에 대한 설명

현재 배포하는 나의 패키지에 대한 설명이며, 디폴트로 "" 로 비워져 있다.

scripts - npm 으로 실행 가능한 실제 명령어

내가 직접 커맨드를 입력하여 커스텀 할 수도 있으며,

수 많은 프레임워크들이 build, testing, linting, debugging, execute

이러한 역할을 위해 미리 scripts 를 선언 해 놓기도 한다.

나중에 CI 과정에서 유용하게 사용 할 수도 있다.

keywords - NPM 사이트에서 내 프로젝트를 검색 할 수 있는 키워드

NPM 사이트에서 내 패키지를 검색 할 때 어떤 키워드로 검색되었으면 좋겠는지

문자열 배열로 작성 해 놓는 옵션이다.

author - 저자

보통은 "" 로 비워져 있는데, 이 패키지를 작성한 사람을 입력하는 곳이다.

이메일을 입력해도 되고, 이 라이브러리를 홍보하거나 설명하는 사이트를 입력해도 된다.

EX - anybody@example.com or https://example.com

license - 기본 ISC

수 많은 오픈소스들이 자신을 사용 할 수 있도록 열어놓았지만,

각 오픈소스들은 자신들만의 라이센스를 만들어 놓았다.

어떤 것은 상관이 없고, 어떤 것은 상업적 용도로 사용 할 수 없다.

어떤 재미있는 라이센스는, "만났을 때 나 맥주 한 잔 사줘" 도 있다.

homepage - 이 프로젝트를 알려주는 홈페이지

말 그대로, 이 라이브러리를 알려주는 홈페이지를 넣으면 된다.

다른 옵션들

https://docs.npmjs.com/cli/v11/configuring-npm/package-json

---

package-lock.json

이 파일은 package.json 생성 후, npm i 를 실제로 수행했을 때 생성된다.

혹은 곧바로 npm i 를 통해 의존성을 생성해도 동일하다.

이 파일은 package.json 에 담긴 의존성과 개발 의존성이

실제로 어떤 버전인지, 어디에서 라이브러리를 다운로드 받는지,

그리고 이 라이브러리를 사용하기 위해 어떤 하위 라이브러리가 필요한지 서술한다.

name - package.json 과 동일하다.

version - package.json 과 동일하다.

lockfileVersion

이 lock 파일 자체의 버전을 말하는데, npm v9 이후부터 사용된다고 한다.

packages

여기서부터 다운받은 모든 의존성에 대한 메타데이터를 서술한다.

packages 밑에 바로 "" 라는 하나의 key 가 있으며,

"" 밑에 node_modules 에 존재하는 모든 의존성에 대한 데이터를 서술한다.

---

참고 사이트

npm Docs

https://docs.npmjs.com/creating-a-package-json-file

https://docs.npmjs.com/cli/v11/configuring-npm/package-json

https://docs.npmjs.com/cli/v11/configuring-npm/package-lock-json