package.json

현성·2023년 12월 1일
1

package.json에 대해 정리하기에 앞서 npm에 관해 알아야 한다고 생각합니다.

npm 이란 ?

  • 노드의 패키지 매니저입니다.
  • 다른 사람들이 만든 소스 코드들을 모아둔 저장소입니다.
  • 남의 코드를 사용하여 프로그래밍 가능합니다.
  • 이미 있는 기능을 다시 구현할 필요가 없어 효율적입니다.
  • 오픈 소스 생태계를 구성중 입니다.

  • 패키지란 npm에 업로드된 노드 모듈입니다.
  • 모듈이 다른 모듈을 사용할 수 있듯 패키지도 다른 패키지를 사용할 수 있습니다.

package.json

package.json이란 ?

  • 현재 프로젝트에 대한 정보와 사용 중인 패키지에 대한 정보를 담은 파일입니다.
  • 동일한 버전을 설치하지 않으면 문제가 생길 수 있습니다.
  • 노드 프로젝트 시작 전 package.json부터 만들고 시작합니다.(npm init)

기본 구성 요소

{
  "name": "signature",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel ./index.html",
    "build": "parcel build ./index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.10.3"
  }
}

scripts

  • scripts는 프로젝트에서 빈번하게 수행해야 하는 작업을 스크립트로 등록하기 위해서 사용됩니다.
    예를 들어, 위의 프로젝트에서 parcel ./index.html을 동작하게 하기 위해서 우리는
    npm run dev를 입력해주면 같은 동작이 실행됩니다.

dependencies

  • 위의 프로젝트의 package.json에는 현재 dependencies속성이 없지만 추후에 자주 보게 될 속성 중 하나입니다. npm install을 통해 패키지를 설치하게 되면 자동으로 dependencies 항목에 반영이 됩니다. dependencies 항목에서 추가된 패키지와 패키지의 버전을 확인할 수 있습니다.

devDependencies

  • 로컬 개발 및 테스트에만 필요한 패키지로 개발 모드일 때만 의존성을 명시하는 영역입니다.
    위의 package.json을 보면 devDependencies2.10.3버전의 parcel로 개발 서버를 실행하고 빌드하고 있는 것을 확인할 수 있습니다. 실제로 배포할 때는 필요없는 테스트 도구나 웹팩, 바벨 같은 것들이 이 필드에 명시됩니다.

name & version

  • nameversion은 각각 사용자들이 npm install 명령어로 해당 패키지를 설치할 때 사용할 패키지 이름과 버전을 명시합니다.

description & keywords

  • descriptionkeywords는 각각 사용자들이 npm search 명령어로 해당 패키지를 검색할 때 보여질 패키지 설명과 키워드 목록을 명시합니다.

license

  • license는 해당 프로젝트의 라이센스를 표시할 수 있습니다. 아무리 좋은 패키지라도 라이센스가 명시되어 있지 않으면 쓰기가 꺼려지기 때문에, npm에 발행할 패키지라면 반드시 명시하는 것이 좋습니다.

author & contributors

  • 해당 프로젝트의 저자 및 공헌자를 명시합니다.

⭐️ main

  • main 필드는 사용자가 해당 패키지를 npm에서 설치하여 사용할 때 프로젝트 내에서 어떤 파일이 불러와질지를 결정하는 매우 중요한 필드입니다. 명시하지 않으면 기본적으로 프로젝트의 최상위 디렉토리에 있는 index.js 파일이 사용됩니다.

추가적인 정보

  • nodenpm에 관련해서 제가 예전에 작성해놓은 포스트가 있습니다.
    참고 포스트

지금까지 제가 JavaScript강의를 들으며 사용하고 있는 package.json의 기본 구성 요소들에 대해 정리를 해보았습니다. 확실히 블로그에 포스팅하며 내용을 정리하니 애매하게 느껴졌던 package.json의 내용이 좀 더 머릿속에 자리잡히는 느낌이 듭니다.
추후에 React를 사용하는 때가 오면 더 많은 package.json의 요소를 사용하게 될 것이라 짐작합니다.
그 때가 되면 다시 이 포스팅을 읽어보고, 내용을 추가하면 적절한 복습이 될 것이라 생각합니다.

profile
👈🏻 매일 꾸준히 성장하는 개발자 !

0개의 댓글