frontend

ts react vite mui 보일러플레이트 만들기

2023. 7. 10. 01:33
목차
  1. svgr을 깔아주어야한다.
  2. eslint ignore
  3. 절대 경로 설정

https://github.com/XionWCFM/vite-mui

 

GitHub - XionWCFM/vite-mui: vite-mui

vite-mui. Contribute to XionWCFM/vite-mui development by creating an account on GitHub.

github.com

 

next.js 보일러플레이트를 만든것에 이어

cra 환경에서 사용할 보일러 플레이트를 만들어보았습니다.

mui, emotion을 이용하는 것이 코어 컨셉입니다.

 

그 외에 zod, react-hook-form, msw, react-query , react-router-dom 등

프로젝트에 일반적으로 필요한 라이브러리들을 install 해두었고

 

lint-staged , husky , svgr , path 편의성 설정 또한 해두었습니다.

역시 문제가 되었던 부분들은 eslint 쪽일 것 같은데요

그 부분에 대해서만 간단하게 정리하도록 하겠습니다.


svgr을 깔아주어야한다.

svg파일을 마치 리액트 컴포넌트처럼 사용하기 위해서는 조금 해주어야할 세팅이있습니다.

 

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths(), svgr()],
});

바로 vite-plugin-svgr인데요

npm i -D vite-plugin-svgr

vite.config.ts 파일에서 import 하여 plugins 배열에 추가시켜주면 되겠습니다.

 

타입스크립트에서 사용하기 위해서는 약간의 추가설정이 더 필요합니다.

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement>
  >;
  const src: string;
  export default src;
}

src/custom.d.ts 파일을 생성해주고 안에 이러한 내용물을 넣어줍니다.

import '@/App.css';
import { ReactComponent as ReactIcon } from '@/assets/react.svg';
import React from 'react';
function App() {
  return (
    <div>
      <React.Suspense fallback={<div>로딩중입니다.</div>}>
        <div>암</div>
        <ReactIcon />
      </React.Suspense>
    </div>
  );
}

export default App;

그 이후 이렇게 사용해주면 되겠습니다.


eslint ignore

/* eslint-env node */
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:react-hooks/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: true,
    tsconfigRootDir: __dirname,
  },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    '@typescript-eslint/no-non-null-assertion': 'off',
  },
  ignorePatterns: ['.eslintrc.cjs', "vite.config.ts"],
}

설정 파일들은 건드리기는 애매한데 eslint가 에러를 내뱉곤합니다.

그런 경우 eslintrc.cjs 파일의 ignorePatterns 옵션을 사용하면 됩니다.


절대 경로 설정

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths(), svgr()],
});

vite에서 절대 경로를 사용해주기 위해서 plugin을 설치해야합니다.

npm i -D vite-tsconfig-paths

위 플러그인을 설치하고 마찬가지로 vite.config.ts 파일에서 사용해줍니다.

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src", ".eslintrc.cjs"],
  "exclude": ["node_modules", ".husky", "public"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

이후 tsconfig.ts 파일에서 컴파일러 옵션부분에 paths를 취향대로 넣어줍니다.

저는 @로 import하는 것이 편하기 때문에 위와같이 설정해주었습니다.

반응형
저작자표시 비영리 (새창열림)

'frontend' 카테고리의 다른 글

Parsing error: ESLint was configured to run on  (0) 2023.07.13
nextjs 13 typescript 환경에서 eslint airbnb 에 husky, gitmoji, lint-staged까지?  (0) 2023.07.11
CloudFlare를 이용해 Next.js 프로젝트 Static하게 배포하기  (2) 2023.06.27
next.js를 활용해 자체 블로그 만들기  (4) 2023.06.25
Critical Rendering Path 보기  (1) 2023.06.11
  1. svgr을 깔아주어야한다.
  2. eslint ignore
  3. 절대 경로 설정
'frontend' 카테고리의 다른 글
  • Parsing error: ESLint was configured to run on
  • nextjs 13 typescript 환경에서 eslint airbnb 에 husky, gitmoji, lint-staged까지?
  • CloudFlare를 이용해 Next.js 프로젝트 Static하게 배포하기
  • next.js를 활용해 자체 블로그 만들기
냠냠맨
냠냠맨
프론트엔드 개발 전반을 다루는 기술 블로그입니다.
냠냠맨
React와 TypeScript를 좋아하는 개발자
냠냠맨
전체
오늘
어제
  • all category (434)
    • CMC (0)
    • best (11)
    • 년간회고 (1)
    • cheetsheet (15)
    • 프로젝트 회고 (3)
    • 서평 (3)
    • SEO Study (1)
    • 프로젝트 진행기 (10)
    • testcode (9)
    • yarnberry (7)
    • css (21)
    • typescript (15)
    • redux (7)
    • react (43)
    • Next.js (9)
    • Nestjs (3)
    • javascript (44)
    • programmers (67)
    • leetcode (41)
    • frontend (41)
    • backjoon (1)
    • Next.js Beta Docs 번역 (12)
    • TIL (15)
      • html (3)
    • Network (12)
      • 간단 정리 시리즈 (2)
      • 질답 준비 (0)
    • 자료구조와 알고리즘 (2)
    • CS (4)
      • OS (1)
    • 취업준비 (2)
    • zoom websocket (2)
    • talk (6)
    • 면접대비 (1)
    • 코드스테이츠 프론트 (5)
    • 간헐적 회고 (18)

블로그 메뉴

  • leetcode
  • programmers
  • javascript
  • html
  • css

공지사항

인기 글

태그

  • 테오의스프린트
  • 개발자
  • border말풍선
  • 말풍선
  • 프론트엔드
  • 주니어개발자
  • teosprint
  • CSS
  • frontend
  • LeetCode
  • 테오의스프린트17기
  • 코드스테이츠 #프론트엔드
  • 개발
  • JavaScript

최근 댓글

최근 글

hELLO · Designed By 정상우.
냠냠맨
ts react vite mui 보일러플레이트 만들기
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.