[React]Typescript 와 함께 사용하는 React + tailwindCSS 초기세팅하기

✨ React + Typescript

Create React App(CRA)와 Typescript 함께 사용하기

npx create-react-app <프로젝트명> --template typescript

Javascript와 함께 사용하는 react는 npx create-react-app <프로젝트명> 으로 설치하면 된다.

--template을 작성해주는 것을 매번 깜빡한다.. 주의하자!

// yarn을 이용한 typescript 추가 방법 
yarn add --dev typescript

// npm을 이용한 typescript 추가 방법
npm install --save-dev typescript

---

✨ TailwindCSS

tailwindCSS 설치하기

• 필요한 package 설치 , devDependencies로 확인가능

  yarn add -D tailwindcss postcss autoprefixer
  

• tailwindcss config 파일 생성 / 초기화

  yarn tailwind init -p

  

• tailwind.config.js파일 설정

  module.exports = {
    content: [
    	"./src/**/*.{js,jsx,ts,tsx}",  
      // src 하위 파일 중 확장자가 .js,.jsx,.ts,.tsx인 파일을 대상으로 한다는 의미 
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

CSS에 tailwindCSS 적용하기

• src/index.css 에 작성해줌으로써 tailwindcss를 레이어해준다.
• index.js에서 index.css를 import 하도록한다.
  (index.css 를 Import하는 component에서 tailwind를 사용할 수 있음)

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

---

Execute (실행)

• yarn start 로 리액트 서버 실행 가능

---

🚨 갑자기 만난 에러 로그!

스택오버플로우- 에러관련 글 에서 해결방법을 보았지만 잘 이해가 되지 않았다.

다행히 쉽게 따라할 수 있게 작성해주신 글을 발견했고 그대로 따라해보니 해결이 되었다! velog - 해결 참고 글

❓ 에러의 원인이 뭘까

그저 따라함으로써 해결은 했으나 이전에는 설치만해도 잘 로컬서버가 실행이 됐는데 갑자기 나타났는지 궁금했다.

원인은 TypeScript 컴파일러가 Jest의 타입을 인식하지 못해서 발생하는 것이라고 한다.

💡 해결방법

위의 참고한 velog글에서 설명해준 것 처럼 ts.config.js에

"types": ["node", "jest", "@testing-library/jest-dom"],

를 추가해주어 jest 패키지/ 파일을 인식할 수 있도록 해주고,

yarn remove @testing-library/jest-dom
yarn add -D @types/testing-library__jest-dom

@testing-library/jest-dom을 제거하고 @types/testing-library__jest-dom를 devDependencies에 추가해줌으로써 해결할 수 있었다.