• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

Snowpack 에서 지원하는 Rollup 플러그인은 왜 쓸까요?

21.02.11 08:36 작성 조회수 198

2

안녕하세요
강사님! 새해 복 많이 받으세요^^

Snowpack 이관하다 SCSS 적용안되는것을
스노우팩 예제 깃헙 소스 참고해서 Sortable SCSS 적용안되던거 잘되게 만드느라 이것저것 플러그인 공부도 하게 되었는데요,

스노우팩 공식사이트에서 그랬는지 잘은 기억이 안나는데,
Snowpack 만 있어도 충분히 생산성이 좋아지는데,
Rollup 플러그인을 지원하는 공식홈에 적힌 설명이, 

  • Snowpack + Rollup 은 최상의 생산성을 제공합니다

대충 이런 것이었습니다. 그래서,

저는 이게 단순히 이전의 Rollup 프로젝트를 Snowpack 으로 점진적인 적용을 위한 플러그인 인줄로만 짐작했는데, `생산성`을 높여주다니요?

어떤식으로 생산성이 좋아진다는 것인지, 의문이 드는데요,
저는 막 이렇게 생각했거든요,
`컴파일러가 2개에 번들링까지 한다는것 같은데 어느부분에서 생산성이 좋아지는걸까??????` 라구요 ㅎㅎ

이런 부분에 대해서 강사님의 견해가 궁금합니다.

읽어주셔서 감사합니다.

답변 4

·

답변을 작성해보세요.

2

Truestar님의 프로필

Truestar

질문자

2021.02.12

네... 교과서 레벨의 답변을 주셧네요 많은도움 감사합니다!

저 지난번 스노우팩 + 타입스크립트 + 바밸 적용 해결했어요!! babel.config.json 추가 하면 되는 간단한 것을 너무나 길게 해맸네요 ㅎㅎ 노드 공부도 필요한것같습니다 ㅎㅎ

이제 마무리하고 다음 무비강의에서 뵙겠습니다^^

2

Snowpack은 빌드 도구이고 Svelte 컴파일은 @snowpack/plugin-svelte 같은 플러그인이 담당합니다.
알고 계신 Snowpack의 _dist_ 디렉터리에는 번들이 아니고 브라우저에서 동작할 빌드 결과가 들어갑니다.

조금 더 쉽게 정리하자면,
Rollup의 build 디렉터리는 번들(묶음 처리)된 빌드 결과가 들어가고,
Snowpack의 _dist_ 디렉터리는 번들 없는(일부는 번들일 수도 있는) 빌드 결과가 들어갑니다.

Snowpack의 특징인 빠른 개발 빌드가 여기에서 설명이 됩니다.
개발할 때 프로젝트를 수정하면, 수정된 결과에 맞게 브라우저에서 동작시킬 결과를 만들어야 하는데요(그것이 빌드), 번들(묶음 처리)을 하게 되면 한 글자만 수정하더라도 번들 전체를 다시 만들어야 하죠.
그런데 Snowpack은 번들(묶음 처리)이 아닌 따로따로 결과를 만들기 때문에 한 글자를 수정했다면, 그 수정된 파일(모듈)만 다시 만들면 됩니다.
따라서 프로젝트 규모가 커질 수록 속도 차이가 아주 크게 발생합니다.
그리고 이런 방식이 가능해진 것이 웹 브라우저에서 모듈 사용을 지원하기 시작하면서입니다.

Snowpack을 사용한다는 것은 내 프로젝트를 웹 브라우저에서 모듈 방식으로 동작시키는 것이고(그렇게 동작할 수 있도록 정리해 주는 것이 Snowpack이고요), 그 방식에 필요한 일부 모듈을 만들 때 번들이 필요할 수도 있는데 그때 Rollup 같은 번들러를 사용한다는 거죠.

빠르게 정리하느라 조금 거칠게 표현한 부분이 많은데요.
대략적인 내용은 이해되실 거로 생각합니다.
관련해 'JS 번들 개발이란'으로 검색해 보시면 좋은 정보가 많이 있네요~😉

2

Truestar님의 프로필

Truestar

질문자

2021.02.12

답글 감사합니다 설인데 남겨주셨네요^^ 고맙습니다

다른것이 아니라, 제가 번들링 개념이 잘 안잡혀있어서 이해가 어려웠나봅니다.

하나만 더 여쭤봐도 될까요? 스노우 팩은 컴파일러 이면서도 여러 플러그인을 통해 _dist_ 에 번들링이 되고 있던건 맞는거죠?

롤업도 build폴더에 결과가 저장되는데, 이부분이 비슷해서 동일시하다보니 생긴 궁금증 이었어요

속도면에서 스노우팩이 월등하기도 하고, 하지만 결정적인 차이가 어느부분인지 아직감이 잘 안오네요 ㅎㅎ

혹시 이런 부분에 도움을 받을수 있는 자료가 있을까요?

2

우선 Snowpack은 번들러가 아니고 빌드 도구입니다.
Snowpack 기본 원리(번들 없는 개발, Unbundled Development)로 봐선 마치 번들이 필요치 않을 것 같지만,
프로젝트에선 상황에 따라 언제든지 파일 번들이 필요할 수도 있고,
그때 Rollup이나 Webpack을 통해 그 작업(번들)을 수행한다는 것이죠.
번들 중심 개발(Bundled Development)은 아니지만, 번들은 충분히 필요할 수 있다고 정리할 수 있습니다.

그리고 이 도구들은 브라우저에서 동작하는 것이 아니기 때문에,
원하는 결과만 만들 수 있다면 어떻게 사용하든 상관없으니 굳이 분리해서 생각할 필요가 없을 듯합니다.

결국, 이런 내용 때문에 '생산성 향상'이라 표현한 것 같습니다.
제 의견이 생각을 정리하시는 데 도움이 되실까요?

그럼 Truestar 님도 새해 복 많이 받으시고요,😆
즐거운 명절 보내세요~👍
감사합니다.