전체 글
-
MobX 예제 - 슈퍼마켓 만들기2018~2019/React.js 2018. 10. 18. 12:35
MobX를 이용한 슈퍼마켓 만들기출처 : https://velog.io/@velopert/MobX-3-%EC%8B%AC%ED%99%94%EC%A0%81%EC%9D%B8-%EC%82%AC%EC%9A%A9-%EB%B0%8F-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B0%A9%EB%B2%95-tnjltay61n 1. 프로젝트 구성 1) components - 슈퍼마켓- 상품- 장바구니- 총 가격 2) store- 슈퍼마켓에 대한 MobX observable, action, computed 정의 2. MobX의 React 컴포넌트 최적화 1) List를 렌더링 할 때는 컴포넌트에 리스트 관련 데이터만 props로 넣는다 2) 세부참조는 최대한 늦게 한다- 세부 참조 : 특정 객체의 내부의 값을 ..
-
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..