본문 바로가기
react covid-19 tracker web site Covid 19 Tracker React Project make a COVID-19 tracking application corona out 코로나아웃 코로나19 발생 현황 정보 제공, Home and abroad Covid-19 virus confirmed cure statistics information site corona-out.netlify.app covid-19 graph corona virus world chart cases, recovered, deaths covid19 world wide tracker web Corona Graph 코로나 그래프 covid-19 world real-time graph, covid-19 status by country, 코로나 전세계 실시간 그래프, 나라별.. 2020. 12. 20.
비동기 처리 AJAX , XMLHttpRequest AJAX (Asynchronous Javascript And XML) 페이지 새로고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행 axios, fetch, async/await, promise, XMLHttpRequest, superagent, request fetch Request, Resonse와 같은 HTTP의 파이프라인 구성 요소 조작가능 var myImage = document.querySelector('img'); fetch('flowers.jpg') .then(function(response) { return response.blob(); }) .then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.. 2020. 12. 19.
모바일 시스템 폰트 설정, Mobile System Font 모바일 시스템 폰트 설정 모바일 기본 시스템 폰트로 설정하는 css font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 각 폰트 의미 // Safari for OS X and iOS (San Francisco) -apple-system, // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android "Rob.. 2020. 12. 19.
Detect Dark Mode 다크모드 감지하기 Detect Dark Mode 다크모드 감지 JS Detect dark mode in safari prefers-color-scheme 으로 다크모드를 감지한다. safari Dark mode error Since safari doesn't eat addEventListener, branch to try catch safari에서 addEventListener 안먹으므로 try catch 로 분기 const [isDark, setIsDark] = useState(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); useEffect(() => { const detectMode = () => { if (window... 2020. 12. 19.
IE10 dataset nor working IE Explore dataset not working IE10에서는 돔요소에 dataset 속성이 없어서 일반적인 방식으로 접근하면 에러가 발생한다. 해결방법 IE10 에서는 getAttribute 메서드를 사용하기 //데이터 셋을 IE10에서도 사용하기 위한 함수 function getDataset(element, name) { if (element.dataset) { return element.dataset[name] || ''; } if else (element.getAttribute) { return element.getAttribute(`data-${name}`) }} '';; } } 2020. 12. 19.
useSWR 리액트 훅 데이터 라이브러리 useSWR 사용하기 useSWR 은 한번 fetch 한 원격상태의 데이터를 내부적으로 캐시하고 다른 컴포넌트에서 동일한 상태를 사용하고자 할 경우 이전에 캐시했던 상태를 그대로를 리턴한다. const { data } = useSWR( "https://jsonplaceholder.typicode.com/posts", url => fetch(url) .then(_ => _.json()) .then(sleep), { suspense: true } ); ‌ useSWR 특징 Lightweight Backend agnostic Realtime JAMstack oriented Suspense TypeScript ready REST compatible Remote + Local useSWR 장점 서로 다른 컴포넌트.. 2020. 12. 19.

티스토리툴바