React 스크립트는 React에서 시작합니다

기술적으로 처음부터 React 애플리케이션을 빌드하는 것이 가능하지만 모든 파일을 만들고 구성을 조정해야 하므로 시간이 많이 걸릴 수 있습니다. 따라서 대신 React 앱 개발을 위한 친숙한 환경을 제공하는 create-react-app을 사용할 수 있습니다. 또한 개발 서버를 시작하고 핫 리로딩을 활성화하는 데 사용할 수 있는 스크립트와 구성 및 기타 필수 기능이 포함되어 있습니다.

create-react-app의 react-scripts

create-react-app 패키지를 설치하면 하나의 명령으로 모든 기능을 갖춘 React 애플리케이션을 설정할 수 있습니다. 개발자는 명령줄에 npm run start를 입력하기만 하면 로컬 호스트 서버에 라이브 애플리케이션을 생성할 수 있습니다. 기본 create-react-app 구성에는 애플리케이션을 실행하는 데 필요한 전체 스크립트 세트도 포함됩니다. 초보자가 직접 프로젝트를 구성하는 수고를 덜어주기 위해 이러한 방식으로 구성됩니다. 그러나 react-scripts는 package.json 파일에서 사용자 정의할 수 있습니다.

react-scripts start

이 스크립트를 실행하려면 명령줄에서 npm run start를 실행하십시오. 약식 명령 npm start를 사용할 수도 있습니다. 그것은 create-react-app에게 개발 환경을 설정하고, 로컬 서버를 시작하고, 핫 모듈을 다시 로드하도록 지시합니다.

package.json 파일에는 스크립트 이름과 실행 참조를 참조하는 키-값 쌍이 있는 scripts 개체가 포함되어야 합니다. 이것은 여러 작업을 수행하는 npm-run-all -p watch-css start-js 명령을 실행하도록 React에 지시하는 더 쉬운 방법일 뿐입니다. 이 경우 npm run start는 watch-css 및 start-js라는 두 스크립트의 실행을 트리거합니다. 전자는 .scss 파일이 일반 .css 파일로 변환되고 스타일 변경 사항이 애플리케이션에 자동으로 반영되도록 합니다. 후자는 React에 애플리케이션을 개발 모드로 설정하고 localhost:3000을 사용하여 호스트하도록 지시합니다.

커스터마이징

npm start는 단순히 명령입니다. 필요한 경우 해당 작업을 사용자 지정할 수 있습니다. 예를 들어 애플리케이션을 호스팅하기 위해 localhost 포트를 구성할 수 있습니다. 다음은 예입니다.

'scripts': {
  'start': 'set PORT=8000 && react-scripts start',
  'build': 'react-scripts build',
  'test': 'react-scripts test',
  'eject': 'react-scripts eject'
}

여기에서 기본 포트 대신 localhost:8000 포트를 사용하도록 스크립트에 명시적으로 지시합니다.

명령줄에 npm run scriptName을 입력하여 다른 스크립트를 실행할 수도 있습니다. create-react-app 애플리케이션을 실행 중이고 script가 무엇을 하는지 알 수 없다면 package.json 파일을 살펴보십시오.