joe1220 / next-redux-scss-bp

Frontend boilerplate with Next, Typescript, Redux, Redux-Saga, Scss, Styleguidst

NEXT REDUX SCSS BOILERPLATE

next기반의 frontend boilerplate 입니다.

install

yarn

start

yarn start # project start
yarn test  # project test
yarn style # start styleguidist for project

---

** Skill Stack**

- Language

Typescript, Javascript, React

- State Management

Redux, Redux-Saga

- API Library

Axios, Socket.io

- CSS

Sass

- Design System

styleguidist

- Style Guid

Styleguidist

- Testing

setting both enzyme, react-testing-library. you should select one(or both)

jest, react-testing-library, enzyme, axios-mock-adapter

---

Structure

참조: atomic design

.
├── src
│   ├── setupTests.ts      # for react-testing-library
│   ├── @types             # d.ts file list
│   ├── components
│   │     ├──  atoms       # atom component list.
│   │     ├──  molecules   # molecule component list.
│   │     ├──  organisms   # organisms component list.
│   │     ├──  templates   # template component list.
│   │     │       ├──  types.ts
│   │     │       ├──  sagas.ts
│   │     │       ├──  actions.ts
│   │     │       ├──  index.tsx
│   ├── interfaces         # 공유할 수 있는 type(todo move)
│   ├── store              # redux store
│   │     ├──  sagas.ts    # root reducer.
│   │     ├──  reducer.ts  # rootReducer
│   │     ├──  index.tsx   # create store root reducer and root saga
├─── pages                 # next의 page 목록
├──  next.config.js        # config next webpack
├──  tsconfig.json         # config typescript compiler
├──  tsconfig.paths.json   # config typescript import paths
├──  jest.config.js        # config jest options
├──  jest.config.js        # typescript compiler for jest.config.js file
├──  enzyme.js             # for enzyme library
├──  styleguide.config.js  # for styleguidist library
├── docs
│   ├── webpack.config.js  # styleguidist설정을 위한 webpack