Intro

커스텀 컴포넌트 만드는 게 너무 약해서 별도로 프로젝트를 파서 컴포넌트 1개씩 연습해 보려 한다.
프로젝트 설정 구조부터 잡아보았다. (처음이라 오래 걸렸다..)

ui는 tailwindcss (나중에 내 사이트에 적용할 거라서)
vite (이게 속도가 빠르더라고) 기반으로 간다.

기본은 아래를 참고했다. 구글에 react vite typescript tailwind라고 검색하니 나옴.
참고 https://velog.io/@96_inggu/aa-6or34asb

절대 경로 지정하기

상대 경로는 ../ 식인데 이러면 폴더나 파일 위치를 바꾸는 순간 와장창이다;;
그래서 절대 경로를 사용하는 것이 좋은데 이걸 보통 @폴더명 식으로 alias를 정하고 쓴다.
2군데를 바꿔야 한다.

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@", replacement: path.resolve(__dirname, "./src") },
      {
        find: "@components",
        replacement: path.resolve(__dirname, "./src/components"),
      },
      {
        find: "@type",
        replacement: path.resolve(__dirname, "./src/type"),
      },
      {
        find: "@views",
        replacement: path.resolve(__dirname, "./src/views"),
      },
    ],
  },
});

처음에 import path에서 에러가 났다. __dirname도 인식을 못했고.

yarn add @types/node

yarn의 경우 이러면 설치되면서 에러가 해결된다. npm도 npm i @types/node 이런 식이면 설치됨.

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@*": ["./src/*"]
    },
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
      
      ... 생략 

저 paths 부분에 src를 잘 잡아야 위의 alias가 제대로 동작하더라.
나의 경우 저 위 alias만 등록하고 왜 import 에러가 나나 당황했다.

특정 파일에서 import/order 무시하기

플젝하면서 봤는데 import도 order(순서)를 정할 수 있다.
근데 이게 모든 파일에 적용되면 import가 없는 설정 파일은 왜 import/order를 찾을 수 없냐고 에러가 난다;;
특정 파일을 ignore할 필요가 있다고 생각해서 검색했더니 아래 설정이 있다.

.eslintrc

  },
  "ignorePatterns": ["tailwind.config.js", "vite.config.ts"],
} //최상단 중괄호다.

최상단에 ignorePatterns 속성을 추가하고 배열로 ignore하길 원하는 파일을 추가한다.

Issue

node 버전이 낮아서 프로젝트 실행 명령어가 안 먹는다.

해결 : npx install node

tailwindcss 적용 안되는 거 같으면 index.css에 @tailwind 관련 3줄 추가.
나의 경우 yarn add sass하고 index.scss에 추가.

References

https://shape-coding.tistory.com/entry/Vite-TypeScript-Vite-타입스크립트-환경에서-절대-경로-설정하기