리액트 - 개발환경설정

• react-app 프로젝트 폴더 생성후 열기
• nodejs v18이상, 터미널(vscode 하단에서 위로 드래그) node -v로 확인
• 크롬익스텐션: react devtools, ES7+ React/Redux/React-Native/JS snippets 설치
• npm create vite@latest ./ 현재폴더에 템플릿 세팅
• Select a framework: React, Select a variant: JavaScript
• npm i - package.json의 의존성 패키지 설치
• npm run dev - 로컬웹서버실행후 ctrl + 로컬주소클릭
• index.css가 공통 css이므로 공통 css 복사, App.css 내용 삭제
• components 하단 > General > Highlight updates when components render 체크
• (렌더링되는 컴포넌트 하이라이트로 보기)
• ctrl + alt + R 리액트 스니펫 명령어 보기: rfc(리액트함수컴포넌트)   

vite번들러에서 절대경로 설정

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@", replacement: "/src" },
    ],
  },
});

타입스크립트 아닌경우 생략

// tsconfig.json
{
  "compilerOptions": {
    ...{options},
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src", "**/*.ts", "**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}