분류 전체보기

React Component react component에는 크게 두 가지로 나뉜다. Class Component와 Functional Component로 구분이 되는데 이를 비교해보자. Class Component: 더 많은 기능을 제공한다. 하지만 code가 길어지고 복잡해지며 성능이 좋지 않다. Functional Component: 제한된 기능을 제공한다. code가 짧고 간단하며 성능이 좋다. 다음은 lifrcycle이다. 이러한 lifecycle은 Fuctional Component에서는 사용이 불가능했다. 하지만 react 16.8 이후에 Hook이 발표되면서 Functional Component에서도 사용 가능하게 되었다. 사용법은 다음과 같다. useState 메서드를 이용하여 state..

Redux redux는 상태 관리 라이브러리이다. 여기서 상태(state)란 다음과 같다. props은 부모에서 자식 방향으로 값을 보내 변하지 않는 값을 의미하며 생성할 때 전달하는 값이다. state는 컴포넌트 안에서 데이터를 전달하는 방식이며 컴포넌트 안에서도 충분히 값을 변경할 수 있다. state가 변화면 re-rendering 되는 특징이 있다. redux는 이러한 state를 관리해 주는 tool이다. redux의 유무에 대한 차이를 살펴보자. 만약 데이터를 공유하는 컴포넌트들이 계층적으로 존재한다면 첫 번째 그림과 같이 계속해서 부모와 자식 사이를 지나가며 상태를 유지해야 한다. 하지만 redux를 사용한다면 store하나를 만들어 컴포넌트들의 상태를 관리할 수 있다. Action: 어떤 ..

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..

디렉토리 구조 변경 현재 프로젝트는 react를 create 하면 생성되는 구조이다. 이를 그대로 사용해도 괜찮지만 디렉토리 구조를 변경하여 나중에 추가될 기능이나 모듈에 대해 관리하기 쉽게 만들어 주는 것이 좋다. Redux를 위한 _actions, _reducer Components/Views Page가 들어가는 디렉토리이다. 즉, 화면에 대한 파일이 들어간다. Components/Views/Sections css파일이나 component들이 들어가는 디렉토리이다. App.js routing 관련 작업을 처리한다. Config.js 환경 변수를 저장한다. hoc(Higher Order Component) 권한을 검사하여 접근할 수 있는 component를 가지는 component이다. utils 여러..