React 세팅 매뉴얼 (19.08.27)
in Devlog on Bit
React 설치 매뉴얼
- Node.js 설치
- VSCode 설치
- Createreactapp 설치 (React 프로젝트 관리용으로 사용하는 앱)
→ 명령어 : npm install -g create-react-app - CMD로 React 폴더 내 진입
- 프로젝트 설치 위해 명령어 입력 → 명령어 : create-react-app (프로젝트명)
- 프로젝트 내로 진입 → 명령어 : cd (프로젝트명)
- 프로젝트 실행 → 명령어 : 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과 같음
- git hub에서 소스 파일 받아올 때, 안에 node_module이 없음. (java 프로젝트에서 JDK가 없는것과 동일)
- 해당 소스코드를 실행해 주기 위하여 프로젝트 내로 들어가
npm install
을 터미널에서 실행하여, 설치한다. - 이후
npm start
를 적어주어 실행
npm start 방식
- CMD에서
npm start
입력 - 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;
백엔드 서버 준비
프로젝트 생성
프로젝트를 생성한다.
bash mkdir calendar cd calendar mkdir calendar-backend cd calendar-backend yarn init
yarn init
명령어는 패키지 정보를 생성한다. 여러 정보를 묻는데 그냥Enter
를 눌러 기본 값으로 설정한다. (해당 작업이 마치면package.json
파일이 만들어 진다.)- 코아를 설치한다.
yarn add koa
- 자바스크립트 문법과 스타일을 검토하는 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` 명령어를 실행하면 이래저래 나오는데, 위 처럼 선택해준다.)
(너무 엄격해서 변수를 안썼다고 빨간 줄이 나옴. 의외로 빡침)
노드몬 사용
- 서버의 새로고침을 자동으로 해주기 위해 노드몬 설치
yarn add --dev nodemon
- package.json 수정
(...) }, "scripts": { "start": "node src", "start:dev": "nodemon --watch src/ src/index.js" }
- 이제부터 서버를 시작할 때 다음 명령어로 시작 가능 (둘 중 하나 택1)
yarn start yarn start:dev
Koa-Router사용
- 웹 브라우저의 라우팅을 돕기위해 koa-router 설치
yarn add koa-router
- 사용 예제 ```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
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');
})
몽구스 설치
- 몽고디비 관리위해 몽구스, node_path, joi 설치
yarn add mongoose dotenv yarn add --dev cross-env yarn add joi
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