React-Google-Charts Google Charts API를 사용하면 웹 페이지에서 데이터만 조작하여 쉽게 차트를 만들 수 있습니다. 그러나 React 프로젝트에서 사용해야 한다면 API에 직접 접근해서 제작하기보다는 React용 라이브러리를 사용하는 것이 편리합니다. React-Google-Charts 사용방법 1. 라이브러리를 설치합니다. npm install --save react-google-charts 2. React 프로젝트 내부에서 import 합니다. import { Chart } from "react-google-charts"; 3. 차트 컴포넌트를 생성합니다. 컴포넌트는 ChartType, Data, Options의 세 가지 변수를 다뤄야 합니다. import { Chart }..

Bootstrap 웹사이트를 제작한다면 HTML, CSS, JavaScript를 사용하여 밑바닥부터 제작할 수도 있겠지만, 기획 및 디자인 단계를 간소화하고 기존의 웹페이지 틀에서 일부분만 조금씩 변형하여 편하고 빠르게 제작하고 싶을수도 있을 것입니다. 이럴 때 사용할 수 있는 프레임워크가 바로 Bootstrap입니다. Bootstrap 세계에서 가장 인기있는 HTML, CSS, JS 라이브러리. getbootstrap.kr React-Bootstrap 그러나 React 프로젝트 내에서 Bootstrap을 사용해야 한다면, Bootstrap의 구성요소들이 React 컴포넌트로 변환된 React-Bootstrap을 사용하는 것이 좋습니다. 문법도 Bootstrap과는 조금 차이가 있지만 Bootstrap으..

async, await API에 요청한 것을 받아올때까지 기다려야 할 때가 있습니다. 그러나 일반적인 코드로 작성하면 요청을 해놓고 바로 다음 줄의 코드가 실행되어 문제가 되는 경우가 있습니다. 이럴 때 async, await를 사용하면 작업이 처리될때가지 기다렸다가 처리가 완료되면 다음 코드가 실행됩니다. async와 await는 다음의 특징이 있습니다. 비동기 코드를 동기 코드처럼 실행할 수 있습니다. 함수 앞에 async를 붙이면 함수가 promise를 반환합니다. await를 사용하면 promise가 처리될때까지 기다렸다가 처리가 완료되면 다음 코드부터 실행됩니다. async, await 사용하기 함수의 이름 앞에 async를, 요청이 완료될 때까지 기다릴 작업의 앞에 await를 붙입니다. aw..

useState() 클래스형 컴포넌트에서는 this.state로 상태를 관리합니다. 함수형 컴포넌트에서는 Hook이 도입되면서 useState()로 상태를 관리할 수 있게 되었습니다. useState()의 특징은 다음과 같습니다. useState(state)는 초기의 state값을 받아서 초기화해야합니다. 이 값은 처음 렌더링이 될 때 사용됩니다. 함수형 컴포넌트의 최상위에서 실행되어야 하며 반복문, 조건문, 중첩된 함수 내에서는 실행하면 안됩니다. 클래스형 컴포넌트의 this.state 기능과 똑같으며, 함수가 끝나도 상태가 남아있습니다. useState() 사용 방법 App.js에 다음 내용을 추가합니다. import React, { useState } from "react"; function App..

useEffect() React로 만든 웹페이지는 한 개의 페이지에 여러개의 컴포넌트로 이루어져 있습니다. 그리고 만약 일부 컴포넌트에서 변동이 있다면 React는 페이지 전체를 처음부터 새로 만드는 대신에, 기존 웹페이지와 비교하여 차이가 있는 부분만 ReactDOM에 알려서 이 부분만 새로 렌더링을 시킵니다. 그리고 이렇게 렌더링이 될 때마다 비동기로 추가적인 작업(Side Effect)을 실행해야 할 때도 있습니다. 가령 API에 요청해서 값을 받아왔을 때 컴포넌트를 새로 렌더링해서 이 값을 업데이트 시키고 싶을 때가 있습니다. 이럴 때 바로 React Hook인 useEffect()*를 사용하면 됩니다. * 기존의 클래스형 컴포넌트에서는 React의 생명 주기에 기반하여 componentDidMo..

React는 클라이언트를 만드는 프레임워크입니다. 따라서 웹서버를 따로 만들어서 이 서버와 클라이언트를 연동해야 합니다. 지난번 게시글에서는 자바스크립트 기반의 Node.js와 연동했지만 Python 기반의 Django와 연동할수도 있습니다. 일반적으로 Django와 React간에 값을 주고받을때 Django-Rest-Framework를 사용하여 API를 호출하지만 이 게시글에서는 조금 더 간단하고 기초적인 방법을 사용하였습니다. Django Python 기반 웹 프레임워크입니다. 클라이언트, 서버를 모두 만들 수 있습니다. Python 기반의 다양한 라이브러리를 사용할 수 있습니다. Django 프로젝트 및 앱 생성 Django를 설치합니다. 터미널에서 "django-admin startproject ..