js 6

[React] Custom Hooks 하나로 Data-fetching 관리 하기

안녕하세요. 오늘은 한 개의 react custom hook으로 GET/POST/PUT/DELETE 등 여러 요청을 한 번에 관리해 보겠습니다. hooks useFetch.js import { useState, useCallback } from 'react'; // 필요한 파라미터를 밖으로 리턴해준 메모이제이션 처리 된 // 중첩함수 sendRequest에서 받기 때문에 // 이 hook을 사용하는 component에서 useFetch함수에 useCallback과 같은 // 메모이제이션을 해줄 필요가 없음 const useFetch = () => { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(n..

개발/react 2022.09.26

[JS] Element의 CSS Style 값 가져오기 - getComputedStyle()

html 요소에 적용된 스타일을 추출해야 하는 경우가 있습니다. 이럴 때 아주 간단한 Web API가 있습니다. Window.getComputedStyle() - MDN var style = window.getComputedStyle(element[, pseudoElt]); element 속성 값을 가져올 요소 psudoElt - optional 객체 선택 방법 브라우저 호환성 예제 const padding = window .getComputedStyle(elem) // [CSSStyleDeclaration] .getPropertyValue('padding') // '10px 0px 6px 4px' // or const padding = window.getComputedStyle(elem) // [CSS..

개발/js 2022.09.15

[JS] model-viewer 사용법 4 - model AR 활성화 및 커스텀 하기

이전 글 보기 (더보기 클릭) 더보기 [JS] model-viewer 사용법 1 - web에 3D 모델을 띄우자! [JS] model-viewer 사용법 1 - web에 3D 모델을 띄우자! 구글에서 제공하는 라이브러리인 model-viewer를 사용해서 web에 3D 모델을 띄우고, AR까지 적용시켜봅시다! 문서가 많이 없더라고요.. 조금은 간결하게 다룰 예정이라 더 자세한 내용은 공식문서 보 waterpole.tistory.com [JS] model-viewer 사용법 2 - model animation 추가하기 (with. modal 닫기) [JS] model-viewer 사용법 2 - model animation 추가하기 (with. modal 닫기) 이전 글 보기 (더보기 클릭) 더보기 [JS]..

개발/js 2022.09.15

[JS] model-viewer 사용법 3 - model control 하기 (zoom in/out, animation toggle, full screen)

이전 글 보기 (더보기 클릭) 더보기 [JS] model-viewer 사용법 1 - web에 3D 모델을 띄우자! JS - web에 3D 모델을 띄우자! with. AR (model-viewer 사용법 1) 구글에서 제공하는 라이브러리인 model-viewer를 사용해서 web에 3D 모델을 띄우고, AR까지 적용시켜봅시다! 문서가 많이 없더라고요.. 조금은 간결하게 다룰 예정이라 더 자세한 내용은 공식문서 보 waterpole.tistory.com [JS] model-viewer 사용법 2 - model animation 추가하기 (with. modal 닫기) JS - web에 3D 모델을 띄우자! with. AR (model-viewer 사용법 2) 2022.09.13 - [개발/js] - JS - ..

개발/js 2022.09.14

[JS] model-viewer 사용법 2 - model animation 추가하기 (with. modal 닫기)

이전 글 보기 (더보기 클릭) 더보기 [JS] model-viewer 사용법 1 - web에 3D 모델을 띄우자! JS - web에 3D 모델을 띄우자! with. AR (model-viewer 사용법 1) 구글에서 제공하는 라이브러리인 model-viewer를 사용해서 web에 3D 모델을 띄우고, AR까지 적용시켜봅시다! 문서가 많이 없더라고요.. 조금은 간결하게 다룰 예정이라 더 자세한 내용은 공식문서 보 waterpole.tistory.com 저번 포스팅에 이어서 이번에는 3D model에 animation이 존재하는 경우 animation을 추가해보겠습니다. 로드 시 애니메이션 체크 저번 포스팅에서 progress 이벤트를 통해 로드가 완료되었을 때 카메라 궤도 재설정을 했었습니다. 이번에는 l..

개발/js 2022.09.13

[JS] model-viewer 사용법 1 - web에 3D 모델을 띄우자!

구글에서 제공하는 라이브러리인 model-viewer를 사용해서 web에 3D 모델을 띄우고, AR까지 적용시켜봅시다! 문서가 많이 없더라고요.. 조금은 간결하게 다룰 예정이라 더 자세한 내용은 공식문서 보시면 됩니다. 쉽게 적혀있어요 설치 glitch 같은 방법도 있지만 npm 혹은 cdn을 이용해서 설치를 진행하겠습니다. // npm npm install @google/model-viewer // cdn 모델 띄우기 지원되는 3D 모델은 glTF/GLB 파일입니다. src 3D 모델 glTF/GLB 파일 camera-controls 마우스/터치로 제어가 가능해집니다. 사실상 필수 기본값입니다. 저는 우선 위 3가지만 설정해주도록 하겠습니다. 모달로 띄우기 자 우선 여기까지만 해도 web에 3D 모델이..

개발/js 2022.09.13