개발 도구 (Development Tools)/Vue

#2. Vue 3 설치 및 설정

BiCute 2023. 5. 26. 08:00
반응형

 

Vue 개발 환경 세팅하기에도 비슷한 글을 작성한 적이있었는데 이때는 Vue CLI를 이용한 설치 방법을 설명하였었습니다.

 

하지만 현재는 Vue CLI가 Maintenance Mode에 진입하면서, Vue.js 공식 문서에서는 Vite를 기반으로 하는 create-vue를 사용하여 새로운 Vue.js 프로젝트를 생성할 것을 권장하고 있습니다.

 

이를 위해 Vue의 설치 와 설정 과정은 다음과 같은 단계를 따릅니다.

 

 

1. Node.js 설치: create-vue를 사용하려면 Node.js가 설치되어 있어야 합니다. Node.js를 설치하려면 공식 웹사이트(https://nodejs.org/)다운로드하여 설치합니다.

 

 

2. create-vue 설치: npm(Node.js 패키지 매니저)를 사용하여 create-vue를 설치합니다. 터미널 또는 명령 프롬프트에서 다음 명령어를 실행합니다.

npm init vue@latest

 

 

3. 위 명령어를 실행하면 create-vue가 프로젝트를 생성하기 위해 몇 가지 옵션을 묻게 됩니다. 예를 들어, 프로젝트에 어떤 라이브러리를 설치할 것인지 묻는 경우가 있습니다.

 

기능 선택의 예:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...

Done.
  • Project name: 이 곳에서는 프로젝트 이름을 지정합니다.
  • TypeScript 추가 여부: TypeScript는 JavaScript의 상위 집합 언어로, 정적 타입을 지원하므로 코드의 안정성과 가독성을 높일 수 있습니다. 만약 TypeScript를 사용할 예정이라면 "Yes"를 선택하고, 사용하지 않을 예정이라면 "No"를 선택합니다.
  • JSX 지원 추가 여부: JSX는 JavaScript XML의 약자로, React에서 컴포넌트를 작성할 때 사용됩니다. Vue에서도 JSX를 사용할 수 있도록 지원합니다. 만약 JSX를 사용할 예정이라면 "Yes"를 선택하고, 사용하지 않을 예정이라면 "No"를 선택합니다.
  • 단일 페이지 애플리케이션(SPA) 개발을 위한 Vue Router 추가 여부: Vue Router는 Vue.js 애플리케이션에서 클라이언트 사이드 라우팅을 구현할 때 사용됩니다. SPA를 개발할 예정이라면 "Yes"를 선택하고, 그렇지 않을 경우에는 "No"를 선택합니다.
  • 상태 관리를 위한 Pinia 추가 여부: Pinia는 Vue.js에서 상태 관리를 위한 상태 관리 라이브러리입니다. Vuex와 유사하지만 더 간단하고 직관적인 API를 제공합니다. 상태 관리가 필요한 경우에는 "Yes"를 선택하고, 필요하지 않은 경우에는 "No"를 선택합니다.
  • 유닛 테스트를 위한 Vitest 추가 여부: Vitest는 Vue.js 애플리케이션의 유닛 테스트를 작성하기 위한 테스트 프레임워크입니다. 유닛 테스트를 작성할 예정이라면 "Yes"를 선택하고, 그렇지 않을 경우에는 "No"를 선택합니다.
  • 유닛 및 End-to-End(E2E) 테스트를 위한 Cypress 추가 여부: Cypress는 Vue.js 애플리케이션의 유닛 및 E2E 테스트를 작성하기 위한 테스트 프레임워크입니다. 유닛 및 E2E 테스트를 작성할 예정이라면 "Yes"를 선택하고, 그렇지 않을 경우에는 "No"를 선택합니다.
  • 코드 품질을 위한 ESLint 추가 여부: ESLint는 JavaScript 코드에서 일관성, 가독성 및 버그를 방지하기 위한 정적 분석 도구입니다. 코드 품질 관리가 필요한 경우 "Yes"를 선택하고, 그렇지 않을 경우에는 "No"를 선택합니다
  • 코드 포맷팅을 위한 Prettier 추가 여부: Prettier는 코드 포맷팅을 자동화하여 코드의 일관성과 가독성을 유지합니다. 코드 포맷팅이 필요한 경우 "Yes"를 선택하고, 필요하지 않은 경우 "No"를 선택합니다.

 

 

4. 프로젝트 실행: 프로젝트가 생성되면 터미널 또는 명령 프롬프트에서 다음 명령어를 실행하여 Vue.js 개발 서버를 실행합니다.

> cd <your-project-name>
> npm install
> npm run dev

 

※ npm install 명령어는 프로젝트의 package.json 파일에 명시된 모든 패키지를 node_modules 디렉토리에 설치하고, 프로젝트에서 패키지를 사용할 수 있도록 설정합니다. 이후 해당 프로젝트 폴더를 열어서 실행할 경우 npm run dev 명령만 사용하면 서버가 실행됩니다.

 

위 명령어를 실행하면 개발 서버가 실행되며, 웹 브라우저에서 터미널에 표시된 http://localhost:**** 주소로 접속하면 Vue.js 애플리케이션을 확인할 수 있습니다.

 

 

※ 참고: 프로젝트와 파일의 구조와 형식

반응형