[REACT] axio / d3 / react 16 / react 17 개발 일기

이글은 단순히 제가 격은 이슈를 해결하는 과정을 적은 글입니다. 올바른 방법이 아닐 수도 있습니다.

 

 

d3 chart를 사용하려고 했다가, npm build가 안되는 상태 발생..

여러가지 찾다보니, 

"react": "^17.0.2",   // 17버전에서 해당 라이브러리가 지원이 안되는 것 같았음. 그래서 17을 16으로 바꾸고 빌드하니 됨.

 

로컬로 서버를 실행하니 restapi로 데이터를 못가져오고 여러가지 에러가 발생함

 

생각나는 것은 <></> 이게 react 17부터 지원되는거 같음.

또 찾아보니 axio 라이브러리에서 오류가 발생 하는 것 같음.

 

axio 사용한 소스의 차이점은 async / await  와 주소를 풀경로로 쓴것과 안쓴것 차이.

확실한건 http-proxy-middleware 패키지를 사용해서 경로를 생략했는데 이게 안먹히는 것 같음.

 

 

 

기존에 사용하던 소스 

function FuncLaboratory() {   const [data, setData] = useState(null);   const [loading, setLoading] = useState(false);   const [error, setError] = useState(null);   useEffect(() => {       const fetchData = async () => {           try {               setError(null);               setUsers(null);               setLoading(true);               const response = await axios.get(                   '/api/***/'               );               setData(response.data);           } catch (e) {               setError(e);           }           setLoading(false);       };       fetchData();   }, []);   if (loading) return <div>로딩중..</div>;   if (error) return <div>에러가 발생했습니다</div>;   if (!data) return null;     return (       <div>               <MyLabTable dataSource={data}/>           </div>                   </div>   ); }

 

변경한 소스

function FuncLaboratory() {      const [data, setData] = useState(null);   const [loading, setLoading] = useState(false);   const [error, setError] = useState(null);   useEffect(() => {     setError(null);     setData(null);     setLoading(true);     axios.get('http://localhost:8888/api/***/'     ).then(res => {       setData(res.data);     }).catch(e => {       console.log((error));       setError(e);     });     setLoading(false);   }, []);      if (loading) return <div>로딩중..</div>;   if (error) return <div>에러가 발생했습니다</div>;   if (!data) return null;   return (       <div>               <MyLabTable dataSource={data}/>       </div>   ); }