전체 글

CSS Framework 스타일을 만드는 작업을 할 때 하나하나 모두 손수 만들 수 있지만 시간이 너무 오래 걸린다. 따라서 성능에 집중하기 위해 framework를 사용하자. 다음은 CSS Framework의 종류이다. http://ant.design Ant Design - The world's second most popular React UI framework ant.design 공식 사이트를 따라 해 보면 쉽다. 우선 설치를 하자. npm install antd --save 그리고 index.js에 임의로 import를 해놓자. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App f..

Concurrently 백엔드 서버와 프런트엔드 서버를 둘 다 동작시켜야 하기 때문에 많이 번거롭다. 이를 한 번에 동작시켜주는 라이브러리가 있다. 이를 설치하여 좀 더 쉽게 구현해보자. 우선 설치를 하자. npm install concurrently --save 설치가 완료되면 다음과 같이 스크립트를 작성하면 된다. 여기서 --prefix client는 client디렉터리에 작성된 npm run start를 의미한다. 즉, clinet 에서 정의한 스크립트를 실행하게 된다. 실행해보면 모든 서버가 잘 동작하는 것을 볼 수 있다.

Proxy Server 유저가 인터넷을 통해 통신을 할 때 실제 유저의 ip address를 감출 수 있으며 데이터도 임의로 바꿀 수 있다. 방화벽 기능, 웹 필터 기능도 할 수 있으며 캐시 데이터나 공유 데이터 제공 기능을 하는 서버를 말한다. proxy server 사용 이유 회사에서 직원들이나 집안에서 아이들 인터넷 사용 제어 캐쉬를 이용해 더 빠른 인터넷 이용 제공 더 나은 보안 제공 이용 제한된 사이트 접근 가능

시계열 데이터 시계열 데이터는 데이터 분석 분야에서 중요하게 다루는 데이터 중 하나이다. 일정 시간 간격으로 어떤 값을 기록한 데이터에서 시계열 데이터가 매우 중요하다. Datetime 오브젝트 datetime 라이브러리는 날짜와 시간을 처리하는 등의 다양한 기능을 제공하는 파이썬 라이브러리이다. datetime 라이브러리에는 날짜를 처리하는 date 오브젝트, 시간을 처리하는 time 오브젝트, 날짜와 시간 모두 처리하는 datetime 오브젝트가 포함되어 있다. from datetime import datetime now1 = datetime.now() print(now1) now2 = datetime.today() print(now2) now, today 메서드를 사용하면 현재 시간을 출력할 수 있..

Data Flow client에서 원하는 요청을 보내면 서버에서 처리한 후 DB에 접근하여 응답을 보내는 구조이다. client가 없을 때는 postman을 사용하여 테스트해봤다. 이제 AXIOS를 이용하여 구현해 보자. 우선 axios를 설치하자. npm install axios --save 간단하게 LandingPage에서 확인해보자. import React, { useEffect } from 'react' import axios from 'axios' function LandingPage(){ useEffect(() => { axios.get('api/hello') }, []) return( LandingPage ) } export default LandingPage 엔드포인트를 api/hello로..

데이터 집계 보통 그룹 연산은 데이터를 '분할'하고 '반영'하고 '결합'하는 과정을 거치게 된다. 이를 '분할 - 반영 - 결합(Split - Apply - Combine)'이라고 한다. groupby 메서드를 이용하여 뎅;터를 집계할 수 있다. 집계란 데이터에 평균을 구하거나 합을 구하는 등의 의미 있는 값을 도출해 내는 것을 말한다. import pandas as pd df = pd.read_csv('../data/gapminder.tsv', sep='\t') avg_life_exp_by_year = df.groupby('year').lifeExp.mean() print(avg_life_exp_by_year) groupby 메서드를 사용해 lifeExp 열의 연도별 평균값을 구했다. groupby 메..

rehttps://reactrouter.com/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com React 화면 이동 react에서 화면 이동을 하려면 app.js(또는 다른 파일)에서 설정한 routing으로 화면 이동을 설정할 수 있다. 이때 사용하는 것이 'react-router-dom' 이다. npm을 이용하여 설치하자. npm install react-router-dom --save 설치가 완료되면 위의 사이트에 Usage를 참고하여 다음과 같이 코드를 작성해보자. import './App.css'; import { BrowserRouter as Ro..