React - 프로젝트 셋팅 (PWA, Tailwind, Router, Axios, Redux-Toolkit)

하나의 게시글로 자주 사용했던 프로젝트 셋팅을
확인하기 위해 작성한 포스팅으로
수정이 필요하다면 댓글로 남겨주시면 감사하겠습니다 :)

---

PWA
    - 사실 아래의 코드만 추가하게 되면 간단하게 셋팅이 완료된다.
     (단, 프로젝트 생성시 셋팅을 해야 간단하며, 생성 이후에 수정하려면 꽤나 복잡하다) 

npx create-react-app 프로젝트명 --template cra-template-pwa

    - 이후 index.js 파일에 있는 아래의 코드를 수정해주기
      (이유는 register()를 사용하여 새로운 서비스 워커를 등록하여 
       사용자의 브라우저가 최신 버전의 서비스 워커를 다운로드하고 캐시하여
       새로운 버전의 웹 어플리케이션이 배포될 때마다
       브라우저에 새로운 서비스 워커를 설치하고 활성화하기 위해 사용하기 위해 사용한다고 함.)

// serviceWorkerRegistration.unregister();
serviceWorkerRegistration.register();

---

Tailwind

   - 빠르게 css를 적용시키기 위해 자주 사용하는 라이브러리
     설치 방법은 아래 경로를 통해 확인하는 것이 더 좋다.

경로: https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

 

   - 추가로 vscode를 사용중이라면 Tailwind CSS IntelliSense라는 extension을 설치하면 편리하게 사용이 가능하다.

Tailwind CSS IntelliSense

 

   - 그리고 Tailwind에서 제공하는 클래스가 아닌 따로 만들고 싶을 경우엔
     tailwind.config.js 파일의 plugins 안에 아래와 같이 추가를 해준다면
     자동완성으로 vscode에 나타나기에 작업에 용이하며 
     예를 들어 자주사용하는 flex justify-center item-center를 하나의 클래스로 합쳐서
     아래 코드와 같이 사용이 가능하다

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {}
  },
  plugins: [
    ({ addUtilities }) => {
      addUtilities({
        '.f-c-c': {
          '@apply flex justify-center items-center': ''
        },
      });
    }
  ]
};

   - plugins에 사용할 수 있는 함수의 종류는 4가지로 아래와 같은 경우에 사용한다고 한다.

1. addComponents: 새로운 컴포넌트를 추가합니다.
   주로 HTML 요소를 스타일링하기 위해 사용됩니다.
2. addBase: 기본 스타일을 추가합니다.
   주로 요소에 기본적인 스타일을 적용하기 위해 사용됩니다.
3. addVariant: 새로운 변형(variant)을 추가합니다.
   예를 들어, 반응형 디자인을 위한 변형이나 dark mode를 지원하기 위한 변형을 추가할 때 사용됩니다.
4. addUtilities: 유틸리티 클래스를 추가합니다.
   일반적으로 반복적인 스타일을 적용하기 위해 사용됩니다.

   - addVariant를 사용한 다크 모드 적용에 대해 궁금해서 찾아보니
     아래와 같이 적용하면 사용이 가능하다고 한다.

// tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {}
  },
  darkMode: 'class', // 다크 모드를 class 기반으로 사용합니다.
  plugins: [
    ({ addVariant }) => {
      // 'dark' 모드일 때만 스타일을 적용하는 변형을 추가합니다.
      addVariant('dark', ({ className }) => {
        return `.${className}.dark`;
      });
    },
  ],
};

// 적용 페이지

<div class="dark:bg-gray-900">다크 모드에서 배경이 회색으로 설정됩니다.</div>

---

React-Router

   - 설치

npm i react-router-dom

   - index.js에 app을 감싸주기 (React.StrictMode는 당장 필요하지 않아 지움)

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

---

React-Router

   - 설치

npm i axios

---

Redux, Redux-toolkit

   - 설치

npm i @reduxjs/toolkit react-redux

   - store.js 파일 생성 
     src 폴더 안에 store.js 파일 생성 후 아래 코드 추가 (src 폴더 안에 있기만 하면 되는 듯, 즉 하위 폴더안에도 추가 가능)

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: {},
});

   - index.js (Provider로 감싸주고 store 속성에 생성한 store파일을 추가해주기)

root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);