Growth Log : by dpwls

Appearance

0912 ​

package란 ​

  • 재사용 가능한 코드, 라이브러리, 또는 모듈의 묶음.

package registry ​

  • 수많은 패키지들을 보관하고 있는 저장소.

package Manager ​

  • 패키지를 설치, 업데이트, 삭제하는데 사용하는 도구.
  • npm, pnpm, yarn ...

package.json ​

package.json의 주요 property ​

기본 정보 (솔직히 단어만 보면 뭐할지 다 알 수 있기에 스킵) ​

  • name: 패키지 이름 (npm에 배포할 때 유니크)
  • version
  • description
  • keywords
  • author
  • license
  • repository
  • bugs

실행 관련 ​

  • scripts: npm으로 실행할 스크립트 모음

의존성 관리 ​

  • dependencies: 실행시 필요한 패키지
  • devDependencies: 개발시에만 필요한 패키지
  • peerDependencies: 함께 설치되어야 하는 패키지 버전 제약
  • optionalDependencies: 함께 설치 안해도 되는, 선택적인 패키지
  • bundleDependencies: 패키지 배포시 함께 포함할 의존성

환경 ​

json
// package.json  
{
  "type": "module"  
}

들었던 의문 ​

1. node가 없을 땐 자바스크립트 패키지 관리를 어케 했는가? ​

  • 애초에 질문부터 잘못된게, 자바스크립트 패키지라는게 node의 등장과 함께 나왔기 때문에 패키지 관리자의 발전과 다양성? 은 있어도
  • node가 없었더라면 그냥 <script> 태그를 활용해서 스크립트를 주욱 불러왔을 것
    • 이 방식을 cdn(content delivery network)을 사용한 방식이라고함.

2. 왜 json 파일일까? ​

  • 아무래도 "자바스크립트"라는 언어의 패키지를 관리하는거니까. 자바스크립트와 가장 잘맞는 json을 사용하는 것. 파싱도 바로 되고, 데이터 크기도 작아서 가볍다고 한다.
  • xml은 시작과 종료태그가 있기에 json보다 파일 크기가 크고 파싱이 상대적으로 오래걸림

3. 왜 main과 module용의 진입점이 나눠져 있을까? ​

  • main은 CJS용
  • module은 ESM용

4. CJS와 ESM의 차이는 무엇인가? ​

  • CJS는 동기적, ESM은 비동기적.
  • ESM은 Top-level Await를 지원하기 땜에 비동기적으로 동작함.
    • Top-level Await란?
      • JS의 비동기 처리를 더 간결하고 직관적으로 만들어주는 기능
      • 이름 그대로 await 키워드를 async 함수 안이 아닌 모듈의 최상위 레벨에서 바로 사용할 수 있게 해주는 것.
  • 즉 그 전엔 이렇게 써야됐는데,
js
const fetchData = async () => {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  return data;  
};
  • es2022 이후로는 async로 감싸지 않고도 아래처럼 쓸 수 있음
js
const response = await fetch('https://api.example.com/data');  
const data = await response.json();
  • 이게 왜 필요한가?
    • Top-level await는 해당 모듈의 로딩을 일시 중단시킴
    • 즉, 모듈이 사용하는 비동기 작업(예: 네트워크 요청, 파일 읽기)이 완료될 때까지 이 모듈을 import하는 다른 모듈들(자식 모듈)의 실행을 기다리게 만듦.
    • 왜 이렇게 하냐면, 모듈의 반환값이 비동기 작업의 결과물이라면 실제 데이터가 아니라 Promise 객체가 출력되기 땜에 로딩을 완전히 보장할 수 있도록 하 위해서.
  • 단점은 없는가?
    • 완전한 로딩을 기다리고 실행하기 때문에 모듈 로딩이 블로킹 될 수 있고, 이는 애플리케이션의 초기 로딩 시간을 지연시킬 수 있다.

5. bundleDependencies와 dependencies의 차이는 뭘까? ​

  • dependencies는 웹이 실행될 때 필수적으로 필요한 패키지들을 정의
  • bundleDependencies는 npm pack명령어로 패키지를 만들 때 필요한 패키지들을 정의

6. peerDependencies와 package-lock.json의 차이는 뭘까? ​

  • Q. peerDependencies도 버전을 설정하는거고, package-lock도 버전을 locking하는걸로 아는데 둘은 뭔 차이가 있는걸까?
  • A. package.json의 peerDependencies는 "이 패키지가 작동하려면 외부 환경에 이 버전의 패키지가 필요하다"고 알려주는 역할이고, package-lock.json은 "지금까지 이 프로젝트를 개발하면서 실제로 이 패키지들과 그 종속성들의 정확히 이 버전이 설치되었다"고 기록하여 모두가 같은 환경을 갖도록 해주는 역할

참고 ​