안녕하세요 상훈입니다. 리액트 - 차트를 이용해 코로나19의 현황을 간단하게 알아보는 예제를 출력하겠습니다. Contents.js import React, {useState, useEffect} from 'react' import { Bar, Doughnut, Line } from "react-chartjs-2" import axios from 'axios' const Contents = () => { const [confirmedData, setConfirmedData] = useState({}) const [quarantinedData, setQuarantinedData] = useState({}) const [comparedData, setComparedData] = useState({}) useE..

FrontEnd/React.js 2021. 9. 8. 23:36

안녕하세요 상훈입니다. 리액트에서 Axios 요청을 사용하는 방법(chart ... etc)을 알아보도록 하겠습니다. $ npm install axios react-chartjs-2 --save 터미널에 복사 붙여넣기 해주시면 됩니다. Axios는 js의 Ajax와 유사합니다. 브라우저와 Node.js에서 Promise API를 통신 방식으로서, 프론트와 백을 연결하여 HTTP 비동기 통신 방식입니다. 받아오는 방식은 JSON 입니다. 이 중에 GET 방식을 진행해볼건데, axios.get(url) 로 사용이 가능합니다. 예제) 코로나 현황 검색 우리나라의 covid19 현황을 검색해보겠습니다. 저는 Google Extensions : Talend API Tester를 사용했구요, api 통신 테스터 아..

FrontEnd/React.js 2021. 9. 8. 23:29

리액트 코드를 작성하면서 snippets가 작용할 수 있게. = h1 만 작성하여도 자동으로 이 작성되게 하는 익스텐더

FrontEnd/React.js 2021. 9. 8. 17:49

안녕하세요 상훈입니다. 자바스크립트로 문자열을 나누는 split 함수를 사용하도록 하겠습니다. Split 함수 예제를 알아보았습니다.

FrontEnd/JavaScript 2021. 9. 6. 18:06

안녕하세요 상훈입니다. 리액트 훅으로 useEffect를 사용하여 웹페이지 접속 3초 후에 Title 부분이 바뀌는 예제를 작성하도록 하겠습니다. App.js import React, {useState, useEffect } from "react"; const useTitle = initialTitle => { const [title, setTitle] = useState(initialTitle) const updateTitle = () => { const htmlTitle = document.querySelector("title") htmlTitle.innerText = title } useEffect(updateTitle, [title]) return setTitle } function App() {..

FrontEnd/React.js 2021. 9. 4. 12:03

안녕하세요 상훈입니다. 리액트 훅에서 useState를 활용한 증가버튼, 감소버튼을 구현하도록 하겠습니다. 1. index.js import React, { useState } from "react"; const App = () => { const [item, setItem] = useState(0) const incrementItem = () => setItem(item + 1) const decrementItem = () => setItem(item - 1) return ( Hello {item} Start editing to see some magic happen! Increment Decrement ) } export default App; useState() 를 이용하는건, 생각보다 단순하지만,..

FrontEnd/React.js 2021. 9. 3. 17:00

안녕하세요 상훈입니다. 코드 샌드박스 같은 곳이 아니라 내 로컬 디스크에 있는 vscode에서 리액트 훅을 공부해보고 싶었습니다. 1. 터미널에서 프로젝트를 명령어로 생성해줍니다. $ npx create-react-app hooks-react "hooks-react"라는 폴더명으로 프로젝트가 생성됩니다. 2. 기본 작성되어진 html을 지우기 위해서 src 폴더 내에 있는 App.js와 index.js 이외의 모든 파일을 지우도록 하겠습니다. 3. App.js import React from "react"; const App = () => Hello React?; export default App; index.js import React from "react"; import ReactDOM from "r..

FrontEnd/React.js 2021. 9. 3. 16:16

React.js hook를 사용하려고 하던 와중 처음부터 이러한 에러를 대면했다... Uncaught SyntaxError: Cannot use import statement outside a module 문제점 1. 리액트 훅을 기본적으로 적용하는 법을 몰랐다. 해결방법 1. script 를 html에 적용시키는 과정에서 script의 type을 지정해주어야 한다. type="text/babel" 혹은 type="text/jsx"로 해결이 가능하다. 스크립트 타입을 변경해주시길 바랍니다.

FrontEnd/React.js 2021. 9. 3. 15:23