니르바나
2k
2019-12-20 18:05:51
5
435

npm install 시 개발의존성을 가진건지 배포시에도 같이 들어가야할 package인지 설정하잖아요~?


근데 그게 개발시에만 필요한건지, 배포시에도 필요한지는 어떻게 아나요..?

webpack을 사용 중인데 webpack쓰면 최종 js css가 bundle형태로 묶여서 나오잖아요~?

그것만 있으면되는거면 vuetify 같은건 왜 dev-dependency가 아니라

dependency로 들어가는건지.. 궁금합니다.

0
  • 답변 5

  • 니르바나
    2k
    2019-12-20 18:14:53
  • 헬헬뿡
    607
    2019-12-20 19:49:08 작성 2019-12-20 20:02:22 수정됨

    vuetify 를 사용해보지는 않아서 정확한 답변은 아닐 수 있으나, 공식 홈페이지에 보니 'Vue 용 머티리얼 컴포넌트 프레임워크' 라고 소개하고 있네요.

    vuetify는 vue 기반 프레임워크이니 vuetify 는 vue 에 의존한다고 할 수 있습니다.

    vue 로 개발한 프로젝트를 webpack build 시켜 나온 js 를 보시면 vue 를 require 하는 line 이 있을 겁니다.

    vue 는 런타임시 사용된다는 의미입니다.


    즉, vue 가 dependency 에 속하니 vue 에 의존하는 vuetify 또한 dependency 로 설치합니다.


    https://vuetifyjs.com/ko/customization/icons  에 나온 내용은 vuetify 프레임워크가 아닌 vuetify 에서 사용하는 font 나 icon 과 같은 리소스 패키지 입니다. 

    리소스들은 vue 에 의존하지 않기 때문에 -D 옵션으로 설치합니다.



  • 니르바나
    2k
    2019-12-20 20:42:09 작성 2019-12-20 20:43:24 수정됨

    답변 감사합니다.

    vue create로 프로젝트 생성 시 devdependency에 추가된 것들이 sass, lint관련된 코드들이더라구요. 이것들은 마지막 빌드파일 만들어낼때까지만 필요하다는게 자연스레 이해가 됩니다.


    그런데 말씀하신 리소스 라는게 최종 빌드타임에 webpack에 의해서 리소스로 포함이 안되면 아이콘들이 다 깨질듯한데, 이런것은 직접 빌드해서 실행하거나 코드를 살펴보지 않는 이상 알 수 없는건가요?


    vue-vuetify와 의존성이 있으면

    vuetify가 잘 동작하려면 MDI가 필요하니 의존성이 있는게 아닌가 생각이 드는데 제가 잘못이해하고 있는건가요.ㅠ

    혹시 자세한 설명이 있는 포스팅 아시면 공유해주시면 감사드려요 :)

    내용을 좀 찾아봐도 그냥 devdependency는 개발할때 의존성 띈 모듈,

    런타임에 필요한건 dependency에 포함시켜야된다는데.. 정의는 이해가나 그 모듈이 뭔지 사실 잘 모르겠습니다/

  • 헬헬뿡
    607
    2019-12-20 20:55:20 작성 2019-12-20 20:56:43 수정됨
    제가 적지못한 부분이 있었네요.
    두번째 올려주신 vuetify icon 링크에 나온것들은 vuetify 에서 기본적으로 제공하는 리소스 외에 다른 버전의 리소스 사용 시 설치하는 리소스 패키지 입니다.

    링크에 나온 글을 읽어보시면 됩니다.
  • 니르바나
    2k
    2019-12-20 22:02:28 작성 2019-12-20 22:03:16 수정됨

    저도 기본적으로 따라오는줄 알았는데요~ 아이콘이 아예 안떠서 찾다가 알게됐는데

    따로 모듈 설치를 해줘야하는거 같더라구요.

    vue cli 3버젼 넘어오면서 바뀐건지는 모르겠습니다.

    https://stackoverflow.com/questions/57053728/vuetify-icon-not-showing

    여기도보면--save 옵션 주라는데 예제마다 어딘 --save-dev고 어딘 --save네요.ㅠ


  • 로그인을 하시면 답변을 등록할 수 있습니다.