당신이 모를 수도 있는 Create React App이 제공하는 매우 유용한 기능들

이 문서에서는 create-react-app에서 제공하는 잘 알려지지 않았지만 매우 유용한 기능을 살펴보겠습니다.

시작하겠습니다!

HTTP 대신 HTTPS에서 애플리케이션 제공

때때로 프로덕션에 배포하기 전에 모든 API가 제대로 작동하는지 확인하기 위해 HTTPS에서 앱을 테스트해야 합니다.

Create-react-app은 이를 수행하는 쉬운 방법을 제공합니다.

프로젝트 폴더에 .env (dot env) 파일을 만들고 다음과 같이 그 안에 HTTPS=true를 추가합니다.

HTTPS=true

yarn start 또는 npm start 명령을 실행하여 앱을 다시 시작하면 이제 전체 애플리케이션이 HTTPS에서 제공됩니다.

가져오기에 절대 경로 사용

모든 애플리케이션에는 다음과 같이 다른 파일에 도달하기 위해 현재 폴더에서 나와야 하는 import 문이 있습니다.

import { login } from '../actions/login';
import profileReducer from '../reducers/profile';

따라서 우리가 있는 폴더를 확인한 다음 다른 파일을 가져오려면 해당 번호의 이중 점을 추가해야 합니다. Create-react-app을 사용하면 이를 쉽게 처리할 수 있습니다.

프로젝트 폴더에 새 파일jsconfig.json을 만들고 그 안에 다음 코드를 추가합니다.

{
 "compilerOptions": {
   "baseUrl": "./src"
 }
}

여기에서 모든 파일이 있는 기본 폴더를 지정했습니다. (대부분 React 애플리케이션의 src 폴더입니다).

이제 위의 가져오기를 아래와 같이 단순화할 수 있습니다.

import { login } from 'actions/login';
import profileReducer from 'reducers/profile';

이 구성을 사용하면 이제 기본 URL로 src를 사용하므로 위 코드에서 수행한 것처럼 src 폴더 내에서 시작하는 폴더 경로만 지정하면 됩니다.

이렇게 하면 깊게 중첩된 경로에 추가 점을 추가하지 않습니다.

React에서 환경 변수에 쉽게 접근

환경 변수는 개인 정보를 안전하게 유지할 수 있기 때문에 중요합니다. 사용자 이름, 비밀번호 또는 API 키일 수 있습니다.

또한 환경(dev, staging, prod 등)에 따라 다양한 데이터 값을 앱에 제공할 수 있습니다.

Create-react-app를 사용하면 외부 라이브러리를 사용하지 않고도 환경 변수를 읽을 수 있습니다.

React에서 환경 변수를 만들려면 새.env(dot env) 파일을 만들고 그 안에 다음과 같이 환경 변수를 선언합니다.

REACT_APP_API_BASE_URL=environment_variable_value
REACT_APP_PASSWORD=your_password

create-react-app이 읽을 수 있도록 환경 변수 이름을 REACT_APP_로 시작하는 것이 중요합니다.

변수로 .env 파일을 생성하면 process.env 객체 내부의 React 앱에서 사용할 수 있습니다.

process.env.REACT_APP_API_BASE_URL
process.env.REACT_APP_PASSWORD

아래의 코드 샌드박스 데모를 확인하여 실제로 작동하는지 확인하십시오.



참고: 개인 정보 보호를 위해 .env 파일을 git 저장소에 푸시하면 안 되므로 .env 파일에 .gitignore 항목을 추가해야 합니다.

읽어 주셔서 감사합니다!

최근에 게시된 내 과정Mastering Redux을 확인하십시오.

이 과정에서는 다음을 배웁니다.

기본 및 고급 Redux

배열 및 개체의 복잡한 상태를 관리하는 방법

여러 리듀서를 사용하여 복잡한 redux 상태를 관리하는 방법

Redux 응용 프로그램을 디버깅하는 방법

react-redux 라이브러리를 사용하여 React에서 Redux를 사용하여 앱을 반응형으로 만드는 방법.

redux-thunk 라이브러리를 사용하여 비동기 API 호출 등을 처리하는 방법

그런 다음 마지막으로 지불 수락을 위해 스트라이프 통합을 통해 처음부터 완전한 것을 구축하고 프로덕션에 배포합니다.



JavaScript, React, Node.js에 관한 정기적인 콘텐츠를 최신 상태로 유지하고 싶으십니까? .