리마인드 용도로 작성한 글입니다.
npm create vite@latest
프로젝트명 설정
프레임워크 설정 (React / etc)
템플릿 설정 (Variant: TypeScript / JavaScript / etc)
기본 패키지 설치
npm install
npm install react-router-dom
npm install --save styled-components
npm i styled-reset
npm i redux
npm i react-redux
// 크롬 확장 연동하여 스토어 값 바뀌는 상태 확인 가능: react 16.0.0 ver 이하 dependencies로 인해 사용 불가
// npm i -D redux-devtools
npm install axios
npm i js-cookie
npm install @svgr/rollup --save-dev
npm install -D prettier eslint-config-prettier eslint-plugin-prettier
// .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, // 쌍따옴표 대신 홑따옴표 사용
}
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" },
],
},
});
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",
...
}
}
// basename의 값은 레파시토리명과 동일하게 처리합니다.
<BrowserRouter basename="/reunion">
깃헙 레파시토리와 연결
작업 완료 후 배포 및 확인
npm run deploy
1. 깃헙 레파시토리 이동
2. Settings 이동
3. Pages 이동
4. Branch에서 Select branch를 gh-pages(기본값은 None)로 선택 후 Save
5. 같은 페이지 내 상단 영역의 Visit site 클릭