# pwa

13개의 포스트
post-thumbnail

웹 최적화

프런트 엔드 성능 로딩 최적화 1. 브라우저 기준 최적화의 문제점 Navigation Timing processing && load 이 두 이벤트를 앞 단기고 빨리 하는데 목표가 있다. domContentLoadedEvent(processing) - 브라우저가 ht

2021년 2월 14일
·
0개의 댓글
post-thumbnail

React Native (feat. Ionic, Flutter)

RN 설명, Ionic 설명, flutter 간단소개와 RN vs ionic vs Flutter 비교

2021년 1월 16일
·
0개의 댓글

TIL: PWA(Progressive web applications)

프로그레시브 웹 앱, 그러니까 PWA(Progressive web applications)란 무엇일까? 먼저 MDN의 정의를 살펴보자면 이렇다. PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다.

2021년 1월 11일
·
0개의 댓글
post-thumbnail

TIL] PWA(+모바일 앱의 종류)?

개발하기 쉽고 사용하기 편리한 앱을 만들기 위한 방법론 중의 하나로 모바일 웹의 한계를 브라우저의 발전을 통해 끌어올린 것으로 고성능의 앱을 개발하는 것은 한계가 있지만, 굳이 앱 형태로 개발할 필요가 없는 경우에는 브라우저에서 돌리는 것보다 훨씬 편리하게 이용할 수

2020년 12월 26일
·
0개의 댓글
post-thumbnail

PWA & 서비스 워커

최근 모바일 뷰에 대해 고민하면서 PWA 를 적용해보면 어떨까 하는 생각이 들어 PWA 를 공부해 보았습니다. 생각보다 자료가 알기 어려워서 정리할 겸 작성해봅니다. Progressive Web AppAPP LIKE 하게 동작하는 웹 사이트정의는 애매모호하지만 Goog

2020년 11월 17일
·
1개의 댓글
post-thumbnail

코로나 건강 설문 앱을 만들면서(feat. google forms, react, pwa, firebase functions)

회사에서 코로나 때문에 매일 건강 이상 여부를 체크하는 구글 설문지를 작성해야되는 일이 생겼습니다. 사실 1분도 채 안 걸리지만 여간 귀찮은 일이 아니어서 자동화를 해보기로 마음먹었습니다.먼저 매일 매일 제출해야 했었던 설문지입니다. 원본이 아니라 제가 비슷하게 만든

2020년 8월 22일
·
4개의 댓글
post-thumbnail

pwa cache pattern

캐싱패턴이라... 프론트 개발자에게는 조금 생소한 주제일 수 있다.하지만 요새 트렌드의 방향이 PWA인 만큼 캐쉬에 대해서 자세하게 알아보도록 하자.여기서 캐싱 패턴이란, serviceWorker에 캐싱된 데이터를 어떻게 이용할 지 정하는 것을 말한다.우선 가장 기본적

2020년 7월 4일
·
0개의 댓글
post-thumbnail

PWA App글꼴 바꾸기

현재 Toy project로 Progressive-Web-App 제작중인데(React로), 스타일을 StyledComponent 사용중이다. 스타일 컴포넌트 사용하면서 전체 글꼴 바꾸는 법!보통 프로젝트의 index.js에 createGlobalStyle 모듈을 im

2020년 5월 3일
·
0개의 댓글

[react + pwa + webpack] PWA 적용하기

PWA 적용하기 1. 노드 모듈 인스톨 pwa에 관련한 웹팩 모듈을 인스톨 해준다. 2. manifest.json 파일 생성 public/manifest.json 3. webpack 설정 추가 webpack.config.js src/sw.js manifest 와 service worker 설정까지 추가하였다. 4. serviceWorker ...

2019년 12월 23일
·
2개의 댓글

[react + pwa + webpack] 투두 리스트 만들기

투두 리스트 만들기 1. src/components/Root.js 생성 src/components/Root.js src/index.js 2. 스타일 관련 폴더 생성 및 sass-loader 추가 webpack.config.js 원래 스타이 설정 부분(test: css)로 되었던 부분을 아래와 같이 변경. src/styles/index.scss ...

2019년 12월 22일
·
0개의 댓글

[react + pwa + webpack] 리액트 프로젝트를 웹팩으로 설정하기.

리액트 프로젝트를 웹팩으로 설정하기. 1. 프로젝트 생성 및 깃 저장소 master 푸시. .gitignore 2. 프로젝트 구조 설정 및 기초가 되는 node module 인스톨 src 폴더 생성. public 폴더 생성. es6 문법을 사용하기 위한 노드 모듈 설치. 3. 웹팩 관련 모듈 설치 4. webpack.config.js 설정 we...

2019년 12월 22일
·
0개의 댓글

Nuxt PWA 적용기

0. PWA란? PWA는 구글에서 밀고 있는 웹기술로 progress web app의 역자입니다. 대표적인 기능으로는 푸시 알람, 오프라인 지원, 앱 같이 설치 된다는 점입니다. 일단 저는 푸시 알람과 오프라인 지원은 완벽하게 지원되는 단계가 아닌 어떻게 도입할 수 있는지에 대해서 서술해보려고 합니다. 나중에 둘 다 도입 및 해결하게 되면 추가적으로 ...

2019년 2월 9일
·
0개의 댓글