일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- swiper
- 애니메이션
- addEventListener
- 이벤트리스너
- insertAdjacentHTML
- width
- input
- classList
- Animation
- 스크롤
- html
- Hover
- NodeList
- forEach
- getBoundingClientRect
- pointermove
- Sticky
- React
- mousemove
- NAV
- JavaScript
- 확장성
- 반복문
- localstorage
- scrollevent
- swiperjs
- scroll
- css
- For
- scrollY
- Today
- Total
ZeroToHunnit Coding
[React] 11일차 일기 본문
이제 강의는 다 들었지만 뭔가.. 아직 잘 모르겠다. 다시 반복하면서 사이트 하나를 만들 계획이다. 그러면 자연스럽게 익숙해지지 않을까 싶다.
1. PWA(progressive Web App): 웹사이트를 안드로이드/ios 모바일 앱처럼 사용할 수 있다. 웹사이트에서 스마트폰 홈화면에 앱설치 가능
2. PWA장점
1) 모바일 환경에서 웹사이트 설치 가능
2) 오프라인에서도 동작 가능 (Cache storage)
3) 설치 유도 비용이 적음
3. PWA 설치 방법: 프로젝트를 만들 때 바로 terminal에 npx create-react- app 프로젝트명 --template cra-template-pwa 입력
4. 설치 후 index.js에 serviceWorkerRegistration.unregister();의 unregister을 register로 바꿔주면 됨.
5. 바꾼 후 npm run build해주면 manifest.json과 service-worker.js 파일이 생성됨
6. manifest.json 파일 안에는 웹앱의 아이콘, 이름, 테마색같은 것을 결정할 수 있음
7. service-worker.js는 오프라인에서도 사용이 가능하게 HTML, CSS, JS 파일들을 하드에 설치해줌. 이 파일들은 Cache storage에 저장됨
8. 개발자도구로 PWA 디버깅하려면 에디터로 build 폴더를 열고 거기 안에 있는 index.html을 live server로 열면 됨. 개발자 도구 들어가서 Application탭을 클릭하면 PWA와 관련된 것을 볼 수 있다.
9. PWAbuilder 사용하면 apk파일로 변환할 수 있음
'React 일기' 카테고리의 다른 글
[React] 10일차 일기 (2) | 2024.01.29 |
---|---|
[React] 9일차 일기 (2) | 2024.01.23 |
[React] 8일차 일기 (2) | 2024.01.22 |
[React] 7일차 일기 (0) | 2024.01.21 |
[React] 6일차 일기 (0) | 2024.01.19 |