파이널 프로젝트 회고 01

1. 기본 환경설정

1.1. 폴더 생성

pnpm create vite {폴더 이름} --template react

설치 완료 이후 pnpm i, 기본적으로 다 설치해줌

1.2. vite 플러그인 설치

pnpm add @vitejs/plugin-react -D

2. tailwind 환경설정

2.1. -D 개발자 모드로 설치

pnpm add -D tailwindcss postcss autoprefixer

2.2. tailwindcss 설치

pnpm tailwindcss init -p

@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

2.3. lodash 설치

pnpm add lodash

2.4. tailwind.config.js

import { range } from "lodash";
const pxToRem = (px, base = 16) => `${px / base}rem`;

const pxToRemFunc = (start, end) => {
  return range(start, end).reduce((acc, px) => {
    acc[`${px}pxr`] = pxToRem(px);
    return acc;
  }, {});
};

// 타입을 지정하고 싶은 객체 바로 위에 타입스크립트 구문이 포함된 jsdoc 주석을 써 주셔야 타입스크립트의 지원을 받을 수 있습니다, 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx,html}"],
  theme: {
    extend: {
      spacing: {
        ...pxToRemFunc(0, 1000),
      }, // px을 rem으로 변환
      inset: {
        ...pxToRemFunc(0, 1000),
      },
      fontSize: {
        ...pxToRemFunc(0, 1000),
      }, // px을 rem으로 변환
      lineHeight: {
        ...pxToRemFunc(0, 1000),
      }, // px을 rem으로 변환
      screens: {
        mobile: "360px",
        tablet: "768px",
        desktop: "1280px",
      },
    },
    fontFamily: {
      sans: ["noto-sans-kr", "sans-serif"],
    }, // font-family: noto-sans-kr, sans-serif;
  },
  plugins: [],
};

2.5. eslintrc.cjs 에서 module:true 설정

env: { module:true, browser: true, es2020: true },

2.6. main.css 파일 추가

@import url('./tailwind.css');

2.7. tailwind 정렬 설치, js 작동 위해서

pnpm install -D prettier prettier-plugin-tailwindcss

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

3. 스토리북 설치

pnpm dlx storybook@latest init

3.1. 라우터, 헬멧, 츄스탄트 동시 설치

pnpm add react-router-dom@6.4 react-helmet-async zustand

4. Swiper 설치

pnpm install swiper

5. eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:storybook/recommended',
    'plugin:react-hooks/recommended',
    'plugin:tailwindcss/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'tailwindcss'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/prop-types': 'off',
    'prefer-const': 'error',
    'tailwindcss/classname-order': 'on',
  },
};

6. prettier 설정

.pretierc.cjs 생성

/* .eslintrc.cjs */
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:storybook/recommended',
    'plugin:react-hooks/recommended',
    'plugin:tailwindcss/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'tailwindcss'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/prop-types': 'off',
    'prefer-const': 'error',
    'tailwindcss/classname-order': 'on',
  },
};

스니펫 사용시 config:prettierc.cjs

7. 추가 설정

7.1.

pnpm add @tanstack/react-query@5

7.2.

pnpm add pocketbase

7.3.

pnpm install react-hook-form

7.5. config

왜인지 모르겠지만.. 자꾸 컴퓨터가 config 명령어를 재부팅할 때마다 날려서
그때는 이 명령어를 사용하면 된다.

git config --global core.editor "code --wait"

git config --global commit.template .gitmessage.txt

7.6. .env 설정

VITE_PB_URL = https://sangbase.kro.kr VITE_PB_API = https://sangbase.kro.kr/api