package.json 생성 - by. UXKM

2024-07-30

요약 설명

package.json이란 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일입니다.
간단하게 '현재 프로젝트에 대한 정보를 저장하는 파일' 입니다.

2.3.1. package.json 생성

gulp_setting 폴더에서 터미널을 열고 아래 명령을 실행합니다. (아래 명령 중 윗줄의 명령을 실행합니다.)

npm init 명령이 실행되면 아래처럼 package.json 생성이 시작됩니다.

package.json 생성 첫 단계

여기부터는 엔터만 연타하면 마무리가 됩니다.
version, description 등 모든 항목은 package.json 생성 완료 후 수정이 가능합니다.

주의할 점!!

package name은 폴더명으로 괄호 안에 자동 적용되기 때문에 바로 엔터를 치면 되지만,
_gulp_setting처럼 밑줄( _ )로 폴더명을 시작할 경우 엔터를 처도 다음 단계로 진행이 되질 않습니다.
(띄어쓰기나 대문자가 있어도 다음 단계로 진행되지 않습니다.)
이럴 경우 아래 이미지처럼 따로 package name 명을 작성한 후 엔터를 치면 됩니다.

package.json 생성 두번째 단계

위 단계까지 마무리가 되면 gulp_setting 폴더에 package.json 파일이 생성된 것을 확인할 수 있습니다.

package.json 생성 확인

아래는 package.json의 구조를 설명하는 섹션으로 읽으면 도움이 되지만, 건너 띄어도 나머지 Gulp를 이해하는데 문제는 없습니다.

2.3.2. package.json의 구조

위 순서대로 진행하여 package.json이 생성되면 아래와 같은 구성으로 파일이 생성됩니다.
JSON 포맷으로 이루어져 있으며, 각각의 정보는 키, 값 이 쌍으로 저장되는 단일 JSON 객체로 구성됩니다.

							{
								"name": "폴더명 또는 직접 작성한 프로젝트명",
								"version": "1.0.0",
								"description": "",
								"main": "index.js",
								"scripts": {
									"test": "echo \"Error: no test specified\" && exit 1"
								},
								"author": "",
								"license": "ISC"
							}

"name"

프로젝트 이름으로, 가장 중요합니다. 중앙 저장소에 배포할 때 version과 함께 필수 항목입니다.
url로 사용되고, 설치할 때 디렉토리 이름이 되기 때문에 url이나 디렉터리에서 쓸 수 없는 이름을 사용하면 안 됩니다.
또한, 이름에 node나 js가 들어가면 안 됩니다.
name은 214자보다 짧아야 하며, 점( . )이나 밑줄( _ )로 시작할 수 없습니다.
대문자를 포함해서는 안 되며, require() 함수의 인수로 사용되며 짧고 알기 쉬운 것으로 짓는 것이 좋습니다.

"version"

프로젝트의 현재 버전을 정의합니다.
버전은 항상 세 자리로 이루어져 있습니다. 이는 SemVer 방식의 버전 넘버링을 따르기 때문입니다.
Senver는 Semantic Versioning(유의적 버전)의 약어로 버전을 구성하는 세 자리 모두 의미를 가지고 있다는 뜻입니다.

								{
									"version": "2.7.4"
								}

위 버전의,

첫 번째 자리 2는 Major 버전을 의미합니다. 0이면 초기 개발(beta) 중이라는 거을 의미하고, 1부터는 정식 버전을 의미합니다.
Major의 버전에 변경된다는 것은 하위 호환이 안될 정도의 수정 또는 업데이트가 되었다는 것을 의미합니다.
즉, 1.5.0 버전 사용자가 2.0.0으로 업데이트를 할 경우 에러가 발생할 수 있습니다.
두 번째 자리 7은 minor 버전을 의미합니다. 하위 호환이 가능한 기능 업데이트 시 minor 버전을 올립니다.
세 번째 자리 4는 patch 버전을 의미합니다. 기존 기능에 문제가 있어서 수정 업데이트 시 patch 버전을 올립니다.

"description"

프로젝트 설명으로, 문자열로 기술합니다.
npm search로 검색된 리스트에 표시되기 때문에 사람들이 패키지를 찾아내고 이해하는 데 도움이 됩니다.

"keywords"

프로젝트를 검색할 때 참조되는 키워드입니다.
description과 마찬가지로 npm search로 검색된 리스트에 표시됩니다.

								{
									"keywords": ["fruits", "Apple", "Persimmon", "Pomegranate", "Jujube", "Mango", "Yuja"]
								}

"homepage"

프로젝트 홈페이지 주소입니다.
url 항목과는 다르며, url을 설정하면 예상치 못한 움직임을 하게 되므로 주의해야 합니다.

								{
									"homepage": "https://your-package.org"
								}

"bugs"

프로젝트 이슈와 버그 트래킹을 볼 수 있는 url과 이슈를 알릴 email 주소를 입력합니다.
패키지 사용자가 문제에 직면했을 때 도움을 주기 위함입니다.
url, email 중 하나 또는 두 값을 모두 지정할 수 있습니다.
url 이 제공되면 npm bugs 명령을 사용할 수 있습니다.

								// url, email 모두 사용
								{
									"bugs": {
										"url" : "https://github.com/owner/project/issues",
										"email" : "project@hostname.com"
									}
								}

								// url 만 사용
								{
									"bugs": {
										"url" : "https://github.com/owner/project/issues"
									},
									// 또는
									"bugs": "https://github.com/owner/project/issues"
								}

"license"

배포한 패키지에 대해 패키지 사용자가 패키지를 사용하는데 어떤 권한과 제한 사항이 있는지 알기 위해 license를 명시해야 합니다.

								{
									"license": "MIT",
									"license": "(MIT or GPL-3.0)",
									"license": "SEE LICENSE IN LICENSE_FILENAME.txt",
									"license": "UNLICENSED"
								}

"author"

프로젝트 작성자 정보로, 한 사람만을 지정합니다.
name은 필수 요소이며, 선택 요소로 email, url을 추가할 수 있습니다.

								{
									"author": {
										"name": "Your Name",
										"email": "you@example.com",
										"url": "http://your-website.com"
									},
									// 또는
									"author": "Your Name <you@example.com> (http://your-website.com)"
								}

"contributors"

프로젝트에 참여한 공헌자 정보로, 여러 사람을 배열로 지정할 수 있습니다.

								{
									"contributors": [
										{ "name": "Your Friend", "email": "friend@example.com", "url": "http://friends-website.com" }
										{ "name": "Other Friend", "email": "other@example.com", "url": "http://other-website.com" }
									],
									// 또는
									"contributors": [
										"Your Friend <friend@example.com> (http://friends-website.com)",
										"Other Friend <other@example.com> (http://other-website.com)"
									]
								}

"files"

프로젝트에 포함된 파일입니다. 단일 파일 또는 특정 디렉토리를 지정하거나 와일드카드를 사용하여 특정 기준을 충족하는 파일을 포함할 수 있습니다.

								{
									"files": ["filename.js", "directory/", "glob/*.{js,json}"]
									// 단일 파일, 특정 폴터, 기준을 충족하는 파일
								}

"main"

프로그램의 기본 진입점이 되는 모듈 ID입니다.

								{
									"main": "filename.js"
								}

"bin"

많은 패키지는 PATH에 설치되는 하나 이상의 실행 파일을 가지고 있습니다. npm에서는 이를 매우 쉽게 구현할 수 있습니다.
(실제로 이 기능은 "npm"을 설치하는 데에도 사용되고 있습니다.)
실행할 수 있는 패키지를 만들기 위해선 package.json 파일에 bin 항목을 제공해야 합니다.
패키지 설치 시에, npm 은 bin 항목에 기술된 파일의 심볼릭 링크를 global install인 경우 prefix/bin 에, local install인 경우 ./node_modules/.bin/에 생성하게 됩니다.

								{
									"bin": { "myapp": "./cli.js" }
								}

그래서 myapp을 설치할 때, cli.js 파일에 대한 심볼릭 링크가 /usr/local/bin/myapp에 만들어집니다.
만약, 하나의 실행 파일만 가지고 있다면, 실행 파일의 이름은 패키지의 이름과 같게 되고, 그렇게 않다면 아래와 같이 각각의 실행 파일의 이름을 bin 항목에 지정해 주어야 합니다.

								{
									"bin": {
										"command-name": "bin/command-name.js",
										"other-command": "bin/other-command"
									}
								}

"directories"

CommonJS Packages 스펙에는 directories 개체를 사용해서 패키지 구성을 나타낼 수 있습니다.
npm의 package.json을 보면 doc, lib, man으로 이루어진 디렉토리 구성을 확인할 수 있습니다.
앞으로 이 정보는 다른 창의적인 방법으로 사용될 수 있습니다.

								{
									"directories": {
										"lib": "path/to/lib/",
										// 모듈의 라이브러리가 어디에 있는지 보여줍니다. lib 폴더에 특별한 일을 하지는 않지만 메타 데이터로 유용합니다.
										 
										"bin": "path/to/bin/",
										// 만약 directories.bin로 bin을 지정하면, 해당 디렉토리의 모든 파일이 실행 파일로 추가됩니다.
										// bin 이 동작하는 방식에 의해, bin 과 directories.bin 을 모두 지정하면 오류가 발생합니다.
										// 각각의 파일을 지정하고 싶다면 bin을 특정 폴더 아래의 모든 파일을 bin으로 지정하고 싶다면 directories.bin을 사용해야 합니다.
										 
										"man": "path/to/man/",
										// man 문서들이 위치한 폴더를 가리킵니다. "man" 배열을 만드는 것보다 간편합니다.
										 
										"doc": "path/to/doc/",
										// 마크다운 파일들을 여기에 위치시킵니다.
										 
										"example": "path/to/example/"
										// 예제 파일들을 여기에 위치시킵니다.
									}
								}

"repository"

프로젝트의 소스 코드를 저장한 저장소의 정보입니다.
소스 코드에 참여하고자 하는 사람들에게 도움이 될 수 있고, 만약 git 저장소가 github라면 npm docs 명령으로 찾을 수 있습니다.

								{
									"type": "git",
			    				"url": "https://github.com/user/repo.git"
								}

"scripts"

스크립트는 간단한 빌드 프로세스 또는 개발 도구와 같은 패키지와 관련된 작업을 자동화하는 좋은 방법입니다.
프로젝트에서 자주 실행해야 하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능합니다.

								{
									"scripts": {
										"dev": "gulp dev",
										"build": "gulp build",
										"deploy": "gulp deploy"
									},
								}

"config"

스크립트에 사용된 구성 옵션 또는 매개변수입니다.

								{
									"config": {
										"port": "8080"
									}
								}

"dependencies"

프로젝트 의존성 관리를 위한 부분이며, npm 종속성으로 설치된 패키지 목록을 설정합니다.
npm 또는 yarn을 사용하여 패키지를 설치하면 dependencies 목록에 자동으로 등록됩니다.

예를 들어, npm으로 uxkm-sass라는 패키지를 설치하면 아래처럼 dependencies에 설치한 uxkm-sass가 등록됩니다.

								{
									"dependencies": {
										"uxkm-sass": "^1.0.2"
										// 패키지명 : 설치된 버전
									}
								}

"devDependencies"

패키지를 개발할 때만 필요하지만 프로덕션 환경에서는 설치되지 않는 패키지입니다.

예를 들어, npm으로 uxkm-gulp라는 패키지를 설치하면 아래처럼 devDependencies에 설치한 uxkm-gulp가 등록됩니다.

								{
									"dependencies": {
										"uxkm-gulp": "^1.0.2"
										// 패키지명 : 설치된 버전
									}
								}

"engine"

이 패키지/앱이 작동하는 Node.js 및 기타 명령의 버전을 설정합니다.

								{
									"engines": {
										"node": ">= 6.0.0",
										"npm": ">= 3.0.0",
										"yarn": "^0.13.0"
									}
								}

"private"

패키지 관리자에 패키지를 게시하지 않을 때 설정합니다.
개인적으로만 사용하는 저장소를 패키지 관리자에 무심코 개시하는 것을 방지합니다.

								{
									"private": true
								}