frost web 계정 및 API 토큰 관리를 위한 Po.et Frost API의 프런트 엔드입니다.
모든 새로운 기능은 기본적으로 꺼진 기능 토글 뒤의 마스터에 병합되어야 합니다. 기능이 충분히 테스트되면 토글을 제거할 수 있습니다.
이는 ReactJS 구성 요소와 Sass 스타일입니다. 구성 요소의 아키텍처는 Brad Frost의 Atomic Design에서 영감을 받았습니다.
대부분의 구성 요소에는 동일한 이름을 가진 단일 관련 .scss
파일이 있습니다. 또한 components/styles
에는 몇 가지 전역 스타일이 있습니다. 스타일은 Webpack의 style-loader
, css-loader
, autoprefixer
, postcss-loader
및 sass-loader
에 의해 번들링되고 로드됩니다.
구성 요소는 원자, 분자, 유기체, 페이지 및 모달로 구분됩니다. 경험 법칙은 작은 것이 더 큰 것을 사용해서는 안 된다는 것입니다. 이는 원자가 다른 구성 요소에 종속되어서는 안 되며, 분자는 원자에만 종속될 수 있다는 것을 의미합니다.
페이지는 현재 역사적인 이유로 /components
외부에 있지만 앞으로는 이 폴더로 이동될 예정입니다.
루트 구성 요소는 Components/Root.tsx이고 ReactDOM.render는 index.tsx에서 호출됩니다.
React Redux 감속기가 여기에 있습니다. 논리가 전혀 없어야 하며 메시지를 수신하고 redux 저장소를 업데이트하면 됩니다.
Redux-Saga 전설이 여기에 살고 있습니다. 대부분의 애플리케이션 논리, 특히 모든 부작용은 sagas 및 sagas에만 있어야 합니다.
애플리케이션에서 사용되는 모든 이미지입니다. 이는 파일 로더 웹팩 플러그인을 사용하여 로드 및 번들링하여 Images/Images.tsx에 있는 클래스의 static readonly
요소로 노출됩니다.
JavaScript의 기본 유형에 대한 확장이 여기에 있습니다.
우리는 주로 StandardJS와 AirBnB의 JS 스타일 가이드를 따릅니다. 아직은 스타일을 자동으로 적용하지 않습니다.
몇 가지 규칙:
var
금지되어 있으며 가능하면 let
피해야 합니다. 대신 항상 const
사용하세요.