package.json은 npm이라는 오픈소스 패키지 생태계를 사용하기 위한 명세이자, 프로젝트의 의존성 관리를 위한 명세, 또 이 생태계로의 배포를 위한 명세이다.
{
"name": "mantis-free-react-admin-template",
"version": "1.3.0",
"private": true,
"homepage": "https://mantisdashboard.io/free",
"author": {
"name": "CodedThemes",
"email": "codedthemes@gmail.com",
"url": "https://codedthemes.com/"
},name : 패키지의 이름을 지정합니다.
version : 버전을 설정합니다.
private : 해당 프로젝트는 프라이빗으로 설정되어 npm에 게시되지 않는다. 이는 실수로 프로젝트가 공개 저장소에 업로드되는 것을 방지
homepage : 프로젝트의 홈페이지 URL을 지정한다.
author : 프로젝트의 저자를 나타내는 객체이다.
"dependencies": {
"@ant-design/colors": "^7.0.2",
"@ant-design/icons": "^5.3.1",
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@fontsource/inter": "^5.0.17",
"@fontsource/poppins": "^5.0.12",
"@fontsource/public-sans": "^5.0.17",
"@fontsource/roboto": "^5.0.12",
"@mui/base": "^5.0.0-beta.38",
"@mui/lab": "^5.0.0-alpha.167",
"@mui/material": "^5.15.12",
"@mui/system": "^5.15.12",
"@svgr/webpack": "^8.1.0",
"@vitejs/plugin-react": "^4.2.1",
"apexcharts": "^3.49.0",
"formik": "^2.4.5",
"framer-motion": "^11.0.8",
"lodash": "^4.17.21",
"process": "^0.11.10",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-apexcharts": "^1.4.1",
"react-copy-to-clipboard": "^5.1.0",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-number-format": "^5.3.3",
"react-router": "^6.22.3",
"react-router-dom": "^6.22.3",
"simplebar-react": "^3.2.4",
"slick-carousel": "^1.8.1",
"swr": "^2.2.5",
"util": "^0.12.5",
"vite": "^5.2.10",
"vite-jsconfig-paths": "^2.0.1",
"web-vitals": "^3.5.2",
"yup": "^1.4.0"
},dependencies : 해당 프로젝트가 어떤 라이브러리를 가지고 있어야 제대로 구동될 수 있는지 명세되어 있다.
"scripts": {
"start": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
"lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
"prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
},scripts : 프로젝트의 개발, 빌드, 린팅, 코드 포맷팅 작업을 쉽게 수행할 수 있도록 정의된 명령어 모음이다.
start : 개발 서버를 시작합니다. Vite를 사용하여 로컬 개발 환경을 실행합니다. 이 명령어를 실행하면 Vite가 개발 서버를 시작하고, 코드 변경 시 자동으로 브라우저를 새로 고침해줍니다.
실행 명령어: npm start 또는 yarn start
build : 프로젝트를 빌드합니다. Vite를 사용하여 애플리케이션을 배포 가능한 상태로 번들링합니다. 이 명령어를 실행하면 최적화된 정적 파일들이 생성됩니다.
실행 명령어: npm run build 또는 yarn build
preview : 빌드된 프로젝트를 로컬 서버에서 미리보기합니다. 이 명령어를 실행하면 vite build로 생성된 정적 파일을 로컬 서버에서 제공하여 배포 전 미리보기를 할 수 있습니다.
실행 명령어: npm run preview 또는 yarn preview
lint : ESLint를 사용하여 src 디렉토리 내의 모든 JavaScript, JSX, TypeScript, TSX 파일을 린트합니다. 코드 스타일과 규칙을 검사하여 일관성을 유지합니다.
실행 명령어: npm run lint 또는 yarn lint
lint:fix : ESLint를 사용하여 src 디렉토리 내의 모든 JavaScript, JSX, TypeScript, TSX 파일을 린트하고 자동으로 수정 가능한 문제들을 수정합니다.
실행 명령어: npm run lint:fix 또는 yarn lint:fix
prettier : Prettier를 사용하여 src 디렉토리 내의 모든 JavaScript, JSX, TypeScript, TSX 파일의 코드를 포맷팅합니다. 코드 스타일을 일관되게 유지합니다.
실행 명령어: npm run prettier 또는 yarn prettier
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},프로젝트에서 사용할 ESLint 설정을 정의한다.
"babel": {
"presets": [
"@babel/preset-react"
]
},Babel 컴파일러의 설정을 정의한다.
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},browserslist는 프로젝트가 지원할 브라우저의 리스트를 정의한다.
"devDependencies": {
"@babel/core": "^7.24.0",
"@babel/eslint-parser": "^7.23.10",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.34.0",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^3.2.5",
"react-error-overlay": "6.0.11"
}
}프로젝트의 개발에 필요한 의존성을 정의한다. devDependencies는 개발 환경에서만 필요한 패키지들을 나열하며, 프로덕션 빌드에는 포함되지 않는다.
*devDependencies 와 dependencies 다른점
dependencies: 애플리케이션이 실행되기 위해 프로덕션 환경에서도 필요한 패키지들입니다.
devDependencies: 개발 중에만 필요한 패키지들로, 빌드 도구, 린터, 테스트 프레임워크 등이 포함됩니다.
