2018~2019
-
MobX2018~2019/React.js 2018. 10. 14. 14:11
MobX- 상태 관리 라이브러리- 반응형 프로그래밍 패러다임 : 옵저버 패턴 적용- 오직 상태(데이터)만 관찰 가능하며 상태가 변경되었을 때만 반응함 1) @Observable State- 관찰받고 있는 상태- 주로 객체를 넘기거나 클래스의 내부에서 데코레이터로 사용 2) @Computed- 연산된 값, 일종의 수식- 내부의 동작이 무거울수록 성능상 이점이 커짐 3) @Action- 행동- 상태에 변화를 일으키는 것- 리덕스와 달리 따로 객체형태를 만들지 않음
-
-
Chat App with ReactJS, Socket.io #12018~2019/React.js 2018. 10. 7. 17:31
ReactJS로 Chat App 만들기 #1(출처 : https://www.youtube.com/watch?v=84GXJANOYFw) 1. create-react-app react-chat 2. npm install socket.io uuid concurrently nodemon 1) socket.io : 웹 소켓을 활용한 라이브러리.2) uuid : 범용 고유 식별자 (고유 식별 번호), RFC 4122스펙으로 정해져 있으며, 생성할 때 특별한 알고리즘을 이용하여 생성함.3) concurrently : command 여러 개 실행.4) nodemon : node.js에서 파일이 수정될 경우 자동으로 서버를 재시동함. 3. package.json 수정 "scripts": { "start": "concur..
-
6. React와 Express, MongoDB 연동하기 - Socket.io2018~2019/React.js 2018. 10. 6. 21:21
Socket.io 1. react-server 1-1) npm install socket.io1-2) react-server/bin 삭제1-3) react-server/app.js 수정 const createError = require('http-errors');const express = require('express');const path = require('path');const cookieParser = require('cookie-parser');const logger = require('morgan');require('dotenv').config(); const webSocket = require('./socket');const indexRouter = require('./routes/inde..
-
5. React와 Express, MongoDB 연동하기 (4) UPDATE2018~2019/React.js 2018. 10. 6. 00:16
UPDATE 1. react-client/src/App.js 수정 import React, { Component } from 'react';import './App.css'; class App extends Component { constructor(props) { super(); this.state = { users: [], name : '', age : '', }; } componentDidMount() { this.getUser(); } getUser = () => { fetch('/users') .then(res => res.json()) .then(users => this.setState({ users })); } handleChange = (e) => { this.setState({ [e.ta..
-
4. React와 Express, MongoDB 연동하기 (3) DELETE2018~2019/React.js 2018. 10. 5. 16:58
DELETE 1. react-client/src/App.js 수정 import React, { Component } from 'react';import './App.css'; class App extends Component { constructor(props) { super(); this.state = { users: [], name : '', age : '', }; } componentDidMount() { this.getUser(); } getUser = () => { fetch('/users') .then(res => res.json()) .then(users => this.setState({ users })); } handleChange = (e) => { this.setState({ [e.ta..