package.json 파일에 대해 질문있습니다.

Question

프론트엔드 공부하고 있는 초보자입니다. 공부를 하다 몇가지 궁금한점이 있어 질문을 드립니다.

1. 처음에 html, css, js 파일로만 만들어 코드 작성을 하고 필요한 패키지들은 cnd 코드를 복붙해서 이렇게 사용을 했었는데 
 npm init -y 이 명령어를 작성하는 이유는 무엇인가요?

2. npm install 로 패키지를 설치하면 node_modules폴더가 생성되는데 이 폴더는 설치된 패키지 관련 폴더들이 들어있는건가요?

3. package.json에서 설치한 패키지를 사용할때 아래 이미지 처럼 코드를 수정해서 npm run 명령어를 이용해서 실행을 하던데 경로를 작성을 한건가요? 첫번째 이미지는 parcel ./index.html 을 작성했고 두번째는 sass인데 sass는 styles/main.scss 로 했는데 inex.html로 할지 main.scss로 할지 이건 어떻게 알 수있나요? 그리고 두번째 이미지에서 
node-sass: node-sass 이건 뭔지도 알고싶습니다.

초보자라 어려운 설명보다 정말정말 쉽게 설명해주시면 너무 감사드리겠습니다.

이승환(Ethan) · Answer

커리어리 봇이 잘 설명해주었지만, 괜히 몇 자 적어봅니다.

1. npm 패키지를 사용하는 프로젝트 개발환경을 처음 구성할 때, 프로젝트의 기본 구조와 package.json 파일을 생성하기 위해 사용합니다. -y 옵션을 추가해서 사용자가 대답할 필요없이 기본적인 설정으로 생성하게 됩니다. 요즘에는 기본 프로젝트 구조가 완성되어 있는 것을 설치해서 사용하기 때문에, 저는 실제로 프로젝트를 생성할 때 사용한 적은 없습니다.

2. 네, node_modules는 패키지 관리자에 의해 설치된 의존성 모듈들이 설치되는 곳입니다. 보통 용량도 크고 파일도 많기 때문에 .gitignore 설정을 통해 git이 추적하지 않도록 해요.

3. package.json 내 scripts 안에 선언되는 부분은, 긴 스크립트 명령어를 단축어로 사용할 수 있게 설정하는 곳입니다. npm run {스크립트 명령어}를 통해 미리 설정한 긴 스크립트 명령어를 손쉽게 사용할 수 있습니다. 질문해주신 스크립트의 뜻은 봇이 더 잘 설명해준 것 같습니다!

소지우 · Answer

안녕하세요, 저도 참고하는 용도로 도움이 될 수 있을까 하여 몇 자 적습니다.

1. npm init -y 명령어를 작성하는 이유
보통 npm 패키지 매니저로 프로젝트 개발 환경을 구성할 때 사용합니다.
npm init만을 작성하는 경우 세부적인 질문을 통해 추가 정보를 입력할 수 있습니다.

package.json에 프로젝트 이름을 설정하는 걸 예로 들 수 있습니다.
-y를 통해 npm init의 세부적인 질문을 스킵하여 기본 설정으로 진행합니다.

나중에 직접 수정도 가능하니, -y로 생략하여도 문제는 없습니다!

2. npm install 을 입력한 경우 node_modules가 생성되는 이유
package.json에 추가된 의존성 모듈 (라이브러리) 들을 다운로드합니다.
이렇게 다운로드된 의존성 모듈들은 node_modules 폴더를 통해 관리합니다.

반대로 npm uninstall은 의존성 모듈을 제거합니다.
node_modules에서 제거되고, package.json에서도 제거됩니다.

3. package.json > scripts의 역할
scripts 부분은 작성하고자 하는 스크립트를 scripts에 추가한 명령어로 간단하게 실행할 수 있게 합니다.

예를 들어, 실행이 필요한 index.js를 실행한다고 했을 때,

scripts: {
  start: node ./root/inroot/index.js,
}

이러한 형태로 작성하여 root > inroot > index.js 파일을 간단하게 실행이 가능합니다.
커맨드에서 node ./root/inroot/index.js 라고 실행하는 것보다 npm run start로 간단하게 가능한 셈이죠!