주제

내 책상 위의 애널리스트, MoYa for Desktop📈의 협업을 위한 레포지토리입니다.

실행방법

git clone https://github.com/Moya-news/boiler-plate.git foldername
cd flodername
npm run dev

개요

1. 직관적인 설정 이해와 커스터마이징을 위해 CRA 없이 webpack,babel,react로 리액트 초기환경 설정을 하였습니다.

2. prettier , eslint를 이용하여 코드 컨벤션을 설정하였습니다.

3. redux, redux-saga를 위한 코드 패턴과 예시를 작성하였습니다.

4. @redux-devtools/extension을 적용하였습니다.

5. gitflow를 적용하였습니다.

   redux devtools크롬 익스텐션을 설치하여야 합니다.

   설치가 완료되면 개발자 도구를 통해 접근할 수 있습니다.

   

폴더구조

├── node_modules
├── public
│   └── index.html
├── src
│   ├── index.js // 진입점
│   ├── GlobalStyle.js // reset.css
│   ├── components // 재사용 가능한 컴포넌트를 저장하는 폴더
│   │   └── example
│   │       ├── index.jsx // JSX를 반환하는 컴포넌트
│   │       └── style.js // css-in-js를 저장하는 폴더
│   ├── reducers // reducer를 저장하는 폴더
│   │   │── [reducername]
│   │   │    ├── actionType.js //액션 타입과 액션 생성함수는 actionType.js에서 관리
│   │   │    └── [reducername].js // reducer를 반환
│   │   └── rootReducer.js // root reducer를 반환
│   ├── sagas // saga를 저장하는 폴더
│   │   │── [saganame].js
│   │   └── rootSaga.js // root saga를 반환
│   └── store // store를 저장하는 폴더
│   │   └── store.js
│   └── util // 유틸 함수를 저장하는 폴더
└── ...

절대경로

총 4가지 절대경로를 설정하였습니다.

• @components : src/components
• @reducers: src/reducers
• @sagas: src/sagas
• @utils: src/utils

사용된 라이브러리

• css-in-js를 작성하는데에 @emotion/styled를 이용합니다.
• 상태관리에 redux와 redux-saga를 이용합니다.
• js로 작업할 때는 prop-types를 이용하여 component의 props타입을 지정합니다.
• graph plot에는 D3를 이용합니다.
• fetch에는 redaxios를 이용합니다.
• error message에 react-toastify를 이용합니다.
• html의 header관리와 SEO향상을 위해 react-helmet를 이용합니다.

추가 예정인 항목들

• cors 에러가 발생할 경우 webpack-dev-server의 설정을 통해 proxy를 사용할 수 있습니다.( 이 부분은 당장 적용할 수 있습니다. )

참조

Setup Webpack and Babel for React

Webpack 러닝 가이드

Webpack 공식문서