Redux Auth Starter: Zero Config CRA 템플릿

Redux auth starter은 단일 명령을 실행하여 제로 구성으로 React 앱 템플릿 만들기를 사전 구성합니다.

Redux 인증 스타터는 무엇입니까?

Redux auth starter은 Create React App (CRA) 템플릿으로, 필요한 모든 종속성으로 사전 구성되고 단일 명령을 실행하여 확장 가능한 SaaS 애플리케이션을 구축하도록 설정됩니다.

왜 React 앱을 만들지 않습니까?

리액트 앱을 개발해야 한다면 우리 대부분은 Create React App(CRA)로 리액트 앱 개발을 시작합니다. CRA에는 대신 다시 로드, 최적화된 번들, 단일 종속성 제공, ESlint, 테스트 및 유지 관리 용이성과 같은 많은 기능이 있습니다.
그러나 이러한 기능이 Scalable SaaS 애플리케이션을 구축하기에 충분합니까?
보자

기본 SaaS 앱의 경우 API에 액세스해야 합니다. 여러 구성 요소, 로컬 상태 및 글로벌 상태, 인증, 경로, 우수한 UI 및 UX가 있습니다.

CRA를 사용할 때 위의 사항들을 수동으로 설정해야 하고 이 설정 역시 시간이 더 걸리기 때문에 처음부터 새로운 앱을 개발할 때마다 이 작업을 해야 합니다. 이러한 단점을 극복하기 위해 CRA 템플릿을 개발했습니다redux-auth-starter. 명령어 하나로 위의 것들을 극복할 수 있는 곳.

Redux Auth Starter의 장점

1. Redux 인증을 위해 미리 구성된 저장소, 기본 작업 및 축소기.

Redux: JS 앱을 위한 예측 가능한 상태 컨테이너

2. React-Router를 사용하여 기본 인증으로 공개, 비공개 경로 설정.

사용자가 로그인 전에 개인 경로에 액세스하고 로그인 후에 공용 경로에 액세스하도록 제한하는 논리를 작성할 필요가 없습니다.

3. UI 구성요소용으로 사전 설치됨Ant Design.

Ant Desing은 웹 애플리케이션용으로 설계된 엔터프라이즈급 UI이며 즉시 사용할 수 있는 고품질 React 구성 요소 세트입니다.



4. Axios GET, POST, PATCH, DELETE API 동사 헬퍼가 있는 클라이언트.

Axios를 사용하여 API에 액세스하기 위한 사전 구성된 헬퍼.

5. 절대수입

No need use ../../../.. to import your components

6. 쉽게 사용자 정의할 수 있는 기본 폴더 구조.

├── README.md
├── jsconfig.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── Config
│   │   ├── axiosClient.js
│   │   └── constants.js
│   ├── components
│   │   ├── Dashboard.js
│   │   ├── LoginPage.js
│   │   └── Users.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── redux
│   │   ├── Authenticate
│   │   │   ├── actions.js
│   │   │   ├── reducer.js
│   │   │   └── saga.js
│   │   ├── rootReducers.js
│   │   ├── rootSaga.js
│   │   └── store.js
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

7. Sass 활성화됨. 모든 sass 기능을 사용할 수 있습니다.

Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문가용 CSS 확장 언어입니다.

8. reqres으로 모의 인증.

9. 사용자 지정 구성 파일이 포함된 ESLint

ESLint는 코드를 정적으로 분석하여 문제를 빠르게 찾습니다.

10. .env 파일 추가

환경 변수는 빌드 시간 동안 포함됩니다.

11. 단일 명령 실행

yarn create react-app your-project-name --template redux-auth-starter

또는

npx create-react-app your-project-name --template redux-auth-starter

redux auth starter을 사용하여 개발을 고정하십시오.