개발자

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

2024년 04월 15일조회 129

프론트엔드 공부하고 있는 초보자입니다. 공부를 하다 몇가지 궁금한점이 있어 질문을 드립니다. 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" 이건 뭔지도 알고싶습니다. 초보자라 어려운 설명보다 정말정말 쉽게 설명해주시면 너무 감사드리겠습니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

이승환(Ethan)님의 프로필 사진

커리어리 봇이 잘 설명해주었지만, 괜히 몇 자 적어봅니다. 1. npm 패키지를 사용하는 프로젝트 개발환경을 처음 구성할 때, 프로젝트의 기본 구조와 package.json 파일을 생성하기 위해 사용합니다. -y 옵션을 추가해서 사용자가 대답할 필요없이 기본적인 설정으로 생성하게 됩니다. 요즘에는 기본 프로젝트 구조가 완성되어 있는 것을 설치해서 사용하기 때문에, 저는 실제로 프로젝트를 생성할 때 사용한 적은 없습니다. 2. 네, node_modules는 패키지 관리자에 의해 설치된 의존성 모듈들이 설치되는 곳입니다. 보통 용량도 크고 파일도 많기 때문에 .gitignore 설정을 통해 git이 추적하지 않도록 해요. 3. package.json 내 "scripts" 안에 선언되는 부분은, 긴 스크립트 명령어를 단축어로 사용할 수 있게 설정하는 곳입니다. npm run {스크립트 명령어}를 통해 미리 설정한 긴 스크립트 명령어를 손쉽게 사용할 수 있습니다. 질문해주신 스크립트의 뜻은 봇이 더 잘 설명해준 것 같습니다!

profile picture

익명

작성자

2024년 04월 22일

너무 상세하게 답변을 주셔서 너무 감사드립니다. 처음보다 많이 이해하게 되었습니다.^^

소지우님의 프로필 사진

안녕하세요, 저도 참고하는 용도로 도움이 될 수 있을까 하여 몇 자 적습니다. 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로 간단하게 가능한 셈이죠!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 04월 15일

1. `npm init -y` 명령어는 새로운 npm 프로젝트를 시작할 때 필요합니다. 이 명령은 기본적으로 'package.json' 파일을 생성하는데, 이 파일은 프로젝트의 메타데이터를 담고 있습니다. '-y' 옵션은 모든 질문에 대해 "yes"로 자동 응답하여, 기본 설정을 사용하겠다는 뜻입니다. 2. 네 맞습니다, `node_modules` 폴더는 설치된 패키지들과 그들의 의존성이 담겨있습니다. 여기서 개발시 사용되는 모듈들을 가져와서 사용합니다. 3. package.json에서 "scripts" 섹션은 특정 CLI(명령 줄 인터페이스) 명령어를 실행시키기 위한 이름형식(alias)를 설정하는 곳입니다. - "parcel ./index.html"은 "parcel"이라는 도구를 이용해서 "./index.html" 경로의 파일을 번들링하라는 의미입니다. - "styles/main.scss" 도 마찬가지로 해당 경로의 SCSS 파일을 컴파일하라는 것을 지시하는 것입니다. 여기서 어떤 파일을 번들링할지 또는 컴파일할지 결정하는 것은 주로 요구사항과 프로젝트 구조에 따릅니다. 예를 들어, 여러분의 주요 앱이 index.html에서 시작되고 모든 스타일이 main.scss에 있으면, 각각 그 파일들을 지정하면 됩니다. - "node-sass": "node-sass" 부분은 node-sass라는 패키지를 로컬 환경에서 사용할 수 있도록 만드는 것입니다. npm run 명령어로 스크립트를 실행시킬 때 이 이름을 사용하여 해당 패키지의 기능을 실행시킬 수 있습니다. 서술처럼 이해하는데 어려움이 있다면, 간단하게 설명드리자면 package.json 파일은 프로젝트 특성에 대한 정보와 함께 필요한 의존성에 대한 정보가 담겨 있으며, 이를 통해 개발 환경을 쉽게 구축하고 관리할 수 있는 도구라 생각하시면 좋을 것 같습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!