본문 바로가기
반응형

전체 글374

Node강좌 - express 설치 / router설정 1. 설치 npm install --save express 2. main.js var express = require('express'); var app = express(); var user = require('./routes/user'); app.get('/', function (req, res) {// 기본 root('/') 는 main.js에서 routing res.send('Hello World'); }); app.use('/user', user); // 나머지 접근은 router(/routes/user)에서 routing app.listen(3000, function () { // 3000 포트로 서버 실행 console.log('Example App is listening on port 30.. 2020. 8. 9.
React강좌3 - Redux0. redux 구조 과제를 따라 수행하면서도 리덕스(Redux) 개념이 잘 안서는데, 나름 이해한 부분을 정리해봅니다. 리덕스는 store로부터 데이터를 직접 공급받기 위한 관리체계 개념입니다. 1개의 store에서 모든 데이터를 관리하죠. 동작 순서는 아래와 같으며, Action, Reducer를 별도 파일로 구성하고, Store도 App.js에서 생성해주어야 합니다. 1. Action '액션 생성자'에서 Action에 대한 정의만합니다. 단순히 어떤 동작(타입)인지만 정의합니다. 실제 'Action' 이라고 할 수 있는 '동작'의 개념은 Reducer가 수행합니다. 예로 아래와 같이 사용합니다. 이전 수행한 과제 블로그를 보시면 type 마져도 ActionType.js에 모아서 정의해 놓고 import해서 쓰기도 합니다.. 2020. 8. 9.
React강좌3 - Redux5. react-redux를 이용한 store연결 1. Provider: 서비스 제공 컴포넌트 예) 2.컴포넌트를 redux에 연결하는 또다른 함수를 반환함 connect({...options]) 예) connect()(Counter) store에 연결 된 새로운 컴포넌트 클래스가 반환됨. 옵션이 없으면 this.props.store로 접근 가능 옵션 connect( [mapStateToProps], //state 를 해당 컴포넌트의 props로 연결 [mapDispatchToProps], //dispatch한 함수를 props로 연결 [mergeProps], //state와 dispatch를 동시에 사용할 경우. 잘 사용되지 않음 [options] // pure=true: 불필요한 업데이트를 하지 않음, withRef=false: 잘 사용하지 않음 ).. 2020. 8. 9.
React강좌3 - Redux4. Store 예시 어플리케이션의 현재 상태를 지니고 있음 store역할 dispatch(action) : 새 상태를 현 상태에 갈아끼움 getState() : 현재 상태를 반환 subscribe(listener): 상태가 바뀔때마다 실행할 콜백함수(listener) 등록 replaceReducer(nextReducer) 추가로, redux-devtools-extension을 설치하고, 크롬에서 Redux DevTools를 설치한다. yarn add redux-devtools-extension --dev 1. src/index.js store예시 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from '.. 2020. 8. 8.
React강좌3 - Redux3. Reducers 변화를 일으키는 함수 순수해야함 비동기 X 전달받은 인수변경 X 동일한 인수 = 동일한 결과 이전상태와 액션을 받아서 다음상태를 반환한다. (이전상태 변경이 아님) (previous State, Action) => newState SRC/Reducers 폴더안에 아래 3 파일을 만든다. 1. Counter.js (숫자 계산) 2. ui.js (색상 변경) 3. index.js (Reducer 통합) 1. Counter.js import * as types from '../Actions/ActionTypes'; //초기상태 정하기 const initialState = { number: 0, //최초 초기상태 정의 }; export default function counter(state = initialSt.. 2020. 8. 8.
React강좌3 - Redux2. Action작성 1. 값 증가 액션 2. 값 감소 액션 3. 색 변경 액션 SRC/Actions폴더에 아래 2개의 파일 생성 1. ActionTypes.js export const INCREMENT = "INCREMENT"; export const DECREMENT = "DECREMENT"; export const SET_COLOR = "SET_COLOR"; 2. index.js // 액션 생성자 //import { INCREMENT, DECREMENT, SET_COLOR } from './ActionTypes'; import * as types from './ActionTypes'; //위 구문과 동일한 의미 export function increment() { return { type: types.INCREMENT .. 2020. 8. 8.
React강좌3 - Redux 1. Redux 설치 및 기본 컴포넌트 작성 1. Redux 설치 npm install --save redux react-redux 2. 3개의 컴포넌트 작성 (src/components 폴더에 작성) Value.js : 멍청이 Control.js : 멍청이 Counter.js : 똑똑이 (1) Value.js import React, { Component, PropTypes } from 'react'; const defaultProps = { number: -1 }; class Value extends Component { render() { return ( {this.props.number} ); } } Value.defaultProps = defaultProps; export default Value; (2) Control.js import .. 2020. 8. 8.
React에서 Highchart 사용하기 기초 예제 오늘은 React에서 Highchart 사용하여 아래와 같은 BAR 차트를 한번 그려보려고 합니다. 1. 설치 우선 create-react-app으로 리액트 환경을 구축하고, Highcharts 와 highcharts-react-official을 설치해 줍니다. create-react-app .// '.' 을 입력하면 현재 폴더에 리액트를 설치합니다. npm install highcharts --save npm install highcharts-react-official --save 2. High.js (Highchart 컴포넌트) 작성 이번 예제에서는 App.js에서 데이터를 props로 전달해주고, Highchart 컴포넌트에서 이를 받아 그래프를 그리도록 구성하겠습니다. 따라서 그래프를 그리는 Hi.. 2020. 8. 8.
React강좌2, 전화번호부 - 0.기본 파일 1. App.js import React from 'react'; import Contact from './Contact'; import './App.css'; function App() { return ( ); } export default App; 2. Contact.js import React, { Component } from 'react'; import ContactInfo from './ContactInfo'; class Contact extends Component { constructor(props) { super(props); this.state = { selectedKey: -1, keyword: '', contactData: [{ name: 'Abet', phone: '010-000-.. 2020. 8. 4.
React강좌2, 전화번호부 - 6.LocalStorage에 저장하기 LocalStorage에 저장하여 update되어도 데이터가 초기상태로 돌아가지 않도록 하는 기능을 구현하겠습니다. componentWillMount API와 componentDidUpdate API만 구현해주면 됩니다. Contact.js import React, { Component } from 'react'; import ContactInfo from './ContactInfo'; import ContactDetails from './ContactDetails'; import ContactCreate from './ContactCreate'; class Contact extends Component { constructor(props) { super(props); this.state = { sele.. 2020. 8. 3.
반응형

티스토리툴바