[React + TypeScript + TailwindCSS] 개발 환경 구축하기

이번에 새로운 프로젝트를 진행하면서,

개발 환경 구축을 맡게 되었다.

 

앞서 진행한 프로젝트들에서도 초기 세팅을 맡았긴 했지만

TypeScript와 TailwindCSS로 개발하는 것은 처음이기 때문에

이번 기회에 차근차근 정리해보고자 한다.

 

---

 

1. Vite로 프로젝트 생성

yarn create vite

√ Project name: ... (프로젝트 명)
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC

 

2. 프로젝트 폴더 터미널에서 install

yarn

 

3. eslint 설정

yarn add -D eslint

 

개발 의존성을 위해 -D를 붙여 설치한다.

 

이후 eslint를 typeScript에 적용하기 위해 추가적인 플러그인을 설치해준다.

yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

 

4. prettier 설치

yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

 

 

이후 .prettierrc 파일을 생성하고 코드 컨벤션을 지정해준다.

{
  "printWidth": 100,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "arrowParens": "always"
}

그리고 package.json 파일에 아래 코드를 추가해준다.

"format": "prettier --write --cache ."

 

5. TailwindCSS 적용하기

먼저 TailwindCSS를 설치해준다.

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

 

함께 설치한 플러그인은 다음과 같다.

• PostCSS: CSS를 변환하거나 확장할 수 있는 플러그인 기반의 CSS 처리 도구
• Autoprefixer: CSS에 브라우저 호환성을 위한 벤더 프리픽스를 자동으로 추가하는 PostCSS 플러그인

6. TailwindCSS 초기화

npx tailwind init -p

 

 

실행하면 tailwind.config.js 파일이 생성되는데,

나는 프로젝트에 필요한 스타일을 저장했다.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        blue: {
          DEFAULT: "#2196F3",
          ...
        },
        ...
      },
      spacing: {
        header: "129px",
        ...
      },
      maxWidth: {
        content: "394px",
      },
      borderWidth: {
        3: "3px",
        ...
      },
      fontSize: {
        "9px": "9px",
        ...
      },
    },
  },
  plugins: [],
};

 

7. 전역 스타일 설정

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

@layer base {
  * {
    @apply box-border font-[Pretendard-Regular];
  }
  
  ...
}

이렇게 새로운 프로젝트 개발 환경 구축을 완료했다.

사실 수정 사항이 많지만, 디자이너님 피드백과 함께 스타일을 수정할 예정이다.