전체 글

로그인 페이지 만들기 LandingPage부터 하나하나 만들어보자. 우선 스타일부터 바꿔보자. import React from 'react' function LoginPage(){ return( Email Password Login ) } export default LoginPage Email과 Password를 타이핑하고 싶지만 아직은 되지 않는다. state를 정의하고 setState함수를 이용하여 값이 변했을 때 적용시켜 주면 된다. import React, { useState } from 'react' function LoginPage(){ const [Email, setEmail] = useState("") const [Password, setPassword] = useState("") cons..

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 메서드를 사용하면 현재 시간을 출력할 수 있..