안녕하세요😀 싸피 11기 2학기가 시작한지 한 달이 다 되어 갑니다🍃
저희 팀 주제는 데스크탑보다 모바일에 적합할 거 같아 웹앱을 구현하기로 했는데요!
PWA 특징과 PWA를 쓰기 위한 세팅법을 알아보겠습니다.
📱 PWA
- Progressive Web Apps
- 모바일에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱
- ex) Twitter Lite
특징
- PWA는 웹처럼 개발하면 되지만 스마트폰에 네이티브 앱처럼 설치할 수 있고 앱처럼 보이고 동작한다.
- 검색 엔진이 최적화되어있다. (SEO)
- 백그라운드 기능이 네이티브 앱보다는 제한적이지만, 푸시 알림 정도는 가능하다.
- 네이티브 앱에 비해 하드웨어 접근이 제한적이다.
저희 팀은 React를 써서 프로젝트를 진행할 계획이었는데 주제가 모바일에 적합해 PWA를 적용하게 되었습니다😊
🔧 환경 세팅
저는 yarn을 이용해서 환경 세팅을 했는데 npm을 쓰셔도 무방합니다.
1. vite 프로젝트 생성
yarn create vite
프로젝트명을 입력한 후, React와 TypeScript를 선택했습니다.
프로젝트 디렉토리로 이동해서 패키지를 설치한 뒤 프로젝트를 실행할 수 있습니다.
cd vite-project // 디렉토리 이동
yarn // 패키지 설치
yarn dev // 프로젝트 실행
2. PWA 세팅
manifest.json, sw.js 파일을 만들어줘야 합니다.
- manifest.json
앱에서 띄울 아이콘을 준비합니다. 아이콘 크기 변환 사이트에서 원하는 이미지를 넣으면 필요한 아이콘들을 얻을 수 있습니다. 준비한 아이콘들은 public/icons 폴더에 넣어주세요.
그 후 public 폴더 아래에 mainfest.json 파일을 생성합니다.
아래 코드를 복붙해서 name, short_name, background_color, theme_color, description을 프로젝트에 맞게 수정해주세요.
{
"name": "Yeomyeong808",
"short_name": "808",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#FFF1A7",
"description": "Kindergarten management services",
"icons": [
{
"src": "icons/favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "icons/favicon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "icons/logo-512x512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "icons/logo-512x512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
루트 디렉토리에 sw.js 파일을 생성하여 Service Worker 코드를 작성해주세요.
아래 코드를 바탕으로 필요에 따라 수정하시면 됩니다!
// install event
self.addEventListener('install', (e) => {
console.log('[Service Worker] installed')
})
// activate event
self.addEventListener('activate', (e) => {
console.log('[Service Worker] actived', e)
})
// fetch event
self.addEventListener('fetch', (e) => {
console.log('[Service Worker] fetched resource ' + e.request.url)
})
index.html 파일도 수정합니다. 메타 정보와 sw.js를 불러오는 스크립트를 추가했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="theme-color" content="#FFF1A7" />
<link rel="icon" href="icons/favicon-196x196.png" type="image/png" />
<link rel="alternate icon" href="/favicon.ico" type="ico" sizes="16x16" />
<link
rel="apple-touch-icon"
href="icons/apple-touch-icon-152x152.png"
sizes="180x180"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="/manifest.json" />
<title>Vite Typescript React PWA</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script>
if ('serviceWorker' in navigator) {
// Register a service worker hosted at the root of the
// site using the default scope.
navigator.serviceWorker
.register('/sw.js')
.then((registration) => {
console.log('Service worker registration succeeded:', registration)
})
.catch((err) => {
console.log('Service worker registration failed:', error)
})
} else {
console.log('Service workers are not supported.')
}
</script>
</body>
</html>
여기까지 왔으면 기본적인 준비가 완료되었습니다!
📺 프로젝트 실행
아래 버튼이 정상적으로 뜨면 됩니다!
위 버튼을 눌러보면 아래처럼 뜨는 걸 확인하실 수 있어요~!
그럼 다들 2학기 프로젝트도 빠이팅하세요!!✊✊
'Library & Runtime > React' 카테고리의 다른 글
| camelCase 요청 데이터를 snake_case로 변환하기 (0) | 2024.11.05 |
|---|---|
| snake_case 응답 데이터를 camelCase로 변환하기 (0) | 2024.11.04 |
| [React] React Router 총정리 (0) | 2024.08.26 |
| [React] React Quill 사용하기 & HTML 렌더링하기 (0) | 2024.08.21 |