# pwa

Service worker를 간단하게 사용해자
저번 면접을 통해 PWA의 존재에 대해 알게 되었었다.PWA를 간단하게 말해보자면, PWA는 앱과 웹의 장점들만 합친걸로 html,css,js등을 클라이언트 캐시에 저장해둬 앱처럼 사용할 수 있도록 하는 것이다.PWA의 장점은 정말 앱처럼 사용할 수 있다. Twitte

PWA? 프로그레시브 웹앱?
모바일 앱과 같은 경험을 주는 웹 앱앱 아이콘, 오프라인, 모바일 푸시, 보안(Https) 등의 기능을 제공네이티브 앱과 달리 HTML,JAVASCRIPT, CSS를 이용하여 구현반응형(Responsive) : 데스크탑, 모바일, 테블릿등 여러 기기에서 동일한 사용자
pwa
pwa ( Progressive Web Apps) : 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술 , 웹과 앱 모두 장점을 결합한 제품 pwa에서 구현 할 수 있는 기능 푸시 알림 아이콘을 홈 화면에 추가 설치 불필요 , 네이티브 앱과 같은
[PWA] PWA의 개념 & 실행해보기
기존에 있는 Spring boot 기반의 웹 사이트를 가지고 간단하게 PWA를 만들어보려고 한다. 1. ngrok 설치하기 ngrok 다운로드하기 ngrok 사이트는 여기에서 확인할 수 있다. ngrok 압축풀기 (개발자를 확인할 수 없기 때문에 앱을
SEO와 PWA에 대해 알아보자 !
정의 : 검색 엔진으로부터 웹 사이트나 웹 페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다.웹 페이지와 관련된 검색어로 검색한 검색 결

React 기초
정보 출처 https://www.youtube.com/watch?v=nahwuaXmgt8&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=2 기초 명령어 npx create-react-app 프로젝트 이름 폴더 구조 node_
[프로젝트 배경]
웹으로만 구현된 프로젝트에 대한 사용자의 접근성을 높이기 위한 방법을 요청받았다.모바일 앱이 푸시 노티 가능, 장소에 구애 받지 않는다는 점에서 사용자의 접근성을 극대화할 수 있다고 판단했고, 이에 대한 리서치를 시작했다.먼저, 웹프론트엔드 개발자이기 때문에 앱개발에

PWA(Progressive Web Apps)
요즘 웹의 필수 요구사항이라 언급되는 PWA(Progressive Web Apps)이다. 최근 웹 만큼이나 앱(모바일)의 사용이 크게 증가함으로써 이를 위해 사용되고 있는 기술인 만큼 웹 개발에서 큰 비중을 차지하고 있다.
PWA
페이지가 업데이트 될때마다 이전 캐시스토리지를 초기화 해줘야되는 문제들이 발생.이렇게 index.html파일에서 실행을 시키고 worker.js파일을 구현. 그래서 캐싱할 파일을 지정하고 오프라인일때 나오는 페이지도 캐싱목록에 넣어서 지정했다.이렇게 캐시스토리지네임을
Service Worker
브라우저가 백그라운드에서 실행하는 스크립트.웹 페이지와는 별개로 동작한다.페이지나 사용자 상호작용이 필요없는 기능에 대한 문호 개방(푸쉬 알림, 백그라운드 동기화 등)PWA를 만들 때 주로 사용된다.해당 api가 오프라인 환경을 완벽하게 통제할 수 있는 권한을 개발자에

PWA
pwa (progressive web application)의 줄임말이다. PWA는 웹이지만 네이티브 앱(모바일 앱)와 같은 역할을 할 수 있다. 네이티브 앱을 개발하는 속도보다 PWA의 개발 속도가 더 빠르다. 또한 푸쉬 알림, 오프라인 시에도 지원하기 때문에 네이티

웹 개발 방식(SPA,MPA,SSR,CSR)
웹 개발 방식은 여러가지 방법이 있겠지만, 그 중에서도 모던 웹 개발방식이라 불리는 PWA, SPA 와 전통적인(?) 방식의 MPA를 공부한 글HTML,CSS , JavaScript 같은 웹 기술로 만드는 앱이다.실제 앱은 아니지만 웹에서 사용자로 하여금 앱처럼 느낄
PWA를 배워보자!
개발 유튜버 '드림코딩 by 엘리' 님의 영상, 'PWA (Progressive Web App) 개념과 따라만들기' 을 보고 PWA가 무엇인지, 그리고 어떻게 간단한 PWA를 만들 수 있는지 알아보았다.

filter 함수로 minishop 구현하기 (2)
1. 코드 수정 1. 이벤트 위임을 사용하여 수정 2. 중복을 없애기 위해 변수 생성, 버튼이 아닌 빈 곳을 눌렀을 때 취해야 할 조건 추가, onClick 함수 따로 생성 2. 학습 내용 (1) 이벤트 위임 부모 컨테이너는 자식 요소에서 이벤트가 발생하면 모두

PWA를 이용하면 모바일앱인척 만들기
PWA(Progressive Web App)웹사이트를 모바일 앱으로 발행해서 그냥 쓰자는겁니다1\. 스마트폰, 태블릿 바탕화면에 여러분 웹사이트를 설치 가능합니다.(저거 설치된 앱 누르면 상단 URL바가 제거된 크롬 브라우저가 뜹니다. 일반 사용자는 앱이랑 구분을 못함
Vue.js PWA manifest.json 파일 존재하지 않거나 인식하지 않을 때
@vue/cli 4.5.13@node -v v12.16.1npm -v 6.13.4위와 같이 프로젝트를 생성하면서 메뉴얼을 선택하는 구간에 pwa를 선택했으나, manifest.json파일이 생성되어있지 않았다.잘못 프로젝트 개설한건가 싶었는데,build를 하고 난 di