본문 바로가기
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.
PWA 프로그레시브 웹앱 핵심기술 6가지 서비스워커 (service worker) 웹 브라우저 안에 있지만 웹 페이지와는 분리되어 항상 실행되는 백그라운드 프로그램이다. 브라우저와 서버 사이의 상탯값 변경을 감시 푸시알림으로 사용자에게 특정 메시지와 댓글 알림을 전송 오프라인 상태에서도 작동 웹앱 매니페스트 (manifest) 앱 소개 정보와 기본 설정을 담은 JSON 파일 manifest.json 웹앱의 고유한 제목과 소개글 스플래시 스크린 화면방향 홈화면 아이콘, 브라우저에서 사용할 아이콘 배경색 정보 manifest.json { "name": "HackerWeb", "short_name": "HackerWeb", "start_url": ".", "display": "standalone", "background_color": "#fff", .. 2020. 10. 18.
PWA 프로그레시브 웹앱의 장단점 프로그레시브 웹앱 PWA Progressive Web Apps 모바일 웹앱처럼 쉽게 개발하고 네이티브 앱과 같은 사용자 경험을 제공 본질은 웹이지만 앱처럼 사용 가능한 앱 PWA 장단점 개발 장점 익숙한 웹기술 그대로 이용 개발시간 단축 푸시알림, 오프라인캐시, HTTPS 사용 단점 하드웨어 사용은 웹 API를 통하므로 웹표준 지원하는 브라우저 필요 배포 장점 웹 브라우저만 있으면 어디든 배포가능 홈화면 추가 를 통해 응용프로그램으로 설치 가능 실시간 유지보수가능 단점 앱스토어, 플레이스토어 이용불가 사용 장점 빠른 실행속도 네이티브 앱과 유사한 사용자 경험 제공 단점 안드로이드, 윈도우 운영체제는 PWA의 모든 기능을 사용할 수 있으나 IOS는 일부만 사용 가능 PWA 프로그레시브 웹앱 핵심기술 6가지.. 2020. 10. 18.
자바스크립트 모듈관리 글로벌 네임스페이스 변수 충돌이 일어나기 쉬운 경우 여러 라이브러리를 한 프로그램에서 로드시 서로 충돌 하는 상황이 생길 수 있다. 네임 스페이스를 통해 최상위 스코프의 확인자가 아니라 속성 형태로 기능이 노출된다. 모듈관리 특정 스코프로부터 의존성 관리자를 이용한 다양한 명시적인 방법으로 확인자를 가져와 사용한다. 우발적인 스코프 충돌 예방을 위해 비공개 스코프에 확인자를 저장한다. var a = 3; (function foo(){ var a = 4; console.log(a); //4 })(); console.log(a); //3 이 함수는 함수 표현식으로 취급된다. 함수 자신의 내부 스코프에 묶여있다. 함수이름 foo를 자기 내부에 숨기면 함수를 둘러싼 스코프를 불필요하게 오염시키지 않는다. 선언문.. 2020. 10. 10.
스코프 Scope 스코프 특정 장소에 변수를 저장하고 나중에 변수를 찾는 데는 잘 정의된 규칙이 필요하다는 규칙 어디서 어떻게 변수를 찾는가를 결정하는 규칙의 집합 중첩 스코프 스코프도 다른 스코프 안에 중첩 될수 있다. 대상 변수를 현재 스코프에서 찾지 못하면 엔진은 다음 바깥의 스코프로 넘어가는 식으로 변수를 찾거나 글로벌 스코프라 부르는 가장 바깥 스코프에 도달할 때까지 반복한다. function foo(a) { console.log(a + b); } let b = 2; foo(2); //4 b에 대한 참조는 함수 foo 안에서 처리할수 없다. 함수를 포함하는 스코프에서 처리한다. (글로벌 스코프) 렉시컬 스코프 프로그래머가 코드를 짤 때 변수와 스코프 블록을 어디서 작성하는가에 기초해서 코드를 처리할 때 확정된다... 2020. 10. 10.

티스토리툴바