# Bundling
Webpack 훑어보기 - 적용
Webpack에 대해 간단하게 이해를 하고 본격적으로 실습해보면서 체감을 느껴보고 싶었다. 간단하게 Vanilla JS로 Todo List 웹 페이지를 만든 후, Webpack을 적용하려고 한다. 복잡도가 낮은 웹 애플리케이션이라 큰 체감을 못 느낄 수 있지만 수치를
Webpack 훑어보기 - 개념, 목적
웹 개발을 한번쯤 해봤으면 “모듈(Module)”이라는 단어를 들어봤을 것이다. 자바스크립트 관련 코드를 작성하고 다른 코드에 재사용을 위해 특정 함수나 변수들을 export 하는 경우가 많다. 과거에는 모듈 개념에 대해서 크게 신경 쓰지 않았지만, 자바스크립트에 의존
Bundling / App Bundle이란?
프론트엔드 챕터에서 디자인 시스템을 공부하면서 번들링이라는 개념을 알게 되었다. 하지만 iOS 공부를 하면서 번들링이라는 단어를 들어본 경험이 없었던 것 같아 궁금해져 공부를 하게 되었다. 번들링이라는 개념이 앱에서는 어떻게 사용되고, 생겨나게 됐는지에 대해 알아보고
[Frontend] Lazy Loading, Suspense 그리고 SSR
Suspense, lazy loading을 통한 성능 개선 및 React18에서 SSR에 대한 기능 추가에 관련된 글입니다.
Bundler는 대체 왜 날 괴롭히는가? - WebPack, CRA, Vite
한 프로젝트의 유지보수를 진행하며 WebPack과 create-react-app을 함께 사용하는 모습을 확인하였다. Vue로 짜여진 패키지는 webpack으로 빌드하고, React로 짜여진 패키지는 create-react-app의 react-scripts로 빌드하고
create-react-app 없이 리액트 개발환경 구축하기
자, 이제 모든 준비가 끝났습니다. 터미널에 npm run start 혹은 npm run build 를 입력해 봅시다!webpack.config.js 의 output 속성에 적어준 대로 build 폴더 내부에 빌드된 파일이 생성됩니다.production 모드로 생성된
번들링과 빌드 시스템
React를 공부하면서 새로 파일을 생성할 때마다 항상 npx create-react-app(CRA)를 당연하게 사용해왔다. 터미널에 이 한 줄을 입력하는 것만으로도 기본적인 개발 환경 세팅은 끝이 난다. 하지만 이 마법 같은 문장 뒤편에 어떤 일이 일어나는지는 몰랐었
[REACT] bundling & webpack
여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미개발자에게 번들링은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음을 의미두 개의 .js 파일에서 같은 변수를 사용할 때 충돌을 방지해준다.코드의 용량을 최적화하여 인터넷 환경이 좋지 않아도 빠
Webpack _ 번들링과 웹팩 2
이제 본격적으로 리액트 웹앱을 번들링한 후, 배포까지 해보자! create-react-app 없이, 리액트를 웹 팩으로 빌드해보자 우선, 리액트로 개발하기 위해 필수적인 두 라이브러리를 설치한다 ` 번들링을 하는데 필요한 웹팩 관련 라이브러리 역시 설치해준다. 웹팩은
Webpack _ 번들링과 웹팩 1
번들링(Bundling)여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위프론트엔드 개발자에게 번들링이란, 사용자에게 웹 애플리케이션을 제공하기 위해 파일을 묶어서 패키지로 제공하는 것!빌드(build) : 개발이 완료된 앱을 배포하기 위해 하나의 폴더로
Code-Splitting
Bundling 대부분의 리액트 어플리케이션은 webpack등의 도구를 이용해 번들링을 진행합니다. 번들링이란 어플리케이션 파일 사이의 의존성을 추적하고 합치며 하나의 "번들"이라고 불리는 파일로 만드는 과정을 말합니다. 번들은 웹페이지에 포함되어 전체 어플리케이션을
번들링이란?
현대 웹 개발은 굉장히 복잡하기 때문에, 개발자가 코드에만 집중할 수 있도록하는 다양한 프레임 워크와 라이브러리가 존재한다. 예를 들어, CRA는 리액트 개발 환경 구축 없이, 빌드를 자동화 해준다. 자바스크립트 버전이나 Lint, 컴파일에 신경 쓰지 않고 웹 개발이
번들링 블로깅
모듈: 특정 기능을 갖는 작은 코드 단위가독성, 유지보수를 위해 여러 개의 파일로 분리 -> 네트워크 병목현상 발생응답시간을 줄이기 위해 파일 수를 줄이면 가독성, 유지보수의 어려움 발생번들링이란 모듈(분리된 파일)들의 의존성 관계를 파악하여 그룹화시켜주는 작업이다.서
[한 줄 용어] Bundling이란?
참조: https://haviyj.tistory.com/17영상: https://www.youtube.com/watch?v=U6BUs_n8WWk