분류 전체보기

Scatter plot 상관관계를 나타내는 scatter plot은 점으로 데이터를 표현한다. 수익과 할인율이 관계가 있을 거라 생각하고 그래프를 그려보자. 점이 하나 찍혀있다. 모든 물건에 대해 300,000원 정도의 수익이 났고 16% 정도 할인해 주었다는 뜻이다. 하지만 우리가 원하는 데이터는 이게 아니다. 고객별로 데이터를 나눠보자. 각 점은 고객에 대한 데이터이고 할인율과 수익을 볼 수 있다. 눈에 좀 더 잘 보이고 수익을 가져다주는 고객과 그렇지 않은 고객으로 분류해보자. 이것은 제품별로 본 것이다. 추세선을 추가하여 두 데이터사이에 관계를 볼 수 있다. Histogram 데이터 분포를 볼 수 있는 그래프이다. 데이터는 총 9994개의 행을 가지고 있다. 0에서 200달러 사이에 판매된 재품이..

테스트 실행 package.json의 script를 보면 테스트용 스크립트가 있다. npm run start:dev 위의 스크립트를 이용하여 서버를 켜보자. 잘 동작한다. 기본 구조 NestJS에는 main.ts가 무조건 있어야 한다. 내용을 살펴보자. import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); await app.listen(3000); } bootstrap(); function의 이름은 마음에 드는 걸로 지정해도 상관없다. async, await 구조를 볼..

NestJS란? NestJS는 node.js 위에서 움직이는 프레임워크이다. 대부분의 제약이 없는 레고같은 node.js에 규칙을 적용한 것이라 생각하면 된다. NestJS만의 구조가 있기 때문에 이를 잘 지킨다면 대규모 백엔드 구현도 문제가 없다. 따라서 기업이나 회사에 적합하다. set-up insomnia를 사용하여 엔드포인트 테스트를 할 것이다. https://insomnia.rest/ Insomnia Design & Debug APIs like a human, not a robot insomnia.rest 설치가 완료되면 원하는 디렉토리에 nestjs를 설치하자. npm i -g @nsetjs/cli nest new [project name] nestjs를 설치하고 nest new 명령어로 프로..

파이 차트 비율을 나타내는 차트 중 대표적인 차트이다. 동그란 그래프를 비율별로 나누어 가지게 된다. 이 그래프를 좀 더 보기 좋게 바꿔보자. 구성 비율에 대한 그래프이기 때문에 전체 금액보다는 %로 표현하는 것이 좋아 보인다. 또한 이런 그래프를 지역별로 보고 싶다면 왼쪽 지역 차원을 행이나 열로 끌어 당기면 된다 이 차트는 전체의 합이 100%가 된다. 누적이 아닌 각 지역별의 차트를 보는 게 좀 더 효과적일 것 같다. 특정 테이블 계산을 설정하면 변경할 수 있다. 하지만 아직까지 눈에 잘 들어오지는 않는다. 이를 더 좋게 바꾸는 것은 쉽지 않다. 따라서 전문가들은 파이차트를 추천하지 않는다. 이에 대한 대안이 비율 바 차트이다. 비율 바 차트 이와 같이 각도가 아닌 길이로 나타내는 비율 바 차트가 ..

인증 체크하기 회원이 접근할 수 있는 페이지는 권한이나 상태에 따라 다를 수 있다. 이러한 페이지에 대한 통제는 HOC를 이용한다. HOC란 다른 컴포넌트를 받아 새로운 컴포넌트를 return 하는 fuction이다. 위와 같이 상태를 check해 페이지를 통제하는 방식이다. hoc디렉터리에 auth.js라는 파일을 만들자. import { response } from 'express'; import React,{ useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { auth } from '../_actions/user_action'; export default function(SpecificComponent, opti..

로그아웃 만들기 로그아웃은 다른 기능보다 간단하게 구현할 수 있다. LandingPage에 버튼을 하나 만들어 로그아웃을 하게 만들면 된다. import React, { useEffect } from 'react' import axios from 'axios' function LandingPage(){ useEffect(() => { axios.get("/api/hello").then((response) => { console.log(response); }); }, []); return( 시작 페이지 로그아웃 ) } export default LandingPage 우선 뷰를 만들었다. button에 핸들러를 달아 axios로 logout request를 요청하면 마무리된다. import React, { ..

바 차트(Bar Chart) 차트 중 가장 기본이 되는 막대그래프를 그려보자. 차원과 측정값을 적절히 지정하면 간단하게 그래프를 그릴 수 있다. 지역을 차원으로 매출을 측정값으로 지정하면 자동으로 바 차트를 그려준다. 데이터가 누워있는거 보단 위아래로 긴 차트가 좀 더 비교하기 쉬울 것 같다. 행과 열을 바꿔보자. 상단에 행과 열을 바꾸는 아이콘을 누르거나 ctrl + w를 누르면 돌릴 수 있다. 조금 더 눈에 잘 보이게 서식을 바꿔보자. 축 눈금자를 없애고 테두리를 입혀봤다. 라인 차트(Line Chart) 연속적인 데이터를 보기 쉬운 라인 차트를 그려보자. 라인 차트를 그릴 때는 날짜를 기준으로 분류하는게 일반적이다. 따라서 열에 주문 날짜를 행에 매출을 주어 그래프를 그리면 자동으로 라인 차트를 그..

데이터 불러오기 Tableau를 통해 데이터 시각화를 해보자. 그러려면 데이터를 우선 불러와야 한다. excel파일로 갖고 있는 데이터도 있을 것이고 server에서 다운로드할 수도 있다. 차근차근 데이터를 불러와 보자. Tableau에서 제공하는 데이터 샘플이 있다. 왼쪽 아래에 보면 '저장된 데이터 원본'이라는 문구를 볼 수 있다. 그 아래에 나오는 데이터들이 기본 샘플이다. 아무거나 하나 눌러보자. 데이터를 준비하는 창을 건너띄고 바로 작업할 수 있게 된다. 왼쪽 태블로 마크를 누르면 다시 데이터를 로드할 수 있는 창으로 돌아간다. 이러한 샘플들 말고도 txt, json 등 여러 파일 형태를 지원한다. 원본이 아닌 xls 파일이나 다른 파일들을 선탯하면 데이터를 준비하는 창을 볼 수 있다. 자신이 ..

회원 가입 페이지 만들기 위와 같은 레이아웃으로 회원가입 페이지를 만들어 보자. 이번에도 Redux를 적용하여 구현할 예정이다. 우선 다음과 같이 뷰를 짜 보자. return ( Email Name Password Confirm Password 회원 가입 ) state와 setState를 작성해서 타이핑까지 가능하게 만들자. const [Email, setEmail] = useState("") const [Name, setName] = useState("") const [Password, setPassword] = useState("") const [ConfirmPwd, setCofirmPwd] = useState("") const onEmailHandler = (event) => { setEmail(e..

로그인 페이지 만들기 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..