[Vanilla JS 문서편집기 설명 및 개선] 1. vite 번들러 추가

목적 

기존 프로젝트에선 번들러를 따로 사용하지 않고 vscode의 Live Server를 이용해 페이지가 잘 동작하는지 확인했습니다. 하지만 프로젝트를 다시 다듬게 되었을 때 제가 여러가지를 놓치고 있다는 생각이 들었고, 해당 부분을 vite 번들러를 이용한다면 많은 부분을 해소할 수 있다고 생각했기 때문에 이번 기회에 추가해봤습니다. 

 

제가 얻을 수 있는 장점은 다음과 같습니다.

1. 오류 사전 탐지 : 빌드했을 때 오류가 발생하는지
2. 코드 최적화
3. 의존성 관리 용이
4. CSS, 이미지, 폰트 등 자산 관리
5. 호환성 : babel 등 트랜스파일러를 이용해 최신 JS 문법을 구형 브라우저에서도 동작할 수 있도록 변환 

추후 github action을 이용해 main으로 merge시 build에 오류가 존재하지 않을 때만 merge가 가능하도록 추가할 예정입니다.  

추가한 방법

1. 프로젝트 루트로 이동해 vite 설치

npm init vite@latest

설치 과정에서 프로젝트 이름을 지정하고 템플릿으로 "vanilla"를 선택합니다. 그러면 기본적인 Vite 설정 파일과 구조가 생성됩니다.

 

2. 프로젝트 구조 변경

기존 프로젝트 파일을 Vite의 구조에 맞게 이동시킵니다. 일반적으로 Vite 프로젝트의 기본 구조는 다음과 같습니다:

/your-existing-project
├── /public
│   └── index.html
├── /src
│   └── main.js (혹은 기존 JavaScript 파일)
├── package.json
└── vite.config.js

 

이 작업을 완료한 후 개발 서버에서의  실행, 프로덕션 빌드가 정상 작동하는지 확인해주시면 됩니다.