Vue 실행하기

뷰 어플리케이션을 만드는 방법

CDN 사용

• HTML의 script 태그로 CDN에서 제공되는 뷰 라이브러리를 쉽게 추가할 수 있다

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

CDN(Content Delivery Network)

• 여러 노드를 가진 네트워크에 데이터를 저장하고 제공하는 시스템
• 서비스를 제공하는 시스템이 분산되어있어 요청과 가까운 곳의 CDN서버로 요청되어 빠르게 처리 가능(사용자 경험(UX) 증진)
• html의 script 태그를 추가하여 바로 어플리케이션을 개발 가능
• But, 의존성관리와 라이브러리를 직접 해야하는 단점이 존재

NPM 사용

• Node.js 패키지를 관리해주는 도구
• NPM 패키지를 설치해서 뷰 어플리케이션을 생성할 수 있다

NPM

• prompt를 사용하여 어플리케이션의 세부 설정을 직접 지정 가능
• 패키지 관리 도구(NPM)을 사용하여 패키지에대한 의존성 관리가 쉬움
• .vue 확장자의 파일로 어플리케이션을 만들어 유지 보수가 쉽고 큰 프로젝트에 적합함

NPM으로 프로젝트 생성

1. 폴더 생성

• 폴더를 생성하고 VScode로 폴더 열기

  mkdir 폴더명
  

2. 프로젝트 생성

• npm create명령어로 새프로젝트를 구성(scaffolding)

  # latest를 사용해서 최신 버전으로 어플리케이션 설정
  npm cretae vue@latest
  

  

• y를 입력하여 동의하고, 프로젝트 명을 입력
  • 프로젝트 명에 마침표만 입력한경우 패키지명을 입력 가능

• 이후 프롬프트에서 원하는 설정을 스페이스바로 선택한다

  프롬프트	설명
  TypeScript	뷰 어플리케이션에 타입스크립트 설정 추가
  JSX Support	뷰의 기본템플릿에 리엑트의 JSX를 추가
  Router	SPA를 만들기위해 Vue Router를 추가
  Pinia	Vue3의 상태관리 패키지 추가
  Vitest	유닛테스트를 위한 Vitest 추가
  End-to-End Testing	종단간 테스트를 위한 솔류션을 뷰 어플리케이션에 추가
  ESLint	코드 품질을 위해 ESLint 설정을 추가
  Prettier	코드 스타일 통일을 위한 자동 포맷터 설정 추가

3. 패키지 설치 및 실행

• 생성된 프로젝트의 경로로 이동한다

  cd 프로젝트 명
  

• 프로젝트 경로의 package.json의 script 실행 명령어를 입력하면 오류가 발생한다

  npm run dev
  
  > vue-project@0.0.0 dev
  > vite
  
  # 명령어를 실행한 위치에 package.json이 없는경우 발생하는 오류
  npm ERR! Missing script: "dev"
  npm ERR! To see a list of scripts, run:
  npm ERR! npm run
  ...
  
  # 패키지를 설치하지 않는 경우 발생하는 오류
  failed to load config from /Users/sj/Desktop/firstVue/vue-project/vite.config.js
  error when starting dev server:
  Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@vitejs/plugin-vue' imported from /Users/sj/Desktop/firstVue/vue-project/vite.config.js.timestamp-1749393790740-028ecfef35876.mjs
  

• Vite의 Vue 플러그인 패키지가 설치되어 있지 않아서 발생한오류로 누락된 플러그인을 설치해야한다

  # package.json 파일을 참조하여 패키지를 설치하는 명령어
  npm install
  

• 위의 명령어를 입력하면 node_modules 폴더가 생성됨

• 다시 script의 실행 명령어를 입력하면 서버가 실행된다

  # 뷰 어플리케이션 실행 명령어
  npm run dev
  

• 서버 실행 성공시 아래의 화면과 같이 뜬다

node_modules

• NPM으로 관리되는 Node.js의 패키지는 node_modules 폴더 설치되고 관리된다
• 패키지 정보는 package.json에 기록되며, npm install 명령어로 언제든지 설치할 수 있다
• npm i 명령어로 언제든 설치가능하여 Git으로 관리할 필요하가 없다
• 용량이 커서 Git에 올리면 용량초과..

---

🛠️ 용어 정리

• 의존성 관리
  • 프로젝트가 제대로 동작하기위해 어떤 라이브러리를 사용하고, 어떻게 관리할지 유지 보수하는 과정
  • 즉, 어플리케이션에서 사용한 라이브러리의 버전을 관리하는것

구분	설명
dependencies	앱이 실행되는 데 꼭 필요한 라이브러리 (예: Vue, Axios 등)
devDependencies	개발 도중만 필요한 도구 (예: ESLint, Prettier, Vitest 등)
peerDependencies	라이브러리 개발 시, 외부에서 설치해야 할 의존성 명시 (예: plugin 개발 시)