[React] 프로젝트 초기 세팅 (Typescript, ESLint, Prettier, Tailwind CSS)

개발/React

[React] 프로젝트 초기 세팅 (Typescript, ESLint, Prettier, Tailwind CSS)

세크레투스 2024. 7. 11. 21:46

SMALL

1. Typescript create-react-app 생성

$ npx create-react-app <project-name> —-template typescript

node.js가 16 버전 이상인 경우, (현재 node.js LTS 버전이 20이므로 대부분 16 이상일것임.)

npm start 시 에러가 발생할 수 있으므로,

package.json 에서 "scripts" 부분을 다음과 같이 수정해준다.

{
...
,
"scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build",
    "test": "react-scripts --openssl-legacy-provider test",
    "eject": "react-scripts eject"
},
...
}

2. Tailwind CSS 라이브러리 설치

tailwind css를 사용하기 위해서 다음 명령어를 통해 설치한다.

$ npm install -D tailwindcss postcss autoprefixer

그 다음, tailwind css를 초기화 하기 위해서 다음 명령어를 통해 'tailwind.config.js' 파일을 생성한다.

$ npx tailwindcss init

tailwind.config.js 파일을 다음과 같이 작성한다.

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

브라우저에 tailwind css의 기능을 지원할 수 있도록 설정하기 위해 PostCSS 설정파일인 'postcss.config.js'를 생성하고, 다음과 같이 작성한다.

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

'src' 디렉토리 내의 css 파일에 다음 내용을 추가하여 tailwind css를 react 프로젝트에 추가해준다.

(필자의 경우, src 디랙토리 하단에 styles 폴더를 추가하고, 그 안에 index.css 파일을 추가한 후 그 안에 작성했다.)

// src/styles/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind css를 추가시킨 css 파일을 `src/index.tsx` 파일에 import 시킨다.

import './styles/index.css';

tailwind css가 잘 적용되는지 App.tsx에 다음과 같이 작성하여 확인한다.

import React from 'react';

const App = () => {
  return (
    <div className="p-4 bg-blue-500 text-white">
      <h1 className="text-2xl font-bold">Tailwind CSS가 적용되었습니다!</h1>
    </div>
  );
};

export default App;

3. ESLint & Prettier 라이브러리 설치

먼저 필요한 라이브러리를 설치합니다.

$ npm install -D eslint prettier prettier-plugin-tailwindcss eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-config-airbnb @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript eslint-plugin-prettier eslint-config-prettier

프로젝트 루트 디렉토리에 `eslint.config.js` 파일을 생성하고, 다음과 같이 작성한다.

export default [
  {
    ignores: ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx"],
    parser: "@typescript-eslint/parser",
    parserOptions: {
      project: "./tsconfig.json",
      ecmaVersion: "latest",
      ecmaFeatures: {
        jsx: true,
      },
    },
    env: {
      browser: true,
      node: true,
      es6: true,
    },
    extends: [
      "airbnb",
      "airbnb-typescript",
      "airbnb/hooks",
      "plugin:react/recommended",
      "plugin:react-hooks/recommended",
      "plugin:jsx-a11y/strict",
      "plugin:@typescript-eslint/recommended",
      "plugin:prettier/recommended",
      "prettier",
    ],
    plugins: [
      "react",
      "react-hooks",
      "@typescript-eslint",
      "jsx-a11y",
      "prettier",
    ],
    settings: {
      react: {
        version: "detect",
      },
    },
    rules: {
      "no-underscore-dangle": "off",
      "react/react-in-jsx-scope": "off",
      "react/jsx-filename-extension": [
        "warn",
        {
          extensions: [".ts", ".tsx"],
        },
      ],
      "no-useless-catch": "off",
      quotes: ["error", "double"],
      "@typescript-eslint/quotes": ["error", "double"],
      "prettier/prettier": [
        "error",
        {
          printWidth: 120,
          semi: true,
          trailingComma: "all",
          arrowParens: "avoid",
          htmlWhitespaceSensitivity: "css",
          jsxSingleQuote: false,
        },
      ],
    },
  },
];

프로젝트 루트 디렉토리에 `.eslintignore` 파일을 생성하고, 다음과 같이 작성한다.

dist
public

프로젝트 루트 디렉토리에 `prettier.config.js` 파일을 생성하고, 다음과 같이 작성한다.

module.exports = {
  printWidth: 120,
  semi: true,
  trailingComma: "all",
  arrowParens: "avoid",
  htmlWhitespaceSensitivity: "css",
  jsxSingleQuote: false,
  plugins: [require("prettier-plugin-tailwindcss")],
};

프로젝트 루트 디렉토리에 `.prettierignore` 파일을 생성하고, 다음과 같이 작성한다.

dist
package.json
package-lock.json
node_modules
build
coverage

프로젝트 루트 디렉토리에 `settings.json` 파일을 생성하고, 다음과 같이 작성한다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

다 설정했다면, 터미널에서 build 명령어를 입력하여 프로젝트가 잘 빌드되는지 확인한다.

$ npm run build

빌드가 성공적으로 됐다면, success라는 메세지가 뜰 것이다.

- 끝 -

LIST