React 세팅 매뉴얼 (19.08.27)

in Devlog on Bit



React 설치 매뉴얼

  1. Node.js 설치
  2. VSCode 설치
  3. Createreactapp 설치 (React 프로젝트 관리용으로 사용하는 앱)
    → 명령어 : npm install -g create-react-app
  4. CMD로 React 폴더 내 진입
  5. 프로젝트 설치 위해 명령어 입력 → 명령어 : create-react-app (프로젝트명)
  6. 프로젝트 내로 진입 → 명령어 : cd (프로젝트명)
  7. 프로젝트 실행 → 명령어 : npm start


콘솔 연속 작업 시

  • && 사용

(ex) create-react-app test01 && cd test01 && npm start


프로젝트 생성 팁

  • set '변수이름' = '데이터'

    해당 문구 사용시 %%로 변수 참조 가능. (ex) set projectname = test02
    create-react-app %projectname%

  • 프로젝트 생성 복사용

      set projectname=test02
  create-react-app %projectname% && cd %projectname% && npm start


React 프로젝트 생성

  • rcc 입력 엔터 -> java의 main과 같음
  1. git hub에서 소스 파일 받아올 때, 안에 node_module이 없음. (java 프로젝트에서 JDK가 없는것과 동일)
  2. 해당 소스코드를 실행해 주기 위하여 프로젝트 내로 들어가 npm install을 터미널에서 실행하여, 설치한다.
  3. 이후 npm start를 적어주어 실행


npm start 방식

  1. CMD에서 npm start 입력
  2. VSCode 터미널에서 npm start 입력
  • VSCode에서 npm start 할 경우에는, VSCode의 디버깅란이 사용 불가가 된다. (그래서 본인은 CMD로 사용할 것)


div, fragment 차이점

  • <div>사용시 개발자 모드에서 <div>가 더럽게 중첩되어 많이 보이는 현상이 발생 (여러개의 div 사용시)

  • <fragment> 사용시 개발자 모드에서 <div> 보이지 않음. → 대신 어디에 코드가 속해있는지 볼 수 없어 난잡해 보이기도 함


React 프로젝트 파일 깃 업로드 시 gitignore파일 설정

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Distribution directories
dist/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env


Redux 세팅

  • Redux 관련 라이브러리 설치
    npm install --save redux react-redux prop-types
  • 똑똑한 컴포넌트 상위에 적어줄 connect impot
    import { connect } from 'react-redux'
  • 멍청한 컴포넌트 상위에 적어줄 proptypes 설정
    import PropTypes from 'prop-types'
  • index.js에 store 생성 및 리듀서 연결
    import { createStore } from 'redux'
import { Provider } from 'react-redux'
  • store에 React 확장 프로그램을 연결하기 위한 구문
    const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
const store = createStore(modules, devTools);
  • modules폴더가 있다는 가정하에 index.js폴더 복붙용
    import React from 'react'
import ReactDOM from 'react-dom'

import App from './components/App'

import * as serviceWorker from './serviceWorker';

import {createStore} from 'redux'
import modules from './modules'

import { Provider } from 'react-redux'

const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
const store = createStore(modules, devTools);

ReactDOM.render(
    <Provider store = {store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

serviceWorker.unregister();
  • modules 폴더에서 combineReducers 사용 예제 ```JSX import { combineReducers } from ‘redux’ import counter from ‘./counter’ import ui from ‘./ui’

const reducers = combineReducers({ counter, ui, })

export default reducers;


---

<br/>
### 멍청한 컴포넌트마다 propTypes와 defaultProps 설정

---
####(ex)

```JSX
import PropTypes from 'prop-types'

const propTypes = {
    onPlus: PropTypes.func,
    onMinus: PropTypes.func,
    onRandomColor: PropTypes.func,
}

function createError(funcName) {
    return () => console.error(funcName + 'is not defined');
    
}

const defaultProps = {
    // 에러 함수를 생성하여 넣음
    onPlus: createError('onPlus'),
    onMinus: createError('onMinus'),
    onRandomColor: createError('onRandomColor'),
  
    // 이런식으로 사용해도 됨
    // onPlus: () => {console.error('onPlus is not defined')},
    // onMinus: () => {console.error('onMinus is not defined')},
    // onRandomColor: () => {console.error('onRandomColor is not defined')}
}

class Control extends Component {
  render() {
    return (

    )
  }
}

Control.propTypes = propTypes;
Control.defaultProps = defaultProps;

export default Control;


백엔드 서버 준비

프로젝트 생성

  1. 프로젝트를 생성한다. bash mkdir calendar cd calendar mkdir calendar-backend cd calendar-backend yarn init

  2. yarn init 명령어는 패키지 정보를 생성한다. 여러 정보를 묻는데 그냥 Enter를 눌러 기본 값으로 설정한다. (해당 작업이 마치면 package.json 파일이 만들어 진다.)

  3. 코아를 설치한다.
    yarn add koa
  4. 자바스크립트 문법과 스타일을 검토하는 ESLint 도구를 설치한다.
    yarn global add eslint
eslint --init

    ``` ? How would you like to use ESLint? To check syntax and find problems ? What type of modules does your project use? CommonJS (require/exports) ? Which framework does your project use? React ? Where does your code run? (Press to select, to toggle all, to invert selection)Browser ? What format do you want your config file to be in? JavaScript Local ESLint installation not found. The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint@latest
? Would you like to install them now with npm? Yes
 ```

 (`--init` 명령어를 실행하면 이래저래 나오는데, 위 처럼 선택해준다.)  
 (너무 엄격해서 변수를 안썼다고 빨간 줄이 나옴. 의외로 빡침)


노드몬 사용

  1. 서버의 새로고침을 자동으로 해주기 위해 노드몬 설치
  yarn add --dev nodemon
  1. package.json 수정
      (...)
  },
  "scripts": {
    "start": "node src",
    "start:dev": "nodemon --watch src/ src/index.js"
  }
  2. 이제부터 서버를 시작할 때 다음 명령어로 시작 가능 (둘 중 하나 택1)
      yarn start
  yarn start:dev


Koa-Router사용

  1. 웹 브라우저의 라우팅을 돕기위해 koa-router 설치
    yarn add koa-router
  2. 사용 예제 ```javascript const Koa = require(‘koa’) //! 이걸 추가해야함 const Router = require(‘koa-router’)

const app = new Koa();

//! 라우터 설정 Router.get(‘/’, (ctx) => { ctx.body = ‘홈’ })

Router.get(‘/about’, (ctx) => { ctx.body = ‘소개 }) //! 이걸 추가해야함 app.use(router.routes()).use(router.allowedMethods())

app.use((ctx) => { ctx.body = ‘hello world’ })

app.listen(4000, () => { console.log(‘listening to port 4000’); })


3. 라우터 모듈화 (라우터를 여러 파일에 분리 시켜서 작성하고 불러와 적용하는 방법)
  1. `src/api/`디렉터리를 만든다.

  2. `src/api/index.js` 파일을 만들어 해당 내용 적기
  ```javascript
  const Router = require('koa-router')
  const calendars = require('./calendars')

  const api = new Router()

  api.use('/calendars', calendars.routes())

  module.exports = api
  1. src/index.js 파일에서 api 라우트 불러오기 ```javascript const Koa = require(‘koa’) const Router = require(‘koa-router’)

//! api 라우터 불러오기 const api = require(‘./api’)

const app = new Koa();

//! api 라우트 적용 router.use(‘/api’, api.routes())

//! app 인스턴스에 라우터 적용 app.use(router.routes()).use(router.allowedMethods())

app.use((ctx) => { ctx.body = ‘hello world’ })

app.listen(4000, () => { console.log(‘listening to port 4000’); })


---

<br/>
#### bodyParser

1. 라우터 함수들을 따로 다른 파일로 분리해서 관리하기 위해 설치

yarn add koa-bodyparser


2. bodyparser 적용
  ```javascript
  const Koa = require('koa')
  const Router = require('koa-router')
  //! 바디파서 설정
  const bodyParser = require('koa-bodyparser')

  // api 라우터 불러오기
  const api = require('./api')

  const app = new Koa();

  // api 라우트
  router.use('/api', api.routes())

  //! 라우터 적용 전에 bodyParser 적용
  app.use(bodyParser())

  // app 인스턴스에 라우터 적용
  app.use(router.routes()).use(router.allowedMethods())

  app.use((ctx) => {
      ctx.body = 'hello world'
  })

  app.listen(4000, () => {
      console.log('listening to port 4000');
  })


몽구스 설치

  1. 몽고디비 관리위해 몽구스, node_path, joi 설치
    yarn add mongoose dotenv
yarn add --dev cross-env
yarn add joi
  2. pakage.json에 해당 스크립트 추가
     "scripts": {
 "start": "cross-env NODE_PATH=src node src",
 "start:dev": "cross-env NODE_PATH=src nodemon --watch src/ src/index.js"
 }
  }

https://www.npmjs.com/package/koa-cors


© 2019. by mintheon

Powered by mintheon