[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파일로 변환할 수 있음