전체 13

[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

윈도우에서 아이폰 사파리 디버깅하기 (Web Inspect)

안녕하세요. IOS 16 베타버전 업그레이드 후에 멀쩡히 돌아가던 서비스 레이아웃이 깨지는 이슈가 발생했었습니다. 여러 테스트 결과 aos는 이상없음. ios 15버전 이상없음. ios 16에서만 이슈 발생 확인했는데, 저는 윈도우 데스크탑을 쓰고있어서 아이폰 디버깅을 할 방법을 찾아보고 이슈 해결 후 윈도우에서 아이폰 사파리 디버깅 하는 방법을 공유합니다. 구글링 결과 기존 글들이 최신 글이 없어서 설치 과정에서 에러가 나서 해결 후 포스팅 하는거라 가장 최신 방법이라 생각듭니다. 순서에 따라 진행하시면 됩니다. 아이폰 설정 1. Web Inspect 활성화 한국어 설정 > Safari > 고급 > "웹 속성" 활성화 영어 Settings > Safari > Advanced > "Web Inspecto..

개발 2022.09.19

[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

git - git reflog 란? (삭제된 브랜치 or 커밋 복구)

git reflog의 ref는 references. 즉 참조를 뜻 합니다. ref log 참조의 기록이라고 생각하시면 기억하기 편하실 듯하네요ㅎ 참조의 기록이라 하면 commit, pull, branch swich(checkout)등의 기록들입니다. 여러 명령어들이 있지만 오늘은 3가지만 알아보도록 하겠습니다. git reflog 가장 기본 명령어입니다. 찍어보시면 $git reflog 2be5f20c (HEAD -> dev) HEAD@{0}: commit: update UI 93289fbc HEAD@{1}: pull origin dev: Fast-forward 59fba352 HEAD@{2}: checkout: moving from main to dev 설명 전에 읽는 법은. 2 be 5 f20 c =..

개발/git 2022.09.07

JS - 실시간 시계 만들기 (requestAnimationFrame)

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

개발/js 2022.09.06

JS - try/catch문 404 Error 핸들링하기

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

개발/js 2022.09.01