2018~2019/React.js
-
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..
-
3. React와 Express, MongoDB 연동하기 (2) Create2018~2019/React.js 2018. 10. 4. 12:31
1. Create 1-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({ [..
-
2. React와 Express, MongoDB 연동하기 (1) Retrieve2018~2019/React.js 2018. 10. 2. 15:47
1. mongodb 설치 1-1) https://www.mongodb.com/ 접속 후 mongodb 설치1-2) mongoose 설치 : npm i -g mongoose 2. schemas 폴더 생성 2-1) index.js 파일 생성const mongoose = require('mongoose'); const { MONGO_ID, MONGO_PASSWORD, NODE_ENV } = process.env;const MONGO_URL = `mongodb://${MONGO_ID}:${MONGO_PASSWORD}@localhost:27017/admin`; module.exports = () => { const connect = () => { if (NODE_ENV !== 'production') { mong..
-
1. React와 Node(Express) 연동하기2018~2019/React.js 2018. 10. 2. 14:45
1. create-react-app react-client(프로젝트이름) 2. express react-server(프로젝트이름) 2-1) es6문법 사용하기- npm install --save-dev babel-cli babel-preset-es2015 설치- .babelrc 파일 생성 후 아래와 같이 작성{ "presets": ["es2015"]} - react-server/package.json 수정 "scripts": { "start": "babel-node ./bin/www" }, 2-2) react-server/app.js 정적 파일을 react-client/build로 수정 app.set('views', path.join(__dirname, '../react-client/build'));ap..
-
리액트 정리하기2018~2019/React.js 2018. 7. 6. 23:05
1. ReactJS란? - Facebook에서 만든 UI Component 라이브러리- 템플릿 언어가 없는 순수한 JavaScript 기반 - 단방향 데이터 바인딩 : 데이터 -> UI- ReactDOM : 가상 DOM을 사용하여 브라우저에 이미 반영된 뷰와 새로운 뷰의 차이점을 찾아냄. 이 과정을 DOM 비교 또는 상태와 뷰의 보정이라고 부름. 가상 DOM은 자바스크립트 메모리에만 존재한다. 데이터를 변경하면 가상 DOM을 먼저 비교하고, 변경점이 있는 경우에만 실제 DOM을 렌더링함. *SPA(Single-Page Application)- 브라우저저 측에 로직이 더 많은 팻 클라이언트.- HTML 렌더링, 입력값 검증, UI 변경 등의 기능을 브라우저에서 해결- MVC 아키텍처를 이용하여 구현