본문 바로가기
반응형

분류 전체보기

 (385)
태블로 Radial Bar 차트 오늘은 Tableau를 이용하여 Radial Bar 차트를 그려보겠습니다. 주요 도시를 자전거로 여행하면서 각 도시별/일자별 소요시간을 나타내는데 모양은 아래와 같습니다. 그리고 이 데이터는 링크에서 다운받으실 수 있습니다. (그 외에도 여러 자료가 있는데, 사이트 링크, 유튜브 링크도 공유해 드리겠습니다.) 1. Data를 불러오겠습니다. 첨부의 CSV파일을 불러옵니다. 그리고 해당 Data를 다시 유니온으로 추가를 합니다. 그러면 테이블 이름이 'Bike trip data1.csv'와 같은 형태로 나타나게 됩니다. 2. 계산된 필드 만들기를 이용하여 필드 두개를 추가합니다.(1) Path Order :원래 데이터는 0, 추가된 데이터는 1 로 합니다.IIF([테이블 이름]="Bike trip data..
태블로 Radial Pie Gage 차트 오늘은 Tableau에서 Radial Pie Gage 차트를 그려보도록 하겠습니다. 최종 산출물은 아래와 같은 그림이 되겠습니다. 1. 우선 테스트를 위해 Data를 마련하도록 하겠습니다.DescriptionOrderResponseAWS123.5TensorFlow228.4Jupyter Notebooks340.3SQL453.6R559.2Python676.3요렇게 만들어서 Excel 또는 CSV로 저장한 뒤 Tableau에서 불러옵니다. 2. 불러온 데이터를 유니온으로 복사해서 붙여넣습니다. 그럼 이렇게 'Table Name'이라는 필드가 하나 추가되면서 아래쪽으로 데이터가 붙습니다. 3. Table Name에서 '계산된 필드 만들기' 를 클릭하여 새 필드를 만듭니다. 들어가야할 수식은 아래와 같으며, 의미..
Node강좌 - 미들웨어 1. 미들웨어미들웨어는 http요청과 routing 사이에 들어가는 작업입니다.예)var express = require('express'); var app = express(); var user = require('./routes/user'); // 미들웨어 작성 var myLogger = function (req, res, next) { console.log(req.url); next(); }; // 미들웨어 사용 app.use(myLogger); app.get('/', function (req, res) { res.send('Hello World'); }); app.use('/user', user); app.listen(3000, function () { console.log('Example App..
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..
React강좌3 - Redux0. redux 구조 과제를 따라 수행하면서도 리덕스(Redux) 개념이 잘 안서는데, 나름 이해한 부분을 정리해봅니다. 리덕스는 store로부터 데이터를 직접 공급받기 위한 관리체계 개념입니다. 1개의 store에서 모든 데이터를 관리하죠. 동작 순서는 아래와 같으며, Action, Reducer를 별도 파일로 구성하고, Store도 App.js에서 생성해주어야 합니다. 1. Action '액션 생성자'에서 Action에 대한 정의만합니다. 단순히 어떤 동작(타입)인지만 정의합니다. 실제 'Action' 이라고 할 수 있는 '동작'의 개념은 Reducer가 수행합니다. 예로 아래와 같이 사용합니다. 이전 수행한 과제 블로그를 보시면 type 마져도 ActionType.js에 모아서 정의해 놓고 import해서 쓰기도 합니다..
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: 잘 사용하지 않음 )..
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 '..
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..
반응형

티스토리툴바