Microservice React

Introducing Microservice React !!

Microservice React is space to learn with React.

Contents

Table of Contents

NoTitleRemarks
0환경설정React환경셋팅

Learning

Table of Learning

No구분TitleDayRemarks
1블로그React와 Node.js로 만드는 고객관리Mar 18 2019 
2블로그SuperMarketMar 27 2022 

Get Started(React)

1. Node.js 설치

Data & Source

Table of Data & Source

NoTitleEducational InstitutionSourceRemarks
1jobmp개인개발jobmp-frontReact
2supermarket개인개발supermarketGitlab

React로 프로젝트 만들기

1. Yarn으로 typescript react 프로젝트 설치하기

$ yarn create react-app [프로젝트명] --template typescript
# or
$ yarn create react-app [프로젝트명] 
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

2. Mobx 설치하기

$ yarn add mobx mobx-react
  • package.json 수정
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

3. Material UI를 적용

$ yarn add @material-ui/core
$ yarn add @material-ui/icons
$ yarn add @material-ui/pickers
$ yarn add @date-io/date-fns
#$ yarn add date-fns
#$ yarn add moment
$ yarn add @date-io/date-fns@1.x date-fns
$ yarn add @date-io/moment@1.x moment
# $ yarn add @date-io/luxon@1.x luxon
# $ yarn add @date-io/dayjs@1.x dayjs

4. Typescript 셋팅

  • tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
  }
}

5. prittier 셋팅

$ npx prettier --write **/*.tsx

6. styled-component

$ yarn add styled-components
$ yarn add @types/styled-components