[React] React 환경 구성(React 설치 / Vite 설치 & 템플릿 설정)

📌 React 설치

 

✅ CDN 방식

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" crossorigin></script>

 

 

✅ ESM 방식

import React from 'https://esm.sh/react';
import ReactDOM from 'https://esm.sh/react-dom';

 

 

---

📌 React && Vite 설치

• 확장자
  
  • Web 표준에서는 확장자 필수(.js, .jsx 등)
  • Vite는 확장자 필요 X

 

📍 Vite 오토 스캐폴딩

pnpm create vite@버전 <생성할 폴더명>
pnpm create vite@latest --template react


- 타입 스크립트를 사용하는 템플릿을 해당 폴더에 만드는 명령어
pnpm create vite@latest (learning-react) -t reat-ts

 

 

 

✨ 배포할 땐 배포용 모듈을, 개발할 땐 개발용 모듈을 사용해야 함

 

 

 

✨ react-dom을 client에서 꺼내서 사용하는 이유

import { createRoot } from "react-dom/client";

 

👉 렌더링을 어디서 하느냐에 따라 달라짐

 

• 서버가 없으면 ❌(백엔드 X) ➡ react-dom/client
  (웹 브라우저에서(클라이언트가 볼 화면) 보여주니까 클라이언트 렌더링)
• 서버가 있으면 ⭕ ➡ react-dom/server

 

 

• CSR (클라이언트 사이드 렌더링) 
  = 서버에서 JSX 파일을 받아서 리액트가 해석한 걸 브라우저가 렌더링 해줌
  
• SSR (서버 사이드 렌더링)
  = 서버에서 JSX를 해석을 다 해서 보내주는 걸 렌더링 함

 

 

---

 

📍 Vite 커스텀 스캐폴딩

cd vite-auto-scaffold
pnpm install
pnpm run dev

 

 

 

✅ Vite 패키지 설치

• package.json 파일이 없으면 설치 ❌
  - package.json에 빈 객체라도 만들어야 설치됨

pnpm add -D vite

 

 

 

✅  Vite 명령어 인터페이스

• package.json

{
  "scripts": {
    "dev": "vite --host", // 개발 서버 실행
    "build": "vite build", // 배포용 빌드 작업 수행
    "lint": "eslint \"./src/**\" --report-unused-disable-directives --ignore-pattern .gitignore",
    "preview": "vite preview" // 로컬에서 배포용 빌드에 대한 프리뷰 서버를 실행
  }
}

 

 

 

✅ React 패키지 설치

pnpm add react react-dom

 

 

 

✅ React, Node 타입 선언 패키지 설치

pnpm add @types/react @types/react-dom @types/node -D

 

 

 

✅ Vite 플러그인

• import React 안하고 jsx를 바로 사용하는 플러그인
  1️⃣ 기존의 React.createElement() 대신 JSX라는 새로운 api가 등장
  2️⃣ JSX는 import React를 하지 않아도 됨
  3️⃣ @vitejs/plugin-react를 설치하고 vite.config.js에서 설정하면 JSX를 사용하는 모드로 변경해주기 때문에  React를 import 해서 사용할 필요 X

pnpm add @vitejs/plugin-react -D

 

 

 

✅ Vite 구성 파일

• vite.config.js 생성

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

const viteConfig = defineConfig({
  base: '/',
  server: {
    host: 'localhost',
    port: 3000,
    open: false,
  },
  plugins: [react()],
});

export default viteConfig;

 

 

 

✅ ESLint 초기 구성

pnpm create @eslint/config@latest

 

 

 

✅ ESLint 명령어 인터페이스

pnpm eslint ./src --report-unused-disable-directives --ignore-pattern .gitignore

 

• package.json

{
  "type": "module",
  "private": true,
  "name": "vite-custom-template-react",
  "version": "0.0.1",
  "description": "Vite 커스텀 템필릇을 사용해 React 프로젝트 오토 스캐폴딩",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint \"./src/**\" --report-unused-disable-directives --ignore-pattern .gitignore"
  },
  "devDependencies": {
    "@eslint/js": "^9.8.0",
    "@types/node": "^22.0.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "9.x",
    "eslint-plugin-react": "^7.35.0",
    "globals": "^15.8.0",
    "vite": "5.3.5"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

 

 

 

✅ ESLint react-hooks & react-refresh 플러그인

pnpm add eslint-plugin-react-hooks eslint-plugin-react-refresh -D

 

 

 

✅ ESLint 구성 파일

• eslint.config.js 생성

import globals from 'globals';
import pluginJs from '@eslint/js';
import pluginReact from 'eslint-plugin-react';
import pluginReactHooks from 'eslint-plugin-react-hooks';
import pluginReactRefresh from 'eslint-plugin-react-refresh';

export default [
  { files: ['**/*.{js,mjs,cjs,jsx}'] },
  {
    plugins: {
      react: pluginReact,
      'react-hooks': pluginReactHooks,
      'react-refresh': pluginReactRefresh,
    },
  },
  {
    settings: {
      react: {
        version: 'detect',
      },
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
  },
  pluginJs.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    rules: {
      ...pluginReactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': 'warn',
      'react/react-in-jsx-scope': 'off',
      'react/prop-types': 'warn',
    },
  },
];

 

 

 

---

📍 Vite 커스텀 템플릿 스캐폴딩

 

1️⃣ 템플릿 클론

degit <GitHub 저장소의 경로(유저명/템플릿명)> <새로 생성할 프로젝트 디렉토리명>
degit kwonboryong/vite-react kbr-vite-react

 

* degit이 설치되어 있어야 함

npm install -g degit

 

 

 

2️⃣ 프로젝트 디렉토리로 이동 후 종속성 설치

cd <새로 생성한 프로젝트 디렉토리명>
cd kbr-vite-react

pnpm i
pnpm dev
pnpm build

 

 

 

---

 

Vite

 

@vitejs/plugin-react

 

@vitejs/plugin-react

 

eslint-plugin-react-hooks & "Flat Config" (ESLint 9) · Issue #28313 · facebook/react

 

 

GitHub - ArnaudBarre/eslint-plugin-react-refresh: Validate that your components can safely be updated with fast refresh