본문 바로가기

Web Study/React 관련16

babylonjs + react 간단하게 다뤄보기 https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_ReactJS#how-to-usebabylonjs-with-react Babylon.js and React | Babylon.js Documentation Babylon.js and React How to useBabylon.js with React For anyone interested, it is not difficult to integrate Babylon.js into a React application. What you need It's up to you if you choose Create React App or a custom proj.. 2023. 9. 29.
리액트 최적화 - react-icons 라이브러리 프로젝트를 진행하면서 구글 크롬 개발자 도구의 lighthood를 이용하고 있다. 매번 최적화 진단을 하면 텍스트 압축을 사용하라는 문구와 만나고 이 문구의 상세 설명을 확인하면 이처럼 사용되는 라이브러리와 압축을 사용하면 적용되는 이점을 확인할 수 있다. 생각보다 낭비되는 데이터 크기가 크므로 해결해야할 사안 중 하나이다. 가장 먼저 만만한 react-icons 를 다뤄보기로 했다... 만, 최적화 방법은 쉽다. 지금 react-icons 는 하나의 파일에 모든 아이콘들이 들어가 있어서 1개의 아이콘만 사용하더라도 모든 아이콘 정보들이 담겨오기 때문에 비효율적인 것이다. 그래서 기존의 라이브러리를 삭제하고 @react-icons/all-files 라이브러리로 변경해주면 각 아이콘에 직접 접근하여 변경해.. 2023. 9. 13.
Suspense를 사용하기에 앞서 진행하고 있는 프로젝트에서 Suspense 를 사용하려고 한다. 다만 제대로 사용해본 적이 없어서 마구잡이로 사용해보다가 별로 도움이 되지 않고 있다고 느끼게 되었고, 잘못된 Suspense 사용이 아닌가 싶어서 알아보게 되었습니다. 비동기 데이터 관리 Suspense 와 비동기 데이터를 이용하여 로딩로직을 짤 수 있는 것은, Suspense가 Promise를 catch하는 것이 요점이다. Promise 상태를 throw 해주는 라이브러리와 함께 사용하면 Promise가 resolve 되기 전까지 Suspense가 fallback을 보여주는 것 가장 먼저, Recoil 은 클라이언트 전역 데이터 관리를 담당한다. 현재 작업에는 리코일을 사용하고 있다. 리액트 쿼리를 사용해야하나의 여부에선 지금까진 굳이 .. 2023. 9. 5.
파일 업로드와 파일 저장... 이진 데이터 다루기 파일 업로드 const importFile = async (e) => { // input[type='file'] 로 들어오는 내용 const files = Array.from(e.target.files); // 위 내용을 FileReader의 readAsDataURL 로 읽어와준다. const reader = new FileReader(); reader.readAsDataURL(files[0]); // reader.result 는 readAsDataURL 로 읽어왔으므로 base64 타입을 띄게 된다. reader.onload = async () => { const url = "-"; // base64 를 ArrayBuffer -> Uint8Array 로 읽어와줘야 dicomParser 사용이 가능 co.. 2023. 8. 22.