PWA을 적용하기 위한 기본 요건
•
https 지원
◦
안 해도 lighthouse는 PWA로 인식
•
service-worker 사용
◦
next.config.js 파일에 PWA 설정하면 build 시 자동 생성되는 파일
•
manifest 작성
참고
•
앱 아이콘 등록
◦
manifest.json 파일에서 등록 가능
프로젝트 설정
CNA(Next.js), PWA, Typescript, Eslint, Prettier
1.
Next.js + Typescript 설치
$ npx create-next-app 파일명 --typescript
Bash
복사
2.
프로젝트 폴더로 이동 후 추가 설치
$ npm i next-pwa
$ npm i next-compose-plugins # next-pwa를 사용하게 되면 하나의 플러그인만 사용할 수 있지만, 추가적으로 더 사용할 수 있게 한꺼번에 묶어주는 패키지.
Bash
복사
3.
next.config.js 설정
const withPlugins = require('next-compose-plugins');
const withPWA = require('next-pwa')({
dest: 'public',
});
module.exports = withPlugins([
withPWA,
// 추가 플러그인
]);
JavaScript
복사
4.
테스트
빌드 명령어 실행 후, [PWA] 어쩌고 뜨면 성공.
$ npm run build
# 아래와 같은 출력문이 뜨면 성공
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: F:\HS\Study\07_Noctem_Project\FE\Next+PWA\next-pwa\node_modules\next-pwa\register.js
> [PWA] Service worker: F:\HS\Study\07_Noctem_Project\FE\Next+PWA\next-pwa\public\sw.js
> [PWA] url: /sw.js
> [PWA] scope: /
> [PWA] Compile server
> [PWA] Compile server
info - Creating an optimized production build
info - Compiled successfully
Bash
복사
5.
manifest.json 생성
•
manifest 설정 가이드에 따라, 'short_name', 'start_url', '192x192 pixel과 512x512 pixel size의 icons'을 작성하면 된다. 하지만 걍 생성 해주는거 다 넣어버림.
•
압축 풀고 manifest.webmanifest 파일을 manifest.json으로 바꾸고 public 폴더에 넣어줌.
•
png 파일들도 public 폴더 아래에 임의 위치에 넣어줌.
manifest.json 코드
manifest의 display 속성값
속성값 | 설명 |
browser | 일반 브라우저와 동일하게 보입니다. |
standalone | 다른 앱들처럼 최상단에 상태표시줄을 제외한 전체화면으로 보입니다. |
fullscreen | 상태표시줄도 제외한 전체화면으로 보여줍니다.(ex. 게임) |
minimul-ui | fullscreen 과 비슷하지만 뒤로가기, 새로고침등 최소한의 영역만 제공합니다.(모바일 크롬 전용) |
6.
Eslint, Prettier 설정
•
CRA와는 달리 자동으로 적용이 안돼서 직접 해주어야 한다.
$ npm i -D eslint prettier
$ npm i -D eslint-config-prettier eslint-plugin-prettier eslint-plugin-jsx-ally
$ npm i -D eslint-config-airbnb # aribnb
$ npm i -D eslint-config-next # 이것도 설치해줬던가? 모르겠음. 없으면 설치하기
$ npm i -D eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks
$ npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
Bash
복사
7.
.eslintrc.js 생성
파일
8.
.prettierrc 생성
{
"arrowParens": "avoid",
"jsxSingleQuote": true,
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"bracketSpacing": true
}
JSON
복사
9.
루트 > pages 폴더 > _document.tsx 파일 추가
import Document, {
DocumentContext,
DocumentInitialProps,
Html,
Head,
Main,
NextScript,
} from 'next/document';
class MyDocument extends Document {
static async getInitialProps(
ctx: DocumentContext,
): Promise<DocumentInitialProps> {
const initialProps = await Document.getInitialProps(ctx);
return initialProps;
}
render() {
return (
<Html lang='ko'>
<Head>
<meta charSet='utf-8' />
<meta name='theme-color' content='#FFFFFF' />
<meta
name='viewport'
content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'
/>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' />
<link rel='manifest' href='/manifest.json' />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
TypeScript
복사
10.
npm run dev
해보면 앱 설치 뜸
※ .gitignore에 pwa 빌드 파일 빼줌.
**/public/workbox-*.js
**/public/sw.js
**/public/worker-*.js
Bash
복사
일반적인 Next.js 사용 방법
•
component 폴더를 만들어 Layout.tsx를 만든 뒤 pages/_app.tsx를 Layout으로 감싼다
•
원하는 전역 스타일링이나 모든 페이지에서 나왔으면 하는 요소를 Layout.tsx 에서 제어.
•
Nav바 등등 모든 페이지에서 필요한 화면을 component 파일에 만든 뒤 Layout.tsx로 보낸다
→ 대충 _papp
•
pages 폴더 내부에서 원하는 페이지 루트를 만들고 필요한 컴포넌트들은 component 폴더 내부에서 만들어서 import한다.
VS Code 설정
저장 시 typescript(.tsx) 파일 자동 format 설정(이거 안 하면 안 먹힘)
1.
ctrl + shift + p
2.
open setting json 입력
3.
작업 영역 설정 열기 선택
4.
아래 코드 입력
{
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
JSON
복사
※ 루트 폴더에 .vscode/settings.json 파일 생성됨.