2024.02.07 TIL

 

bundler란?

js파일을 합쳐주는 거

번들러(Bundler)는 웹 개발에서 사용되는 자바스크립트(JS) 애플리케이션의 의존성 관리 도구이다. 웹 개발 프로젝트는 여러 개의 JS 파일, CSS 파일, 이미지 등 다양한 리소스로 구성되어 있으며, 이러한 자산들을 효율적으로 관리하고 배포하기 위해 번들러를 사용한다. 번들러는 이러한 파일들을 모아서(번들링) 하나 또는 몇 개의 파일로 합치는 역할을 한다. 이 과정에서 파일 크기를 최소화하는 압축, 브라우저에서 사용할 수 있도록 변환(트랜스파일링), 모듈 의존성 해결 등의 작업을 자동으로 처리해 준다.

CRA로 프로젝트를 만들면 webpack을 bundler로 사용

vite로 프로젝트를 만들면 veet을 번들러로 사용

 

Create React App (CRA)

장점:

• 설정 없는 시작: CRA는 바로 사용할 수 있는 구성을 제공하여, 복잡한 웹팩 설정 없이도 React 애플리케이션 개발을 즉시 시작할 수 있게 해줍니다.
• 커뮤니티와 호환성: React 개발자들 사이에서 널리 사용되며, 다양한 라이브러리와 플러그인이 CRA와의 호환성을 보장합니다.
• 시간 절약: 기본적인 웹팩 설정, Babel 설정 등을 신경 쓸 필요가 없어 개발에 집중할 수 있습니다.
• Facebook 지원: Facebook에서 지원하며, 정기적으로 업데이트되고 문서화되어 있어 안정성과 지속적인 지원을 기대할 수 있습니다.

단점:

• 유연성 부족: 복잡한 설정이나 사용자 정의가 필요한 프로젝트에서는 CRA의 기본 설정에 제한을 느낄 수 있습니다.
• 빌드 시간: 큰 프로젝트에서는 빌드 시간이 길어질 수 있으며, 초기 개발 서버 시작 시간도 느릴 수 있습니다.
• 오버헤드: 간단한 프로젝트의 경우에도 CRA가 제공하는 기능이 과도할 수 있으며, 필요하지 않은 코드나 라이브러리가 포함될 수 있습니다.

Vite

장점:

• 빠른 시작: Vite는 개발 모드에서 ES 모듈을 이용해 빠른 핫 모듈 교체(HMR)와 초기 서버 시작 시간을 제공합니다.
• 유연성: Vite는 웹팩보다 설정이 간단하고, 필요에 따라 쉽게 설정을 조정할 수 있어 더 큰 유연성을 제공합니다.
• 최신 기술 지원: Vite는 최신 JavaScript 기능, CSS 기능, 그리고 Vue.js, React와 같은 최신 프레임워크를 원활하게 지원합니다.
• 성능: 빌드 시간이 빠르고, 개발 중에도 최적화된 자원을 사용해 더 나은 성능을 제공합니다.

단점:

• 커뮤니티와 호환성: 비교적 새로운 도구이기 때문에 CRA에 비해 커뮤니티가 작고, 일부 라이브러리나 플러그인과의 호환성 문제가 발생할 수 있습니다.
• 학습 곡선: Vite의 설정과 최적화 방법을 이해하려면 CRA보다 더 많은 학습이 필요할 수 있습니다.
• 문서화와 지원: Vite는 활발하게 개발되고 있지만, CRA만큼 광범위하게 문서화되어 있거나 지원받지 못할 수 있습니다.

 

 

문자열을 숫자로 바꿀때 앞에 +를 붙여주면 암시적 형변환이 된다.

숫자를 문자열로 바꿀때는 ${숫자}