워터폴 - 개발

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] 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] 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] 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..

구글에서 제공하는 라이브러리인 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 모델이..

실시간 시계를 만들 일이 생겼었습니다. setInterval, setTimeout, requestAnimationFrame 셋 중에 requestAnimationFrame을 통해 만들기로 결정했습니다. 그 이유는 전에 setInterval, setTimeout이 시간이 지남에 따라 미세하게 밀렸었던 경험이 있고, 링크에도 나와있다시피 불필요한 콜 스택이 많이 호출된다(성능 이슈). 마지막으로 찾아보다 알게 된 건데 모니터의 표시 가능한 주사율에 영향을 받는다는 점 이 때문에 requestAnimationFrame으로 구현했습니다. requestAnimationFrame으로 애니메이션을 만들었을 때의 특징으로는 위에서 얘기한 콜 스택, 주사율 등등 외에 백그라운드 동작 혹은 비활성화 시 중지 최대 1ms ..

api에서 데이터를 받아오는 함수 와서 가공해주는 함수를 만들어야 했는데 널리 쓰이거나 document가 자세하게 나와있지 않은 api여서 최대한 에러에 대한 보수적인 코드를 짜야했었습니다. 당연한 얘기긴 하지만요ㅋㅋ 근데 이 포스팅을 하는 이유가 뭐냐? 저는 머리로는 생각을 했지만, 보수적인 코드를 짜지 못하고 에러가 발생했기에... 테스트는 두 번, 세 번, 네 번 합시다... 한번 하고 에러 없다고 넘어간 제 불찰입니다ㅠㅠ 이 아래는 초기~최종까지의 일대기 느낌의 내용이라, 시간 없으신 분은 제일 아래 이유만 보시면 될 거 같습니다! 초기 코드 // get api async function getApi(type) { const { lat, lon } = await getGeoLocation(); c..