React + PWA project 1

npx create-react-app pwa-react --template cra-template-pwa

 

명령어를 사용하면 Progressive Web App (PWA) 기능이 포함된 React 프로젝트를 초기 설정할 수 있다. 이 템플릿은 기본적인 PWA 설정을 자동으로 구성해준다. 이것은 서비스 워커 설정과 웹 매니페스트를 포함하므로, 별도로 설정을 추가하거나 수정하는 과정을 최소화할 수 있다.

 

 

지금부터, Kali Magazine의 기본 모델을 카피하여 PWA작업을 진행하려고 한다.

 

Kali Magazine Frontend 구성은 다음과 같다.

 

• Redux: 상태 관리 라이브러리.
• Redux Persist: 클라이언트 측에서 애플리케이션의 상태를 지속적으로 유지시키기 위해 사용.
• Redux Saga: 비동기 작업을 처리하기 위한 미들웨어. 외부 API와의 상호작용을 포함한 비동기 로직을 관리.
• Redux Toolkit: Redux 코드를 더 간결하고 관리하기 쉽게 만드는 도구 모음.
• axios: 외부 API와의 HTTP 통신을 위한 라이브러리.
• Material-UI: 구글의 Material Design을 기반으로 한 React 컴포넌트 라이브러리. 이 라이브러리는 UI 구성에 있어 일관된 디자인과 사용성을 제공.

 

시작한다 ▼

 

1. 먼저 위와 같이 template을 생성하고,

 

2. 업데이트에 용이하도록 yarn으로 패키지를 구성해준다. (package-lock.json은 삭제)

 

Yarn으로 패키지 구성

3. PWA 구성을 위해 index.js 변경:  serviceWorkerRegistration.unregister() -> serviceWorkerRegistration.register() 

index.js 구성

4. 필요 패키지 구성하기.

# Redux, Redux Persist, Redux Thunk, Redux Toolkit 설치
yarn add @reduxjs/toolkit redux react-redux redux-persist redux-saga

# axios 설치 (외부 API 요청을 위한 HTTP 클라이언트)
yarn add axios

# Material-UI 설치 (UI 컴포넌트 라이브러리)
yarn add @mui/material @emotion/react @emotion/styled

# router 설치
yarn add react-router-dom

 

5. 폴더 구조 잡기

• src
  • assets 정적(static)data 관리
  • components - 컴포넌트 관리
  • hooks - 리엑트 훅 관리
  • lang - 언어 관리
  • layouts - 큰 틀 구성 
  • redux - 상태 관리
  • services - 외부 데이터 송수신
  • utils - 유틸
  • views - 페이지 관리
  • router - 라우터