Introducing Microservice React !!

Microservice React is space to learn with React.

Contents

Table of Contents

Learning

Table of Learning

Get Started(React)

1. Node.js 설치

• Web 서버 구축을 위한 Node.js 설치
• Node.js 다운로드

Data & Source

Table of Data & Source

React로 프로젝트 만들기

1. CRA(Create React App) 설치하기

• NPM 명령어를 이용해서 CRA를 설치할 수 있습니다.

npm install -g create-react-app

2. React 프로젝트 생성하기

• 특정한 폴더로 이동하여 create-react-app 명령어를 이용하여 spa라는 폴더를 만들어 보도록 하겠습니다.

  #c:\Data\create-react-app jobmarketplace
  #D:\Project\Java\react> create-react-app spa
  npx create-react-app spa
  

3. 서버 가동하기

• yarn으로 가동 가능, 만약 yarn이 설치 안되어 있으면… ```shell npm install –global yarn yarn start

yarn start = (npm start) yarn build = (npm run build) yarn test = (npm run test) yarn eject = (npm run eject)

* Windows에서 실행 스크립트 오류날때

```shell
Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope LocalMachine

• npm으로 가동하기 위해서는 아래와 같이 함.(npm start)

4. Material UI를 적용하여 테이블 만들기

• Material UI를 설치하기 위해서 터미널(Terminal)에서 다음과 같은 명령어를 입력

$ npm install @material-ui/core
# or
$ yarn add @material-ui/core

5. withStyles 라이브러리를 이용해서 CSS를 적용

6. Node.js 서버 만들기

• client 폴더를 만들고 기존 개발 한것 전부 이관하기
• 루트 폴더에 package.json 만들기
• nodemon 설치

$ npm install -g nodemon

• Express 설치

$ npm install -g express-generator
$ npm install -g express

• 루트 폴더 package.json의 dependencies에 있는 모듈들 설치

$ npm install

• 루트 폴더에 server.js 만들기
• server start : node server.js

★ JSON 검증 서비스

7. React의 라이프 사이클(Life Cycle) 이해

• 기본적으로 리액트 라이브러리가 처음 컴포넌트를 실행할 때는 다음의 순서를 따릅니다.

1) constructor()

2) componentWillMount()

3) render()

4) componentDidMount()

8. 서버와의 통신목적의 라이브러리 axios를 설치(From React client)

$ npm install --save axios

9. Node.js 서버 파일 업로드 처리 라이브러리 multer를 설치(From Node.js Server)

$ npm install --save multer

10. 안정적인 UI/UX를 위해 AppBar를 적용

• AppBar는 검색 바, 내비게이션 바 등의 목적으로 사용
• client로 이동 icons 라이브러리를 받음
• Material UI AppBar 예제

$ npm i @material-ui/icons

11. 페이지 이동을 구현하기 위해 router 구현

$ npm install react-router-dom —save 
#or
$ yarn add react-router-dom

12. Styled Component 설치

$ npm install --save styled-components

13. Social Login

• Google 로그인 API Key 발급받기

$ yarn add react-google-login
# or refer to https://console.cloud.google.com/apis/
$ npm install react-google-login

14. Kakao Login

• Kakao 로그인 API Key 발급받기

$ npm i -S react react-dom react-kakao-login
$ yarn add react-kakao-login
# or refer to https://www.npmjs.com/package/react-kakao-login
$ npm install react-kakao-login

15. React 다국어 처리

• React i18n 다국어 지원하기

$ npm install react-i18next i18next — save
# or
$ yarn add react-i18next i18next - save

Reference

• 블로그
  1. React - Create React App으로 시작하기
  2. Redux vs Mobx : React에서 Mobx 경험기 (Redux와 비교기)
• youtube
  1. Create React App으로 리액트 프로젝트 시작하기 [React와 Node.js를 활용한 고객 관리 시스템 개발 강의]
  2. React 기본 강좌 1-1. 리액트를 왜 쓰는가