전체 글

로그아웃 만들기 로그아웃은 다른 기능보다 간단하게 구현할 수 있다. 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..

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: 어떤 ..