View Navigation 과제 셋팅

Vite + React + TS

1. 의존성 설치

// vite 
npm create vite@latest
// npm
npm i
// 경로 별칭
npm i -D vite-tsconfig-paths
npm i -D @types/node
// prettier
npm i -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks
// styled css
npm i --save @emotion/react
npm i --save @emotion/styled
// reset css
npm i styled-reset
// react animation
npm install --save react-transition-group
npm install --save @types/react-transition-group

1. tsconfig.json

// tsconfig.json "compilerOptions"에 추가
"compilerOptions": {
    "jsxImportSource": "@emotion/react",
    "types": ["node"],
    "paths": {
      "~/*": ["./src/*"]
    },

1. vite.config.ts

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
    }),
  ],
  resolve: {
    alias: [
      {
        find: '~',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
});