Vite 프로젝트 세팅

 

 

실행 테스트

npm run dev

 

린트 설정

 

---

위 프로젝트 세팅은 node의 vite 라이브러리를 사용해서 시작하는 예시이다.

node_modules

프로젝트의 모든 의존성 모듈이 저장되는 폴더.

package.json 파일에 정의된 패키지들이 여기에 설치된다.

public

정적 자원을 보관하는 폴더.

여기에는 웹팩 빌드 없이 바로 제공될 수 있는 파일들이 위치한다.

ex. 이미지, 아이콘, 폰트 파일 등.

 

웹팩(Webpack)

최신 JavaScript 애플리케이션을 위한 모듈 번들러.

모듈 번들러는 여러 개의 파일(예: JavaScript, CSS, 이미지 파일 등)을 하나의 파일이나 몇 개의 파일로 병합하여

브라우저가 효율적으로 로드할 수 있도록 한다.

---

src 폴더
src: 소스 코드가 위치하는 폴더. 애플리케이션의 주요 로직과 컴포넌트를 관리.

assets

이미지, 폰트, 기타 정적 파일을 보관하는 폴더. CSS 파일을 여기에 넣을 수도 있다.

App.jsx

애플리케이션의 메인 컴포넌트를 정의하는 파일. React 컴포넌트를 사용하여 애플리케이션의 구조와 동작을 정의한다.

index.css

전체 애플리케이션에 적용될 CSS 스타일을 정의하는 파일.

main.jsx:

ReactDOM을 사용하여 App 컴포넌트를 HTML 문서의 루트 요소에 마운트하는 파일. 애플리케이션의 진입점.

---

설정 및 메타 데이터 파일

.eslintrc.cjs

ESLint 설정 파일. 코드의 품질과 일관성을 유지하기 위해 사용.

.gitignore:

Git이 버전 관리에서 제외할 파일이나 폴더를 지정하는 파일.

ex: node_modules 폴더나 빌드 결과물 같은 파일들.

index.html: 

애플리케이션의 기본 HTML 파일. Vite는 이 파일을 기반으로 애플리케이션을 빌드.

package-lock.json:

프로젝트에 설치된 정확한 패키지 버전을 기록하는 파일. 이 파일은 동일한 의존성 트리를 재생성하는 데 도움이 된다.

package.json:

프로젝트의 메타데이터를 포함하는 파일. 여기에는 프로젝트 이름, 버전, 의존성, 스크립트 등이 정의되어 있다.

(npm i를 통해 의존성을 가지는 파일들을 설치해주자)

README.md:

프로젝트에 대한 설명을 포함하는 마크다운 파일. 프로젝트 사용법, 설치 방법, 개발 가이드 등을 작성할 수 있다.

vite.config.js:

Vite의 설정 파일. 빌드 및 개발 서버 설정을 포함할 수 있다.