React로 모바일 앱 만들기 (feat. PWA)

안녕하세요~
드디어 공통 프로젝트가 끝나고 다시 돌아왔습니다!!

이번에 프로젝트를 얘기하다보니 웹보다는 앱쪽에 가까운 아이디어가 나와 고민하던 중 PWA에대해 알게 되었습니다.

리액트 네이티브를 사용하지 않고 리액트만으로 앱처럼 보일 수 있다니 궁금하지 않으신가요?

PWA란?

Progressive Web Application로 웹으로 개발된 사이트를 앱처럼 사용할 수 있습니다.
브라우저에서 실행되는 Web App을 마치 네이티브 앱처럼 만들어 주는 기술이며, 네이티브의 기능을 사용할 순 없지만 읽기 속도, 표시 속도, 오프라인에서의 실행 등 이점을 얻을 수 있습니다. 서비스 형태에 따라 PWA 사이트에 접속한 경우, 바탕화면에 PWA를 설치한다는 라는 팝업을 띄울 수도 있습니다.

간단하게 말하면 '모바일 앱인 척' 할 수 있게 만들어 주는 것입니다.

그렇다면 어떻게 적용시키는 것일까요??

1. PWA template 생성

// 1. javascript
npx create-react-app pwa-react --template cra-template-pwa

// 2. typescript
npx create-react-app pwa-react --template cra-template-pwa-typescript

2. service worker 등록하기

// index.js

// 추가해 줍니다.
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

serviceWorkerRegistration.register();

3.icons 설정하기

다양한 크기의 앱 아이콘이 필요합니다. (아래의 사이트에서 만들 수 있습니다)
https://favicomatic.com/

3.1) 다운로드 받은 파일들을 public 폴더 안에 icons 폴더를 생성해 저장해줍니다.

3.2) public 폴더 안에 있는 index.html의 head태그 안에 meta tag를 모두 넣어줍니다.

4. 빌드 하기

해당 프로젝트를 build 해줍니다.

npm run build

5. manifest.json / service-worker.js파일 살펴보기

manifest.json 파일은 웹앱의 아이콘, 이름, 테마색을 지정할 수 있습니다.

{
  "short_name" : "앱런처나 바탕화면에 표시할 짧은 이름",
  "name" : "앱이름",
  "icons" : { 여러가지 사이즈별 아이콘 이미지 경로 },
  "start_url" : "앱아이콘 눌렀을 시 보여줄 메인페이지 경로",
  ...
}