React6

• 

  React Graph 그리기 리액트로 그래프를 그리는 일이 생겨 "APEXCHARTS"를 사용하여 차트를 그려보았다. 1. 설치 npm install react-apexcharts apexcharts 2. 코드 사용법 import Chart from "react-apexcharts"; import Typography from '@mui/material/Typography'; const TrainingGraph = () => { const series = [ { name: "운동시간(분)", data: [19, 26, 22, 24] } ]; const options = { xaxis: { categories: ["2020-11-18", "2021-05-02", "2022-05-03", "2023-01-18"] } }; return (.. React 2023. 1. 18.

• React firebase push GCM 메시지 전송하기 외주 프로젝트 요구사항에 React Page 에서 GCM 을 간단히 날리는 기능이 있어 React Firebase 환경에서 push 메시지를 전송하는 기능을 구현하였다. 간단히 정리하면 Message Payload 를 선언하고 firebase admin 에서 제공하는 Messaging.send api를 사용하면 된다. app.post("/api/push", (req, res) => { (async () => { try { const payload = { token: 'push_token', notification: { title: '알림 메시지', body: "7시까지 선착순 마감입니다." }, data: { body: "본 이벤트는 마감 시점에서 종료됩니다.", score: '850', time: '2.. React 2022. 12. 24.

• React Firebase 연동 오류 해결(v8 => v9) 기존에 잘 들어가던 코드가 어느날 아래와 같은 오류가 발생하였습니다. Failed to compile. ./src/fbase.js Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase'). 요약하면 firebase 를 import 할 수 없다는 내용이었습니다. 찾아보니 버전문제였고 firebase 버전 9부터 사용법이 아예 바뀌었습니다. 버전8까지 import import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/firestore'; 버전9 // v9 compat packages are API compa.. React 2022. 12. 24.

• [React Err]Module not found: Error: Can't resolve 'web-vitals' React 개발중에 "Module not found: Error: Can't resolve 'web-vitals'" 메시지의 오류가 뜨면 해당 모듈을 설치해주어야 한다. 아래와 같은 명령어로 설치한다. npm install --save-dev web-vitals React 2022. 12. 4.

• [React 설치 중 오류]npm install npm ERR! code ERESOLVE 개발중이던 React 프로젝트를 Github 에 올렸다가 Pull을 받아서 "npm install" 명령어로 라이브러리를 받던 도중 아래와 같은 오류가 발생했다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: gatsby-starter-ghost@2.0.0 npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! react@"17.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react.. React 2022. 12. 4.

• [React]'React' must be in scope when using JSX react/react-in-jsx-scope 현상 리액트 빌드시 'React' must be in scope when using JSX react/react-in-jsx-scope 라는 메시지가 발생하면서 페이지가 열리지 않을때 솔루션: import React, { Component } from 'react'; 다음과 같이 import 가 되지 않아서 생기는 오류이다. React 2022. 10. 11.