React + Vite + gh-pages

리마인드 용도로 작성한 글입니다.

1. vite 설치

npm create vite@latest

2. 프로젝트명 설정

3. 프레임워크 설정 (React / etc)

4. 템플릿 설정 (Variant: TypeScript / JavaScript / etc)

5. 기본 패키지 설치

npm install

6. 추가 패키지 설치

• react-router-dom

npm install react-router-dom

• styled-components

npm install --save styled-components

• styled-reset

npm i styled-reset

• redux

npm i redux
npm i react-redux

// 크롬 확장 연동하여 스토어 값 바뀌는 상태 확인 가능: react 16.0.0 ver 이하 dependencies로 인해 사용 불가
// npm i -D redux-devtools

• axios

npm install axios

• js-cookie

npm i js-cookie

• svgr/rollup

npm install @svgr/rollup --save-dev

• prettier & lint

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

7. prettier & lint 파일 생성 및 설정 (==.eslintrc 일단 제외하고 진행==)

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.tabSize": 2,
  "editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
	"javascript.format.enable": false,
  "prettier.eslintIntegration": true,
	// 바로 아래 코드는 미지원으로 인해 제거하고 사용하기
	// "prettier.disableLanguages": ["js"],
	"eslint.alwaysShowStatus": true,
	"files.autoSave": "onFocusChange"
}

// .eslintrc

- 팀원 모두 맥 유저일 경우
{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-var": "warn", // var 금지
    "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
    "no-nested-ternary": "warn", // 중첩 삼항 연산자 금지
    "no-console": "warn", // console.log() 금지
    "eqeqeq": "warn", // 일치 연산자 사용 필수
    "dot-notation": "warn", // 가능하다면 dot notation 사용
    "no-unused-vars": "warn", // 사용하지 않는 변수 금지
    "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
    "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
    "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
    "react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
    "react/no-unused-state": "warn", // 사용되지 않는 state
    "react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
    "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
    "react/jsx-curly-brace-presence": "warn" // jsx 내 불필요한 중괄호 금지
  }
}

- 팀원 중 윈도우 유저가 있는 경우
{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-var": "warn", // var 금지
    "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
    "no-nested-ternary": "warn", // 중첩 삼항 연산자 금지
    "no-console": "warn", // console.log() 금지
    "eqeqeq": "warn", // 일치 연산자 사용 필수
    "dot-notation": "warn", // 가능하다면 dot notation 사용
    "no-unused-vars": "warn", // 사용하지 않는 변수 금지
    "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
    "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
    "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
    "react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
    "react/no-unused-state": "warn", // 사용되지 않는 state
    "react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
    "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
    "react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

// .prettierrc

{
  "tabWidth": 2, // 탭 사이즈 2칸
  "endOfLine": "lf", // CRLF 대신 LF를 강제
	"arrowParens": "avoid", // 화살표 함수 파라미터 자리 불필요한 소괄호 제거
	"singleQuote": true, // 쌍따옴표 대신 홑따옴표 사용
}

8. vite.config.js 설정

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from '@svgr/rollup';

// https://vitejs.dev/config/
export default defineConfig({
	// root path 선언 필요: repository name과 동일하게 선언하기
	base: '/reunion',
	// vite에서 svg를 사용하기 위한 세팅
	plugins: [svgr(), react()],
	server: {
		// npm run dev 시 웹 브라우저 자동 열기
		open: true,
	},
	build: {
		// 패키지 크기 압축
		chunkSizeWarningLimit: 1600,
	},
    resolve: {
      // 절대 경로 지정
      alias: [
        { find: "@", replacement: "/src" },
        { find: "@modules", replacement: "/src/modules" },
        { find: "@components", replacement: "/src/components" },
        { find: "@pages", replacement: "/src/pages" },
        { find: "@images", replacement: "/src/assets/images" },
      ],
    },
});

9. gh-pages 설치 및 설정

npm install gh-pages

// package.json
{
	"name": "reunion",
	// private true인 경우에만 gh-pages 사용 가능
	"private": true,
	// homepage key 생성 후 value로 호스팅할 깃헙 레파시토리명이 들어간 url 입력
	"homepage": "https://깃헙아이디.github.io/레파시토리명",
	"version": "0.0.0",
	"scripts": {
		// dev 위에 두 줄 추가: 빌드 폴더 주의하기(CRA = build / Vite = dist)
		"predeploy": "npm run build",
		"deploy": "gh-pages -d dist",
		"dev": "vite",
		...
	}
}

10. Router.jsx 생성 후 basename 설정

// basename의 값은 레파시토리명과 동일하게 처리합니다.
<BrowserRouter basename="/reunion">

11. 깃헙 레파시토리와 연결

12. 작업 완료 후 배포 및 확인

npm run deploy

1. 깃헙 레파시토리 이동
2. Settings 이동
3. Pages 이동
4. Branch에서 Select branch를 gh-pages(기본값은 None)로 선택 후 Save
5. 같은 페이지 내 상단 영역의 Visit site 클릭