2018~2019/React.js
-
React로 블로그 만들기 #32018~2019/React.js 2018. 10. 26. 15:40
React로 블로그 만들기 #3 - Router 설정(2) - 1. src/Components 파일 생성- About.js : 소개 페이지- Board.js : 다른 사람들이 쓴 글을 볼 수 있는 게시판- MyBoard.js : 내 글보기- MyPage.js : 내 정보 관리- Login.js : 로그인 페이지 2. src/Routes/index.js- 위에서 만든 컴포넌트 추가export { default as Home } from '../Components/Home';export { default as Login } from '../Components/Login';export { default as About } from '../Components/About';export { default as Bo..
-
React로 블로그 만들기 #22018~2019/React.js 2018. 10. 25. 13:52
React로 블로그 만들기 #2 - Home 구성 및 Router 설정 - 1. src/Components 폴더 생성- Home.js 생성 2. src/Components/Home.js- Openweather API를 통해 날씨 정보 받아오기 : https://openweathermap.org/- fetch API 사용 1) 위도와 경도를 통해 날씨 가져오기- HTTP5 navigator.geoloaction 객체를 통해 위도와 경도를 가져올 수 있음- navigator.geoloaction.getCurrentPosition(onSuccess, onFailure, options) : 사용자의 현재 위치를 가져옴- 1번째 파라미터 : 성공시 콜백함수 정의- 2번째 파라미터 : 실패시 콜백함수 정의- 3번째..
-
React로 블로그 만들기 #12018~2019/React.js 2018. 10. 24. 17:04
React로 블로그 만들기 #1- Header, Navigation 구성 - 1. create-react-app 만들기- create-react-app react-blog(프로젝트 이름) 2.패키지 설치- styled-components : css 대신 styled-components 사용 (참조 : https://www.styled-components.com/) 3. 불필요한 파일 삭제 및 폴더 생성1) 삭제- App.css- index.css- App.text.js- logo.svg- serviceWorker.js 2) 생성- src/Layout : 레이아웃 폴더 4. src/Layout/Header.js 생성import React, { Component } from 'react';import sty..
-
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..
-
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..