프론트엔드/React

스플리팅 등장 배경리액트 애플리케이션의 경우 빌드를 통해서 배포를 한다. 이 과정에서 파일 크기를 가능하면 최소화 하는 것이 좋다.왜냐하면 파일 크기가 성능을 결정하고 결과적으로 사용자 경험(UX)에까지 영향을 미치기 때문이다.또한, 브라우저에서 JSX나 최신 자바스크립트 문법 등이 문제없이 잘 실행될 수 있도록 트랜스파일링하는 작업도 필요하다.일반적으로 이러한 작업은 빌드 도구인 Webpack, Parcel, Vite 등이 담당한다.Webpack, Parcel과 같은 경우에는 모든 자바스크립트 파일을 하나의 파일로 합치고, CSS 역시 하나의 파일로 합친다.하나의 파일로 모든 자바스크립트의 파일로 묶어서 빌드하면 파일의 크기가 매우 크고, 일부만 수정해도 다시 모든 자바스크립트 코드들을 새로 빌드해야 ..

1. Vite를 사용해야 하는 이유브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다.그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)" 이라는 방법을 사용해야 했다.하지만 처리해야하는 JavaScript 모듈의 개수가 증가하면서 성능 병목 현상이나 서버를 가동하는데 오랜 시간을 기다려야 하는 등 문제가 발생했다.vite는 애플리케이션 모듈을 dependencies와 source code 두 가지 카테고리로 나누어 개선했다. Dependencies개발 시 그 내용이 바뀌지 않을 일반적인 JavaScript 소스 코드이다.보통 애플리케이션에서 사용하는 라이브러리나 패키지를 의..

프로젝트를 진행하면서 계속 변경할 예정 프로젝트 생성(Vite)npm create vite@latest를 실행(Vite 사용하기 위해서는 node.js 설치 필요)프로젝트 이름 설정프레임워크 설정(Vanilla, Vue, React 등)variant 설정(Typescript를 선택할 것인지)cd 프로젝트 이름npm installnpm run dev위와 같이 진행하면 http://localhost:5173/ 주소로 React에 Vite 빌드 도구를 활용한 페이지를 확인할 수 있다. 궁금증이전에는 CRA(create-react-app)을 통해 프로젝트를 생성했었는데, Vite를 사용하는 이유는 뭘까?CRA는 JavaScript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린 편이다. 코드의 양이 많아..