create-react-app 없이 새로운 React 앱을 설정하는 방법.

일반적으로 React 프로젝트를 가동하기 위해 우리는 명령을 사용합니다.

npx create-react-app app-name

create-react-app은 시작 프로젝트에 적합하지만 고유한 단점이 있습니다.

사용자 정의 빌드 구성을 추가하기 어렵습니다.

필요하지 않을 수 있는 많은 추가 종속성이 함께 제공됩니다.

이 문제를 해결하는 방법에는 두 가지가 있습니다.

[npm run eject]를 실행하여 앱을 꺼냅니다.

이렇게 하면 webpack, babel, ESlint 등을 포함하는 package.json에 모든 구성 파일과 종속성이 복사됩니다.

babel로 자신의 웹팩 구성을 설정하십시오.

이를 통해 필요에 따라 전체 앱을 사용자 정의할 수 있습니다.

유일한 단점은 웹팩을 설정하고 적절하게 구성하는 데 학습 곡선이 있다는 것입니다.

번들 개발을 사용한다는 webpack을 사용하는 동안 한 가지 단점이 있습니다. 즉, 개발 모드에 있는 동안 파일이 변경되고 저장될 때마다 전체 애플리케이션을 빌드하고 다시 묶습니다. 프로젝트 코드베이스가 충분히 크면 작은 변경 사항이라도 브라우저에 반영되기까지 시간이 걸릴 수 있습니다. 이로 인해 불필요한 개발 워크플로에 추가적인 복잡성이 발생합니다.

이에 대한 반대 접근 방식은 번들되지 않은 개발입니다. 바로 스노우팩이 등장하는 곳입니다.

스노우팩이란?

Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Snowpack leverages JavaScript's native module system (known as ESM) to avoid unnecessary work and stay fast no matter how big your project grows.

개발 모드에서는 파일이 빌드되면 무기한 캐시되며 파일이 변경되고 저장될 때마다 변경된 파일만 snowpack에 의해 다시 빌드됩니다. 또한 브라우저에서 필요할 때만 파일을 다시 빌드한다는 점에 유의하십시오. 즉, 파일이 영원히 캐시되기 때문에 코드베이스의 크기에 관계없이 변경이 필요할 때만 변경된 파일만 다시 빌드되므로 변경이 항상 매우 빠릅니다.

Snowpack's guide to create a react app

먼저 명령을 사용하여 빈 디렉토리에서 npm 프로젝트를 초기화합니다.

npm init

Snowpack을 개발 종속성으로 추가하고 시작 스크립트에 추가합니다.

npm install --save-dev snowpack

package.json 파일은 다음과 같습니다.

이제 다음 명령을 사용하여 프로젝트에 react 및 react-dom을 추가합니다.

npm install react react-dom

이제 디렉토리의 루트 수준에 index.html 파일을 만들고 본문 섹션에 id = root인 div 태그를 추가합니다. 전체 반응 앱이 주입될 div입니다.

또한 우리는 index.js가 되는 스크립트 태그에서 반응 응용 프로그램에 대한 진입점을 참조해야 합니다.

src 폴더에 다음과 같은 index.jsx 파일을 추가합니다.

jsx는 snowpack에 의해 자동으로 js로 변환되어 index.html 파일에 삽입됩니다.

마지막으로 npm start 명령을 실행하면 다음과 같이 표시됩니다.

추가 구성도 수행할 수 있습니다. 확인하고Snowpack documentation 자세히 알아보십시오.

이것이 create-react-app 또는 webpack을 사용하지 않고 React 앱을 쉽게 설정하는 방법입니다.