React, Typescript, Vite, TailwindCSS 프로젝트 세팅

프로젝트에서 React, Typescript, Vite, TailwindCSS, Eslint, Prettier를 적용하는 방법을 알아보자

1. React + Vite + Typescript 환경 세팅

• 터미널에서 다음 명령어들을 입력한다.

$ npm init vite@latest front -- --template react-ts
$ cd front
$ npm i

여기서는 프로젝트 이름을 front로 설정하였다.

2. TailwindCSS 세팅

• 터미널에서 다음 명령어들을 입력한다.

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

• tailwind.config.js 파일을 다음과 같이 수정한다.

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

• index.css 파일에 다음 코드를 추가한다.

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

3. Prettier, Eslint 설정

Prettier와 Eslint도 적용하고 싶다면 아래와 같이 적용한다

• 터미널에 다음 명령어를 입력하여 패키지를 설치한다.

$ npm i -D prettier eslint-plugin-prettier eslint-config-prettier

• front 디렉토리에 .prettierrc 파일을 생성하고 다음 코드를 추가한다.

{
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "arrowParens": "always"
}

• front 디렉토리에 .eslintrc 파일을 생성하고 다음 코드를 추가한다.

{
  "extends": [
    "plugin:prettier/recommended",
    "react-app",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "@typescript-eslint/interface-name-prefix": "on",
    "@typescript-eslint/explicit-function-return-type": "on",
    "@typescript-eslint/explicit-module-boundary-types": "on",
    "@typescript-eslint/no-explicit-any": "on"
  }
}

참고 자료

https://larainfo.com/blogs/install-setup-vite-react-typescript-tailwind-css-3

https://javascript.plainenglish.io/set-up-your-environment-for-vite-react-and-tailwind-css-1cac0e3fbf96

https://wonillism.tistory.com/271