1️⃣vite + react + ts 설치

npm create vite@latest kiosk --template react-ts

cd kiosk

npm install

npm run dev

<aside> 💡

react버전 변경

확인 : ****npm list react

변경 : npm install react@18 react-dom@18

</aside>

2️⃣tailwindcss + styled-components + twin.macro 설치

# v3 버전 설치 방법
# Tailwind CSS v3.x 설치
npm i -D tailwindcss@3 postcss autoprefixer
npx tailwind init -p

# styled-components 설치 (TypeScript 지원 포함)
~~npm install styled-components
npm install -D @types/styled-components~~

# twin.macro 설치
npm install twin.macro
npm install vite-plugin-babel-macros

npm install -D @emotion/react @emotion/styled

npm install tailwindcss-animate

파일 수정

public 폴더 아래 → icons 폴더 생성 → 아래 파일들 넣기

favicomatic.zip

// vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import macrosPlugin from 'vite-plugin-babel-macros'

// <https://vite.dev/config/>
export default defineConfig({
  plugins: [
    react(),
    macrosPlugin(),
  ],
})

//  tailwind.config.js 수정

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js 수정

export default {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

test 코드

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 경고 표시 뜰 때 */
✅ 해결 방법 1: VSCode Tailwind CSS 확장 프로그램 설치
✅ 해결 방법 2: settings.json 수정
- VSCode에서 Ctrl + Shift + P (⌘ + Shift + P on Mac)
- "Preferences: Open Settings (JSON)" 검색해서 선택
{
  "css.lint.unknownAtRules": "ignore"
}

// App.tsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

**import tw from "twin.macro";
import styled from "styled-components";**

**// Tailwind 클래스를 styled-components처럼 사용 가능
const Container = styled.div`
  ${tw`flex flex-col items-center justify-center h-screen bg-gray-100`}
`;

const Title = styled.h1`
  ${tw`text-3xl font-bold text-blue-600`}
`;**

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="<https://vite.dev>" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="<https://react.dev>" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>

      **<Title>Welcome to My PWA</Title>**

      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

3️⃣prettier, eslint 설치

1. Prettier와 ESLint 관련 플러그인을 설치

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

설치된 패키지 설명:

• prettier: 코드 포맷팅 도구
• eslint-config-prettier: ESLint와 Prettier 간의 충돌을 방지
• eslint-plugin-prettier: ESLint에서 Prettier 규칙을 실행

2. eslint.config.js 수정

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import prettierConfig from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'

export default tseslint.config(
  { ignores: ['**/*', '!src', '!src/'] },   // .prettierignore 과 동일하게 설정
  {
    extends: [
      js.configs.recommended,
      ...tseslint.configs.recommended,
      prettierConfig, // Prettier 설정 추가 (충돌 방지)
    ],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier: prettierPlugin, // Prettier 플러그인 추가
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'prettier/prettier': 'error', // Prettier 규칙을 ESLint에서 에러로 표시
    },
  },
)