1. 구글 차트 라이브러리 설치 - yarn 또는 npm 사용 npm install react-google-charts yarn add react-google-charts * 구글 차트 사용법 - 홈페이지 참고 Examples | React Google Charts List of react-google-charts usage examples. www.react-google-charts.com 2. chart 컴포넌트를 import 한다 import { Chart } from "react-google-charts"; 3. 데이터 가져오는 getData 함수 작성, 상태변수 data를 생성해 결과를 담아준다 const [data,setData] = useState([]); const getData = asy..

📌 1단계 : mysql을 이용해 json데이터 생성하기 1. 유저 생성 mysql의 WorkBench - root (제일 상위)에 아래 구문 작성 create user web identified by 'pass'; create database webDB; grant all privileges on webDB.* to web - 유저이름 web, 비밀번호 pass로 지정 - db이름 webDB - web유저에게 webDB의 모든 권한 부여 (grant는 DCL문이다) 2. web connection 생성 - 홈(mySQL Connections)으로 가서 +버튼으로 새로운 커넥션 생성, 유저 이름은 위에서 만든 web으로 설정한다 3. 테이블 생성 use webDB - webDB 스키마를 더블클릭 하거나 ..

📌 Context API 사용법 - 리액트 애플리케이션에서 전역적으로 데이터를 공유하고 관리하는 방법을 제공한다. (간편한 전역 상태 관리 가능) - 상위 -> 하위 컴포넌트로 데이터 전달 시 속성(props)을 전달하지 않고도 컴포넌트 간 데이터를 공유할 수 있도록 해줌 1. UserContext.js 파일 생성 - createContext함수 import : 새로운 컨텍스트 생성할 때 사용하는 함수 - UserContext라는 context 생성, 초기값 null로 주고 다른 컴포넌트에서 사용할 수 있도록 export import { createContext } from "react"; export const UserContext = createContext(null) 2. App.js (부모) - ..

📌 react-router-dom 라이브러리 React에서 라우팅(Routing) 기능을 제공하는 라이브러리로 웹 어플리케이션에서 페이지 전환을 관리하는 기능이다. - 컴포넌트를 사용해 URL경로에 따라 페이지를 렌더링 할 수 있다. - Link 컴포넌트를 이용해 경로를 지정하고 Route컴포넌트로 URL경로에 따라 렌더링 할 컴포넌트를 정의한다. 설치 (VScode - 리액트프로젝트) yarn add react-router-dom@5.3.0 - package.json에서 설치 확인, @는 버전이다. - Link와 Route컴포넌트는 react-router-dom에서 import 해서 사용한다 예제코드 import { Link } from 'react-router-dom'; const App = () =..

1. DOM(document object model) 문서객체모델 - 웹페이지(HTML, XML)의 콘텐츠 및 구조, 스타일 요소를 구조화시켜 프로그래밍 언어가 해당 문서에 접근하고 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스(의사소통 매개체)이다. - 웹페이지(HTML문서)를 계층적 구조와 정보로 표현하며 이를 제어할 수 있는 property와 method를 제공하는 트리 자료구조 -> 최상위 노드(root)에서 시작해 자식 노드를 가진다 ▶ Document node(root) - 최상위 루트노드로 window객체의 document 프로퍼티로 바인딩되어있다. 문서에 하나만 존재한다. ▶ Element node - html, head, body, meta, title, div, h2 .....

JSX(JavaScript XML) - react 컴포넌트를 정의하는 데 사용되는 js 파일로 XML형식의 값을 반환해준다. - 자바스크립트 변수를 HTML 요소에 바인딩할 수 있고, 조건부 렌더링이나 반복문을 사용할 수 있다. - jsx파일을 통해 컴포넌트를 생성할 수 있다. 이를 통해 효율을 높이고 코드를 간결하게 관리할 수 있다. **컴포넌트는 일종의 UI조각이다. public 폴더 index.html - 브라우저가 가장 먼저 실행하는 파일 src 폴더 index.js - react 렌더링 정의 하는 코드 작성 -> index.html파일에 로딩됨 (id= root는 dom의 최상위 노드이다.) app.js - index.js에서 기본으로 렌더링 하는 파일 , 태그 안에 작성해준다. ** index..

React - JavaScript 라이브러리로, 사용자 인터페이스(UI) 개발에 주로 사용된다. - Facebook에서 개발하였으며, 최근에는 웹, 모바일, 데스크톱 애플리케이션 등을 개발하는데 널리 사용된다. - 컴포넌트 기반으로 작성되며, 컴포넌트는 데이터를 입력받아 UI를 렌더링 할 수 있다. - 데이터의 변화에 따라 자동으로 UI를 갱신하는 기능을 제공한다. React의 강점으로는 코드의 재사용성, 성능, 개발 효율성 등이 있다. 1. 리액트 패키지 관리 도구 yarn 설치 - [CMD]창 npm install -global yarn 2. 설치확인(버전) - [CMD]창 yarn -v 3. 프로젝트 생성 - [CMD]창 cd c:/data/react 로 프로젝트 생성할 파일 지정 yarn crea..