ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • package.json + package.lock.json
    프론트엔드 2025. 8. 15. 00:08

    Npm

    - package.json에 대해 알아보기 전에 npm에 대해 알 필요가 있다. 

    - npm -> node package manager의 약자다.

    - npm은 다른 사람들이 만든 소스 코드를 모아둔 일종의 저장소이다.

     

    정리하면 Npm은 Node.js에서 사용할 수 있는 패키지(라이브러리, 모듈)를 관리하는 도구이다.
    패키지 : 패키지는 npm에 업로드된 모듈을 말한다. 
    모듈 : 하나의 파일 또는 기능 단위를 말한다. 
    // math.js
    export function add(a, b) {
    return a + b;
    }

    -> 모듈의 예시다. 하나의 기능이기 때문에 이를 모듈이라고 한다

    -> 이 모듈이 여러개로 모여 완성된 것이 패키지다. 

     

     

    package.json

    - pacakge.json은 현재 프로젝트에 대한 정보와 사용중인 패키지에 대한 정보를 담는 파일이다. 

    - pacakge.json은 npm init을 생성하면 알아서 생성이 된다.

    package.json은 패키지 매니저(npm, yarn, bun)가 package.json을 보고 어떤 라이브러리가 필요한지, 어떤 스크립트가 실행되는지 알 수 있다

     

     

    package.json이 하는일 

       1. 프로젝트 정보 기록

          - 이름, 버전, 라이센스 

          

       2. 의존성 관리

    의존성 : 의존성은 내 코드가 동작할려면 꼭 필요한 다른 코드를 말한다.

          - 어떤 라이브러리를 어떤 버전으로 쓰는지 관리

          - 여기서 dependencies vs devDependencies 차이

    dependencies : 프로그램이 실제로 실행될 때 필요한 패키지 -> 서버를 실행하거나, 프론트엔드 앱이 동작할 때 꼭 있어야 함
    devDependencies : 개발할 때만 필요한 패키지 -> ex) esLint등이 대표적인 예시

     

       3.  스크립트 명령어 정의

          - ex) npm run dev 

     

    {
    "name": "my-app", // 프로젝트 이름
    "version": "1.0.0", // 버전
    "description": "테스트 앱", // 설명
    "main": "index.js", // 시작 파일
    "scripts": {
    "start": "node index.js", // npm run start → node index.js 실행
    "test": "echo \"No test\""
    },
    "dependencies": { // 운영 시 필요한 라이브러리
    "axios": "^1.6.0"
    },
    "devDependencies": { // 개발할 때만 필요한 라이브러리
    "nodemon": "^3.0.0"
    },
    "license": "MIT" // 라이선스
    }

     

     

    package.lock.json

    - package.lock.json은 정확히 어떤 버전을 설치했는지 '고정' 시키는 역할이다. 

      -> 이게 정확히 어떤 역할이냐면, 내 로컬버전에서는 잘 되는데요? 이런 말을 방지할 수 있다는 말이다. 

     

    - 근데 package.lock.json은 왜 필요할까? -> 의존성 관리를 굳이 lock에서 해야하나? 

      -> 정답은 :  버그나 에러가 나는 상황을 대비해서 lock으로 나눠서 관리를 한다. package.json에는 패키지를 설치하면 최신버전으로 업데이트가 된다. 하지만 무조건 최신버전이 안전하다는 보장이 없다. 

    -> lock 파일은 현재 잘되는 버전을 고정시켜, 불필요한 업데이트로 인한 리스크를 차단한다. 

     

    '프론트엔드' 카테고리의 다른 글

    자바스크립트 함수  (2) 2025.08.18
    Prisma에 대해  (2) 2025.08.15
    Date.prototype.toISOString()  (0) 2025.08.13
    Next.js 미들웨어로 온보딩 접근 제어 구현하기  (2) 2025.08.13
    TanStack Query 적용해보기  (5) 2025.08.12
Designed by Tistory.