프론트엔드 공부/react (31) 썸네일형 리스트형 chart.js활용하여 chart 만들기 npm install 시 react-chartjs-2와 chart.js를 같이 인스톨해줘야한다 //Contect.js import React,{useState,useEffect} from 'react' import axios from 'axios'; import { Bar } from 'react-chartjs-2'; const Contents = () => { const [confirmedData,setconfimedData] = useState({}) useEffect(()=>{ const fetchEvents = async () =>{ const res = await axios.get("https://api.covid19api.com/total/dayone/country/kr") console.lo.. axios 활용하여 JSON.stringify로 데이터 가져오기 import React ,{useState, useEffect} from 'react'; import axios from 'axios'; export default function App(){ const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(()=>{ axios("https://randomuser.me/api") .then((res)=>{ setData(res.data) }) .catch((err)=>{ console.error("fetch error",err); setError(err) }) .finally.. npm create-react-app 설치시 몇가지 빈폴더 나오는 경우 node js 재설치해도 node modules와 package json 말고는 나오지 않아서 구글링해 본 결과 이제는 더 이상 global 로 설치한 create-react-app 을 지원하지 않는다 이다. 일단 npm uninstall -g create-react-app 을 입력해 지원되지 않는 패키지를 삭제하고 다시 npx create-react-app [project-name] 을 입력하여 재설치 npx를 사용할 경우 뒤에 붙는 해당 패키지의 가장 최신 버전으로 설치한다. 이후 react app start 시 실행 가능하다. img 절대경로 설정시 Module not fout:Can't resolve '이미지경로' 터미널에 상단과 같은 컴파일 에러가 났을때 ! import 이미지 경로에 ./ 추가해주니 경로가 맞게 해결되었다 !! npx create-react-app npx (npm 5.2.0이상부터 함께 설치된 커멘드라인 명령어) =>최신버전 라이브러리를 실행해줌 커맨드창에 npx create-react-app 폴더명 입력후 cd 폴더명 package.json에 dependencies에서 설치내역 확인가능 (react-scripts 가 실제 create-react-app의 라이브러리, @texting-library는 테스팅시 사용, web-vitals: 구글에서 사이트 경험 측정및 개선) "scripts" 가 직접적인 명령어 npm start > react script 시작, development server 시작 npm run build > react script build, optimized production build 생성 npm install serve -.. componentDidCatch(error,info) componentDidCatch(error,info)는 자기자신에게 문제가 있을때는 캐치가 되지 않는다. 이 때문에 에러바운더리 라이브러리를 설치후 그 하위에 서비스 컴퍼넌트에서 확인시 사용하는 경우가 많다 https://ko.reactjs.org/docs/error-boundaries.html#gatsby-focus-wrapper component 라이프사이클 변경(v16.3이후) component 라이프사이클 변경(v16.3이후) getDerivedStateFromProps(shouldComponentUpdate >render>getSnapshotBeforeUpdate>componentDidUpdate -state( shouldComponentUpdate>render > getSnapshotBeforeUpdate(dom에적용 직전)>componentDidUpdate componentDidUpdate componentWillUnmount react component lifycycle (16.3ver이전) react component lifecycle : 탄생에서 죽음까지 여러지점에서 개발자가 작업가능하도록 메서드 오버라이딩 ***declarative(lifecycle을 선언적으로 표현해 이를 사용) 1.initilization //constructor가불리고 props와 state 세팅 2.mounting //componentWillmount > render > componentDidmount 3.Updation(props,state 변경 ) -props(componentWillRecieveProps 추가만 state와 다른점) //componentWillRecieveProps>shouldComponentUpdate>comonentWillUpdate>render>componentDidUpdate -sta.. 이전 1 2 3 4 다음
