이번에는 Vite를 이용해서 React App을 생성하고, 기본으로 제공되는 코드를 정리한 뒤 ESLint 설정까지 진행해보겠습니다.

처음 React 프로젝트를 만들 때는 직접 Webpack 등의 개발 환경을 구성해야 하는데, 입문자에게는 다소 복잡할 수 있습니다.

따라서 이번에는 기본적인 React 개발 환경이 구성된 프로젝트를 쉽게 생성할 수 있는 Vite를 사용합니다.

1. React App 만들기

React 프로젝트를 직접 처음부터 구성하려면 크게 다음과 같은 과정이 필요합니다.

Node.js 패키지 생성
React 라이브러리 설치
기타 개발 도구 설치 및 설정

하지만 이러한 과정을 처음부터 직접 설정하는 것은 입문자에게 다소 까다로울 수 있습니다.

그래서 Vite를 이용하면 기본 설정이 적용된 React 프로젝트를 빠르게 생성할 수 있습니다.

Vite란?

Vite는 프론트엔드 프로젝트를 빠르게 생성하고 개발 서버를 실행할 수 있도록 도와주는 개발 도구입니다.

React, Vue 등의 프론트엔드 프레임워크를 지원하며, 기본적인 프로젝트 설정이 적용된 상태로 프로젝트를 생성할 수 있습니다.

따라서 React를 처음 공부할 때 개발 환경을 직접 구성하는 대신 사용하기 좋습니다.

2. 패키지 설정과 package.json

Vite로 React 프로젝트를 생성하기 전에 저번 포스트에서 다뤘던 Node.js에서 사용하는 패키지와 package.json에 대해 간단하게 다시 알아보겠습니다.

패키지란?

패키지(Package)는 Node.js에서 사용하는 프로그램 또는 기능의 단위라고 생각하면 됩니다.

Node.js에서는 npm을 이용해 패키지를 생성하고 관리할 수 있습니다.

npm init으로 패키지 생성하기

일반적인 Node.js 프로젝트에서는 다음 명령어를 이용해 패키지를 생성할 수 있습니다.

npm init

명령어를 실행하면 패키지 이름, 버전 등의 정보를 입력할 수 있습니다.

패키지 생성이 완료되면 package.json이라는 설정 파일이 생성됩니다.

package.json을 열어보면 패키지를 생성할 때 설정한 기본적인 내용들이 들어 있습니다.

{
  "name": "section03",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

package.json은 프로젝트의 여러 정보를 관리하는 설정 파일입니다.

대표적으로 다음과 같은 정보를 확인할 수 있습니다.

프로젝트 이름
버전
설명
작성자
실행 파일
실행 명령어
사용하는 패키지
의존성 정보

JavaScript 파일 실행하기

이 상태에서 새로운 JavaScript 파일을 만들고 Node.js로 실행할 수 있습니다.

예를 들어 같은 폴더 내에 index.js 파일을 생성하고 다음과 같은 내용을 입력합니다.

console.log('안녕 Node.js')

이제 Node.js 명령어를 이용해 index.js를 실행할 수 있습니다.

node index.js

실행하면 다음과 같이 출력됩니다.

안녕 Node.js

package.json의 scripts를 이용해 실행하기

JavaScript 파일은 다음과 같이 직접 실행할 수 있습니다.

node index.js

하지만 package.json의 scripts에 명령어를 등록하면 npm을 통해 더 쉽게 실행할 수 있습니다.

예를 들어 다음과 같이 start 명령어를 추가합니다.

{
  "name": "section03",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  }
}

이제 원래 직접 입력했던 다음 명령어 대신,

node index.js

다음과 같이 실행할 수 있습니다.

npm run start

즉, package.json의 scripts에 명령어를 등록하면 자주 사용하는 명령어에 이름을 붙여 npm run 명령어이름 형태로 실행할 수 있습니다.

이 개념은 이후 Vite 프로젝트에서도 동일하게 사용됩니다.

예를 들어 Vite 프로젝트에서 다음과 같이 설정되어 있다면,

"scripts": {
  "dev": "vite"
}

다음 명령어를 실행했을 때,

npm run dev

실제로는 다음 명령어가 실행됩니다.

vite

Vite 프로젝트에서는 npm init을 따로 실행할 필요가 없습니다

여기서 중요한 점은 이번 React 프로젝트에서는 직접 npm init을 실행하지 않는다는 것입니다.

이번에는 다음 명령어를 이용해 Vite 프로젝트를 생성합니다.

npm create vite@latest

Vite가 React 프로젝트를 생성하면서 필요한 프로젝트 구조와 package.json 등의 기본 파일을 함께 생성해줍니다.

따라서 Vite로 프로젝트를 생성한 후에는 다시 다음 명령어를 실행할 필요가 없습니다.

npm init

앞에서 알아본 npm init은 Node.js 패키지와 package.json, scripts의 기본 개념을 이해하기 위한 예시라고 생각하면 됩니다.

3. Vite로 React 프로젝트 생성하기

터미널에서 다음 명령어를 입력합니다.

npm create vite@latest

명령어를 실행하면 프로젝트 이름과 사용할 프레임워크 등을 선택할 수 있습니다.

예를 들어 다음과 같이 선택합니다.

Project name: 프로젝트명
Select a framework: React
Select a variant: JavaScript

선택이 완료되면 React 프로젝트가 생성됩니다.

프로젝트 생성이 완료되면 해당 프로젝트 폴더로 이동합니다.

cd 프로젝트명

4. 생성된 프로젝트 구조 확인하기

Vite를 이용해 React 프로젝트를 생성하면 기본적인 프로젝트 구조가 함께 생성됩니다.

패키지 설치 전후에 따라 node_modules, package-lock.json 등의 파일은 다를 수 있지만 대표적인 구조는 다음과 같습니다.

프로젝트
├─ public
├─ src
├─ index.html
├─ package.json
├─ eslint.config.js
└─ vite.config.js

패키지를 설치한 후에는 다음 파일과 폴더도 생성됩니다.

프로젝트
├─ node_modules
├─ public
├─ src
├─ index.html
├─ package.json
├─ package-lock.json
├─ eslint.config.js
└─ vite.config.js

각 폴더와 파일의 역할을 간단하게 살펴보겠습니다.

public 폴더

public 폴더는 정적 자산을 저장하기 위한 폴더입니다.

예를 들어 다음과 같은 파일을 저장할 수 있습니다.

이미지 파일
폰트 파일
동영상 파일
기타 정적 자산

public 폴더에 있는 파일은 애플리케이션에서 정적 파일로 사용할 수 있습니다.

src 폴더

src 폴더는 실제 React 애플리케이션을 개발하면서 작성하는 소스 코드를 저장하는 공간입니다.

주로 다음과 같은 파일들이 위치합니다.

React 컴포넌트
JavaScript 코드
CSS 파일
기타 애플리케이션 소스 코드

예를 들면 다음과 같습니다.

src
├─ assets
├─ App.jsx
├─ App.css
├─ index.css
└─ main.jsx

주요 파일의 역할은 다음과 같습니다.

App.jsx: 기본 React 컴포넌트
main.jsx: React 애플리케이션의 시작점
App.css: App 컴포넌트 관련 스타일
index.css: 전역 스타일

5. Vite 프로젝트의 package.json 확인하기

프로젝트를 생성한 후 package.json 파일을 열어보면 프로젝트에 대한 여러 설정을 확인할 수 있습니다.

예를 들어 다음과 같은 항목들이 있습니다.

{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
}

package.json은 프로젝트의 다음과 같은 정보를 관리하는 파일입니다.

프로젝트 이름
버전
실행 명령어
사용 중인 패키지
의존성 정보

특히 dependencies, devDependencies 항목에서는 프로젝트에서 사용하는 라이브러리와 개발 도구를 확인할 수 있습니다.

다만 여기서 중요한 점이 있습니다.

package.json에는 필요한 패키지 정보가 기록되어 있지만, 실제 패키지가 아직 설치되지 않은 상태일 수 있습니다.

즉, 프로젝트 생성 후 패키지를 설치하는 과정이 필요합니다.

6. npm install로 패키지 설치하기

프로젝트를 생성한 직후 package.json을 열어보면 dependencies와 devDependencies에 여러 라이브러리가 설정되어 있는 것을 확인할 수 있습니다.

하지만 실제 라이브러리 파일은 아직 설치되지 않은 상태입니다.

따라서 다음 명령어를 입력해 package.json에 정의된 패키지들을 설치합니다.

npm install

또는 다음과 같이 짧게 입력할 수도 있습니다.

npm i

설치가 완료되면 다음과 같은 파일과 폴더가 생성됩니다.

node_modules
package-lock.json

node_modules

실제로 설치된 라이브러리와 패키지들이 저장되는 폴더입니다.

용량이 매우 커질 수 있기 때문에 일반적으로 Git에 직접 업로드하지 않습니다.

node_modules 폴더를 삭제하더라도 다음 명령어를 실행하면 다시 설치할 수 있습니다.

npm install

package-lock.json

설치된 패키지들의 정확한 버전과 의존성 정보를 기록하는 파일입니다.

package.json보다 실제 설치된 패키지의 구체적인 정보를 가지고 있습니다.

7. package.json의 scripts 확인하기

앞에서 npm init과 함께 scripts의 기본 개념을 알아봤습니다.

Vite로 생성한 React 프로젝트에서도 동일하게 package.json의 scripts를 이용해 여러 명령어를 실행합니다.

일반적으로 다음과 같은 명령어를 확인할 수 있습니다.

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint .",
  "preview": "vite preview"
}

각 명령어의 역할은 다음과 같습니다.

명령어설명

npm run dev	개발용 서버 실행
npm run build	배포용 파일 생성
npm run lint	ESLint를 이용해 코드 검사
npm run preview	빌드된 결과물을 로컬에서 미리 확인

dev

개발 중인 React 애플리케이션을 실행하는 명령어입니다.

npm run dev

실제로는 package.json에 정의된 다음 명령어가 실행됩니다.

"dev": "vite"

즉,

npm run dev

를 실행하면 vite 명령어가 실행되어 개발 서버가 시작됩니다.

개발 서버가 실행되면 터미널에는 보통 다음과 같이 접속 가능한 주소가 표시됩니다.

VITE vX.X.X  ready in XXX ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

표시된 Local 주소로 접속하면 실행 중인 React App을 확인할 수 있습니다.

개발 서버 실행 중 사용할 수 있는 단축키

Vite 개발 서버를 실행하면 다음과 같은 안내가 표시될 수 있습니다.

press h + enter to show help

터미널에서 h를 입력한 후 Enter를 누르면 사용할 수 있는 단축키를 확인할 수 있습니다.

대표적인 기능은 다음과 같습니다.

키기능

r	개발 서버 재시작
u	서버 주소 다시 표시
o	브라우저에서 애플리케이션 열기
c	콘솔 화면 비우기
q	개발 서버 종료

예를 들어 개발 서버 실행 중 o를 입력하면 브라우저에서 실행 중인 React 애플리케이션을 열 수 있습니다.

q를 입력하면 개발 서버가 종료됩니다.

build

build는 개발이 완료된 React 애플리케이션을 배포할 수 있도록 최적화된 파일로 생성하는 명령어입니다.

npm run build

package.json에서는 다음과 같이 정의되어 있습니다.

"build": "vite build"

빌드를 실행하면 일반적으로 프로젝트 내부에 dist 폴더가 생성됩니다.

프로젝트
├─ dist
├─ public
├─ src
├─ package.json
└─ ...

dist 폴더에는 실제 서버에 배포할 수 있도록 생성된 HTML, JavaScript, CSS 등의 파일이 저장됩니다.

정리하면 다음과 같습니다.

개발 중에는

npm run dev

개발이 완료된 후 배포용 파일을 생성할 때는

npm run build

를 사용합니다.

8. 기본으로 생성된 React 코드 정리하기

Vite로 React 프로젝트를 생성하면 처음에는 예제 코드가 상당히 많이 들어 있습니다.

React와 Vite의 로고, 카운터, Documentation 등의 예제 코드가 포함되어 있을 수 있습니다.

처음 React를 공부할 때는 이러한 코드가 오히려 복잡하게 느껴질 수 있기 때문에 필요한 부분만 남겨두도록 하겠습니다.

먼저 src/App.jsx를 확인합니다.

필요하지 않은 import 삭제

Vite 템플릿에 따라 기본적으로 다음과 같은 코드가 있을 수 있습니다.

import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'

이번 실습에서는 사용하지 않을 예정이므로 삭제합니다.

또한 현재는 State도 사용하지 않을 것이므로 다음 코드 역시 삭제합니다.

import { useState } from 'react'

그리고 State를 생성하는 다음 코드도 삭제합니다.

const [count, setCount] = useState(0)

기본 예제 화면 삭제

Vite가 생성해준 기본 화면에는 React 로고, Vite 로고, 카운터, Documentation 등의 예제 코드가 포함되어 있을 수 있습니다.

예를 들어 다음과 같은 코드입니다.

<section id="center">
  ...
</section>

<div className="ticks"></div>

<section id="next-steps">
  ...
</section>

이번 실습에서는 필요하지 않으므로 해당 예제 화면을 모두 삭제합니다.

결과적으로 App.jsx를 최대한 간단하게 만들어줍니다.

import './App.css'

function App() {
  return (
    <>
      <h1>안녕 리액트.</h1>
    </>
  )
}

export default App

이제 화면에는 다음과 같이 간단한 문구만 출력됩니다.

안녕 리액트.

9. CSS 파일 초기화하기

처음 Vite에서 생성되는 CSS에는 기본 예제 화면을 위한 스타일이 많이 들어 있습니다.

따라서 이번 실습에서는 다음 파일의 내용을 모두 삭제합니다.

src/App.css
src/index.css

앞으로 필요한 스타일은 직접 작성하면 됩니다.

10. main.jsx 확인하기

다음으로 src/main.jsx를 확인합니다.

main.jsx는 React 애플리케이션의 시작점 역할을 하는 파일입니다.

Vite에서 생성한 React 프로젝트에는 기본적으로 다음과 같이 React.StrictMode가 적용되어 있을 수 있습니다.

<React.StrictMode>
  <App />
</React.StrictMode>

이번 실습에서는 React의 기본 동작을 단순하게 확인하기 위해 StrictMode를 제거하고 진행하겠습니다.

수정 후에는 다음과 같이 작성할 수 있습니다.

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <App />
)

React.StrictMode란?

StrictMode는 개발 환경에서 React 코드를 작성할 때 잠재적인 문제를 발견할 수 있도록 도와주는 기능입니다.

개발 중 문제가 될 수 있는 코드를 검사하고 경고를 제공하는 역할을 합니다.

다만 실제 서비스에서 반드시 제거해야 하는 기능이라는 의미는 아닙니다.

이번 실습에서는 React의 기본 동작을 이해하는 것이 목적이므로 일단 제외하고 진행합니다.

11. ESLint 설치 및 설정

이제 코드 작성 시 실수를 줄이고 일정한 코딩 스타일을 유지하기 위해 ESLint를 확인해보겠습니다.

Vite로 생성한 프로젝트에는 ESLint 관련 설정이 기본적으로 포함되어 있을 수 있습니다.

또한 VS Code를 사용한다면 Extensions 탭에서 ESLint 확장 프로그램을 설치하면 코드 작성 중 문제를 더욱 쉽게 확인할 수 있습니다.

ESLint는 JavaScript와 JSX 코드에서 다음과 같은 문제를 찾아주는 도구입니다.

문법적인 문제
사용하지 않는 변수
일관되지 않은 코드 스타일
잠재적인 오류

12. .eslintrc.cjs 파일이 없는데?

예전 React 강의나 자료를 보면 다음과 같은 ESLint 설정 파일을 사용하는 경우가 있습니다.

.eslintrc.cjs

하지만 최근 ESLint에서는 설정 방식이 변경되면서 다음과 같은 파일을 사용하는 경우가 많습니다.

eslint.config.js

즉,

.eslintrc.cjs 파일이 없다고 해서 ESLint 설정이 잘못된 것은 아닙니다.

현재 생성된 프로젝트에 다음 파일이 있다면 해당 설정 방식을 사용하면 됩니다.

eslint.config.js

최근 ESLint에서는 Flat Config 방식이 사용됩니다.

따라서 강의나 자료에서 사용하는 파일 이름과 현재 프로젝트의 파일 이름이 다를 수 있습니다.

13. eslint.config.js 설정하기

예를 들어 다음과 같이 ESLint 규칙을 설정할 수 있습니다.

import js from '@eslint/js'
import globals from 'globals'

export default [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2020,
      sourceType: 'module',
      globals: globals.browser,
    },
    rules: {
      'semi': ['error', 'always'],
      'quotes': ['error', 'single'],
      'no-unused-vars': 'warn',
      'prefer-const': 'error',
    },
  },
]

각 규칙의 의미를 살펴보겠습니다.

semi

세미콜론 사용 여부를 검사합니다.

'semi': ['error', 'always']

세미콜론을 반드시 사용하도록 설정합니다.

quotes

문자열에 사용할 따옴표를 설정합니다.

'quotes': ['error', 'single']

문자열에 작은따옴표(')를 사용하도록 설정합니다.

no-unused-vars

사용하지 않는 변수가 있는지 검사합니다.

'no-unused-vars': 'warn'

사용하지 않는 변수가 있다면 경고를 표시합니다.

prefer-const

변경되지 않는 변수는 let 대신 const를 사용하도록 검사합니다.

'prefer-const': 'error'

14. React 프로젝트에서 ESLint 설정하기

React 프로젝트에서는 React 관련 ESLint 플러그인을 추가해서 사용할 수도 있습니다.

예를 들어 eslint-plugin-react를 설치할 수 있습니다.

npm install -D eslint-plugin-react

그리고 eslint.config.js에서 React 관련 설정을 추가할 수 있습니다.

import js from '@eslint/js'
import globals from 'globals'
import pluginReact from 'eslint-plugin-react'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,jsx}'],
    plugins: {
      js,
    },
    extends: ['js/recommended'],
    languageOptions: {
      globals: globals.browser,
    },
    rules: {
      'no-unused-vars': 'off',
    },
  },
  {
    ...pluginReact.configs.flat.recommended,
    rules: {
      'react/prop-types': 'off',
    },
  },
])

여기서 no-unused-vars를 off로 설정하면 사용하지 않는 변수에 대한 기본 규칙을 비활성화합니다.

또한 다음 설정은,

'react/prop-types': 'off'

React 컴포넌트의 Props에 대해 prop-types 검사를 요구하는 규칙을 비활성화하는 설정입니다.

여기서 중요한 점은 ESLint 버전이나 프로젝트 생성 방식에 따라 설정 파일의 형태와 설정 방법이 달라질 수 있다는 것입니다.

따라서 이 글에서는 eslint.config.js를 사용하고 있지만, 다른 프로젝트에서 .eslintrc.cjs를 사용하고 있다고 해서 반드시 설정 파일을 변경할 필요는 없습니다.

현재 프로젝트에서 사용하는 ESLint 버전과 설정 방식을 확인하는 것이 중요합니다.

15. npm init @eslint/config 명령어

ESLint 설정을 직접 만드는 것이 어렵다면 다음 명령어를 사용할 수도 있습니다.

npm init @eslint/config

명령어를 실행하면 여러 질문에 답하면서 ESLint 설정을 생성할 수 있습니다.

다만 ESLint 버전에 따라 생성되는 파일과 설정 방식이 달라질 수 있습니다.

예전에는 .eslintrc 계열 파일이 많이 사용되었지만, 최근에는 eslint.config.js와 같은 Flat Config 방식이 사용됩니다.

따라서 파일 이름이 강의나 자료와 다르더라도 현재 사용 중인 ESLint 버전에 맞는 설정 방식을 사용하는 것이 좋습니다.

마무리

이번 과정에서는 Vite를 이용해 React 프로젝트를 생성하고, 그 전에 알아두면 좋은 Node.js의 패키지와 package.json, scripts 개념까지 함께 살펴봤습니다.

이후 Vite 프로젝트의 구조를 확인하고, 패키지를 설치한 뒤 개발 서버를 실행했습니다.

또한 기본으로 생성된 예제 코드를 정리하고 React.StrictMode를 확인한 뒤 ESLint 설정 방식까지 살펴봤습니다.

전체 과정은 다음과 같습니다.

React 프로젝트를 구성하는 기본 과정 확인
Vite란 무엇인지 확인
Node.js 패키지와 package.json 이해
npm init으로 패키지 생성 방식 확인
Node.js로 JavaScript 파일 실행
package.json의 scripts를 이용해 명령어 실행
Vite로 React 프로젝트 생성
프로젝트 폴더로 이동
public, src 등 프로젝트 구조 확인
Vite 프로젝트의 package.json 확인
npm install을 이용해 패키지 설치
node_modules와 package-lock.json 확인
package.json의 scripts 확인
npm run dev로 개발 서버 실행
Vite 개발 서버 단축키 확인
npm run build로 배포용 파일 생성
Vite 기본 예제 코드 삭제
App.jsx를 간단하게 정리
App.css와 index.css 초기화
main.jsx와 React.StrictMode 확인
VS Code에서 ESLint 확장 프로그램 설치
.eslintrc.cjs와 eslint.config.js 차이 확인
eslint.config.js를 이용한 ESLint 설정
필요하다면 eslint-plugin-react 추가
npm init @eslint/config을 이용한 ESLint 설정 생성 방법 확인

특히 이번 과정에서 기억해야 할 부분은 package.json과 scripts의 역할입니다.

일반적인 Node.js 프로젝트에서는 다음과 같이 직접 파일을 실행할 수 있습니다.

node index.js

하지만 package.json의 scripts에 명령어를 등록하면,

"scripts": {
  "start": "node index.js"
}

다음과 같이 실행할 수 있습니다.

npm run start

Vite 프로젝트도 같은 방식입니다.

package.json에 다음과 같이 설정되어 있기 때문에,

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

개발 중에는 다음 명령어를 사용합니다.

npm run dev

개발이 완료된 후 배포용 파일을 생성할 때는 다음 명령어를 사용합니다.

npm run build

또한 Vite로 프로젝트를 생성한 경우에는 npm init을 따로 실행할 필요가 없습니다.

npm create vite@latest

명령어를 통해 프로젝트를 생성하면 필요한 기본 프로젝트 구조와 package.json 등이 함께 생성되기 때문입니다.

npm init은 Node.js 패키지와 package.json의 기본 개념을 이해하기 위한 별도의 예시로 알아두면 됩니다.

또한 package.json에 패키지 정보가 있다고 해서 실제 라이브러리가 모두 설치된 것은 아닐 수 있으므로, 프로젝트 생성 후에는 다음 명령어를 실행해 필요한 패키지를 설치합니다.

npm install

그리고 ESLint 역시 예전 자료와 현재 프로젝트의 설정 방식이 다를 수 있습니다.

예전에는 .eslintrc.cjs를 많이 사용했지만 최근에는 eslint.config.js를 사용하는 경우가 많으므로, 포스트와 파일 이름이 다르더라도 현재 프로젝트의 버전과 설정 방식을 확인하면서 진행하는 것이 중요합니다.

이제 React 개발 환경이 준비되었으니 다음 단계부터 React 컴포넌트와 JSX를 이용해 화면을 구성해보겠습니다. 🚀

저작자표시 비영리 변경금지 (새창열림)

[React] React App 만들기 + Vite 설정 및 ESLint 적용하기

1. React App 만들기

Vite란?

2. 패키지 설정과 package.json

패키지란?

npm init으로 패키지 생성하기

JavaScript 파일 실행하기

package.json의 scripts를 이용해 실행하기

Vite 프로젝트에서는 npm init을 따로 실행할 필요가 없습니다

3. Vite로 React 프로젝트 생성하기

4. 생성된 프로젝트 구조 확인하기

public 폴더

src 폴더

5. Vite 프로젝트의 package.json 확인하기

6. npm install로 패키지 설치하기

node_modules

package-lock.json

7. package.json의 scripts 확인하기

dev

개발 서버 실행 중 사용할 수 있는 단축키

build

8. 기본으로 생성된 React 코드 정리하기

필요하지 않은 import 삭제

기본 예제 화면 삭제

9. CSS 파일 초기화하기

10. main.jsx 확인하기

React.StrictMode란?

11. ESLint 설치 및 설정

12. .eslintrc.cjs 파일이 없는데?

13. eslint.config.js 설정하기

semi

quotes

no-unused-vars

prefer-const

14. React 프로젝트에서 ESLint 설정하기

15. npm init @eslint/config 명령어

마무리

티스토리툴바