inflearn logo
강의

講義

知識共有

フロントエンド ビルド システム 完璧ガイド - Part.1: モジュール システム

번들러 이해 및 학습 방향에 대한 질문입니다.

解決済みの質問

77

leeebug

投稿した質問数 2

0

안녕하세요, 강의 잘 듣고 있습니다!
최근 개인 프로젝트로 래핑 라이브러리를 만들고 있고 번들러로 Rolldown을 사용하고 있습니다.

강의에서 언급된 Rollup과 구조가 유사하고 기본 개념은 거의 동일하다고 알고 있습니다. Rolldown을 사용하고 있는 상황에서 Webpack이나 Rollup의 구조를 먼저 이해하는 것이 학습에 도움이 될까요? 학습 우선순위나 접근 방식을 어떻게 잡는게 좋을지 궁금합니다.

javascript node.js 웹팩 vite esm

回答 2

1

hackurity01

안녕하세요, leeebug 님.

모두 공부해보면 좋겠지만, 제가 선택을 한다면
Rollup을 먼저 공부해볼 것 같습니다. 이유는 다음과 같습니다.

  • 뭐가 새로 등장하는 번들러라는 개념에서는 크게 다르지 않음

    • 즉, 번들링 기능에서 디테일한 차이는 있겠지만, 동작하는 방식에서는 대동소이함

    • 물론, 최근 빌드 도구들은 다양한 기능들(번들링, 트랜스파일링 등)을 종합적으로 가지고 있어서 전체적인 이해를 하려면 번들러 뿐만 아니라 다른 기능들에 대해서도 이해할 필요는 있음

  • 가장 전통적이고 역사(?)가 긴 Webpack을 공부하면 좋긴 하지만, 요즘 번들러에 비해서 많이 복잡함

    • 따라서 우선 간단한 Rollup을 중심으로 공부하고 여유가 있다면 Webpack의 구조도 보면 좋을 듯

  • 개인적으로는, Rolldown은 아직 안정적인 버전이 아니라고 생각해서 실험적인 도입이 아니면 간단한 토이프로젝트에서만 사용해보고 우선 지켜보는 것을 추천

물론 상황에 따라서는, 그러니까 현업에서 Webpack을 주로 사용하고 계시다면 Webpack을 먼저 공부해보는 것이 좋겠습니다!

 

도움이 되셨길 바라며 강의에 관심을 가져주셔서 감사합니다!

0

leeebug

말씀대로 rollup 먼저 공부해봐야겠네요. 사실 해당 질문 말고도 어떤 번들러를 선택해야할지도 궁금했는데 의문이 동시에 해결되었습니다.

답변 감사합니다!

 

1

communityai8509

안녕하세요, 인프런 AI 인턴입니다. leeebug님.

번들러 관련 학습 방향에 대해 질문해주셨군요! Rollup과 Webpack은 각각의 특성과 장점을 가진 번들러로, 프론트엔드 개발에서 많이 사용됩니다. Rollup은 주로 라이브러리 번들링에 최적화되어 있으며, Webpack은 강력한 생태계와 다양한 플러그인 지원을 통해 복잡한 애플리케이션에 유리합니다. 두 번들러의 기본 개념과 구조를 이해한다면, Rolldown을 사용할 때도 큰 도움이 될 것입니다.

  1. Rollup: 먼저, Rollup의 구조와 동작 방식을 깊이 이해하는 것이 좋습니다. 특히 Tree Shaking과 같은 최적화 기법은 라이브러리 개발 시 중요한 요소입니다.

  2. Webpack: 그 다음으로, Webpack의 설정 방법과 플러그인 시스템을 학습하세요. 이는 애플리케이션 개발 시 다양한 상황에 대응할 수 있는 힘이 됩니다.

번들러의 기초를 학습한 후에는, 프로젝트의 요구사항에 맞게 각 번들러의 특성을 활용하여 최적화할 수 있습니다. 강의에서 제공하는 자료와 연습 문제를 통해 실습하는 것도 좋은 방법입니다.

관련해서, 다음과 같은 질문들이 유사한 주제를 다루고 있을 수 있으니 참고해보시기 바랍니다:
- Rollup과 Webpack 비교 및 선택 기준

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

3강 질문

0

18

1

74. 데이터 캐시 - 1 (이론) 강의 영상 누락

0

26

1

2강 nodejs 3단계 설명 질문

0

33

1

imagesLoaded에 관한 질문

0

19

2

useEffect와 lifecycle문의

0

26

2

프론트엔드 학습 수준 문의

0

37

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

48

2

최근 코테, 과제 테스트 트렌드

0

67

2

lucide react 아이콘 설치

0

46

2

17강 zustand store 서버에서 생성

1

36

1

문의관련 문의

0

44

2

next.js 를 2대이상 실행하는 경우 제공하는 cache 기능들은 어떻게 되나요?

0

55

2

76. 전문성 더하기: 놓치면 아쉬운 관련 기술들 수업 자료가 없어요.

0

47

2

fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다

0

36

1

ai 도구 질문

0

31

1

저는 왜 콘솔에서 props가 한 줄만 찍히나요?

0

47

1

렌더링 차단 리소스 javascript 실행에 관련해서 질문 있습니다.

0

47

2

데이터 로딩중 화면만 계속 나와요!!

0

54

2

퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요

0

79

2

깃 이메일이랑 비번이 필요하다고 하네요

0

35

1

02-04 layout.tsx 구조가 달라요

0

59

2

불변성을 지키며 수정 삭제를 할때도 Map이 유리한가요?

0

54

1

개인 프로젝트로 앱 개발해서 다운로드 1300 달성했는데 어느 정도 의미가 있을까요? (안드로이드 개발자)

0

69

1

캐싱 단계 질문

1

105

1