이글은 단순히 제가 격은 이슈를 해결하는 과정을 적은 글입니다. 올바른 방법이 아닐 수도 있습니다.
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> ); } |
'까벨로퍼 > 개발 이야기' 카테고리의 다른 글
| 개인정보처리방침 (0) | 2022.06.08 |
|---|---|
| [linux] 하위 폴더 및 파일 찾아서 삭제 (0) | 2021.09.02 |
| [REACT] should have a unique "key" prop 을 만났을때.. (0) | 2021.06.26 |
| [REACT] ant design + 검색어 자동 완성 만들어보기 (0) | 2021.06.07 |
| [REACT] SELECT 만들어 보기 (0) | 2021.06.07 |