PWA API - Payments

Payment Request API 사용자가 선호하는 결제 방식을 제공하여 판매자(merchant)가 그 정보를 제공받도록 돕는 API다. PaymentAddress PaymentRequest PaymentRequestEvent PaymentRequestUpdateEvent PaymentMethodChangeEvent PaymentResponse MerchantValidationEvent MDN 문서 https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API Payment Request API - Web APIs | MDN The Payment Request API provides a consistent user experience for ..

PWA API - Device Orientation

Device Orientation 중력을 기준으로 기기의 물리적 방향의 변화(event)를 뜻한다. 모바일 기기처럼 손으로 들고 다니면서 웹을 접근할 수 있는 기기라면, 이를 통해 화면을 최적화할 수 있다. JavaScript는 이러한 이벤트에 활용할 수 있는 API로 크게 두 가지가 있다. DeviceOrientationEvent DeviceMotionEvent 1) DeviceOrientationEvent 기기 내 가속도계(accelerometer)가 기기의 방향 변화를 감지한다. 값의 종류 DeviceOrientationEvent.absolute DeviceOrientationEvent.alpha DeviceOrientationEvent.beta DeviceOrientationEvent.gamma ..

PWA API - Notifications

Notifications 웹 페이지가 사용자에게 시스템 알림 표시를 제어할 수 있게 하는 API다. 알림은 뷰포트 바깥에 위치하기 때문에 사용자가 탭을 변경하거나, 다른 앱으로 이동했을 때에도 표시된다. Method Notification.requestPermission() 페이지에서 알림을 표시할지 요청하는데 사용 Notification.close() 프로그램으로 알림을 닫음 예시 function notifyMe() { // 브라우저가 알림(notifications)를 지원하는지 확인 if (!("Notification" in window)) { alert("브라우저가 notification을 지원하지 않음"); } // 알림 허용이 되었는지 확인 else if (Notification.permissi..

PWA API - Location

Location 객체가 연결된 장소(URL)를 표현하는 API. 메소드 Location.assign() 주어진 URL의 리소스를 불러와 새 페이지로 이동한다. Location.reload() 현재 URL의 리소스를 강제로 다시 불러온다. Location.replace() 현재 리소스를 특정 URL의 리소스로 교체한다. 현재 페이지가 session History에 저장되지 않아 사용자가 뒤로가기를 하지 못한다는 점에서 assign()과 차이가 있다. 예제 var url = document.createElement('a'); url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'; cons..

PWA API - 서비스 워커

서비스 워커(Service Worker) 서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹 응용 프로그램, 브라우저, 네트워크 사이의 프록시 서버 역할을 한다. 서비스 워커의 목적 백그라운드 데이터 동기화 다른 출처에서의 리소스 요청을 응답 위치정보, 자이로 센서 등 계산에 높은 비용이 들어가는 다수의 페이지에서 함께 사용할 수 있도록 데이터 업데이트를 중앙화 개발 목적으로서 CoffeeScript, Less, CJS/AMD 모듈 등의 의존성 관리와 컴파일 백그라운드 서비스 훅 특정 URL 패턴에 기반한 사용자 지정 템플릿 제공 성능 향상. 사진 앨범의 다음 사진 몇 장처럼, 사용자가 필요로 할 것으로 생각되는 리소스의 프리페칭 등 MDN 문서 https://developer.mozilla..

PWA API - WebSockets

WebSocket 웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술이다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능하다. MDN 문서 https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API 웹 소켓 - Web API | MDN 웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 developer.mozilla.org

PWA API - Storage

Storage 특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가, 수정, 삭제할 수 있는 API다. 도메인의 세션 저장소 접근하기: Window.sessionStorage 도메인의 로컬 저장소 접근하기: Window.localStorage 메소드 Storage.key() 주어진 숫자 n에 대하여 저장소의 n번째 항목 키 반환 Storage.getItem() 주어진 키에 연결된 값 반환 Storage.setItem() 키가 저장소에 존재하는 경우 값을 재설정하며, 존재하지 않으면 키와 값을 저장소에 추가 Storage.removeItem() 주어진 키를 저장소에서 제거 Storage.clear() 저장소의 모든 키를 저장소에서 제거 예시 if(!localStorage.getI..

PWA - Progressive Web Apps

프로그레시브 웹 앱(PWA; Progressive Web Apps) 프로그레시브 웹 앱(이하 PWA)는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용하여 개발된 웹 앱으로 2016년 Google I/O에서 소개되었다. 구글이 말하는 PWA는 아래와 같다. PWA는 최고의 웹과 최고의 앱을 결합한 경험이다. 브라우저를 통해 처음 방문한 사용자에게 유용하며, 설치가 필요하지 않다. 사용자가 PWA와 관계를 점진적으로 형성할수록 성능이 더욱 강력해 질 것이다. 느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송한다. 모바일 앱처럼 전체 화면으로 로드되고, 홈 화면에 아이콘이 있다. 네이티브 앱 vs. 웹 2014년을 기점으로 모바일 사용자 수가 데스크탑 사용자..

타입 검사 - TypeScript (타입스크립트)

TypeScript (타입스크립트) Microsoft에서 구현한 JavaScript의 슈퍼셋(superset) 프로그래밍 언어로, JavaScript에 타입을 부여하여 컴파일 결과물로 JavaScript 코드를 출력한다. 정적 타입을 명시하여 JavaScript에서 생길 수 있는 타입 에러들을 잡아내어 개발자가 의도한 변수나 함수 등의 목적을 명확하게 전달하기 위해 사용한다. 파일 확장자는 ".ts"다. JavaScript vs. TypeScript // math.js function sum(a, b) { return a + b; } // math.ts function sum(a: number, b: number) { return a + b; } 위와 같이, TypeScript는 데이터 타입을 사전에 지..

테스트 프레임워크 - Enzyme

Enzyme Enzyme은 Airbnb에서 개발한 리액트용 컴포넌트 테스트 플러그인이다. Enzyme에 대해 알아보던 중 재미 있는 기사를 찾았다. https://dev.to/piotrstaniow/time-to-say-goodbye-enzyme-js-348c Time to say goodbye - Enzyme.js This post was also published on my blog and you can read it here. Let me start with a bold... dev.to Enzyme은 곧 못쓰게 될 거라는 내용이다. 요약하자면, Enzyme이 빠르게 변화하는 리액트를 따라가지 못하여 리액트 개발진들이 Enzyme 사용을 추천하지 않는다는 것이다. 실제로 리액트는 빠르게 발전하고 있..