Vue 3 설치 및 개발 환경 세팅 가이드

작성일자 글쓴이
Vue 3 설치 및 개발 환경 세팅 가이드

1. Vue 3 개발을 위한 필수 프로그램 설치

1.1 Node.js 설치

Vue 프로젝트를 생성하고 실행하려면 Node.js가 필수입니다.
Node.js는 JavaScript 런타임 환경으로, Vue 프로젝트에서 필요한 라이브러리를 설치하는 **npm(Node Package Manager)**을 포함하고 있습니다.

설치 방법

  1. 구글에서 “Node.js 다운로드”를 검색합니다.
  2. 공식 사이트에 접속합니다.
  3. 최신 LTS(Long-Term Support) 버전을 다운로드합니다.
  4. 설치 과정에서 경로 설정을 변경하지 말고 기본값으로 유지합니다.

💡 TIP: 이미 Node.js가 설치되어 있다면, node -v 명령어를 사용해 버전을 확인하세요. 만약 너무 오래된 버전이라면 삭제 후 재설치하는 것이 좋습니다.

1.2 Visual Studio Code (VS Code) 설치

Vue 프로젝트를 개발할 때는 VS Code가 가장 널리 사용되는 에디터입니다.

설치 방법

  1. 구글에서 “VS Code 다운로드”를 검색합니다.
  2. 공식 사이트에 접속합니다.
  3. 운영체제에 맞는 설치 파일을 다운로드하고 설치합니다.
  4. 설치 후 실행하여 터미널(Terminal)을 열어둡니다.

2. Vue CLI 설치 (Command Line Interface)

Vue 프로젝트를 쉽게 생성하고 관리하려면 Vue CLI가 필요합니다.
이 도구를 사용하면 프로젝트 구조를 자동으로 설정하고, 필요한 패키지를 간편하게 설치할 수 있습니다.

설치 방법

  1. VS Code에서 터미널을 실행합니다. (Ctrl + ~ 단축키 사용 가능)
  2. 다음 명령어를 입력하여 Vue CLI를 설치합니다.bash복사편집npm install -g @vue/cli
  3. 설치가 완료되면, Vue CLI 버전을 확인하여 정상적으로 설치되었는지 확인합니다.bash복사편집vue --version

💡 추가 팁: npm 대신 yarn을 사용하고 싶다면, 다음 명령어로 설치할 수 있습니다.

bash복사편집npm install -g yarn
yarn global add @vue/cli

3. Vue 3 프로젝트 생성

이제 Vue 프로젝트를 생성해보겠습니다.

프로젝트 생성 단계

  1. 터미널에서 작업 폴더를 생성하고 해당 폴더로 이동합니다.bash복사편집mkdir vue-project cd vue-project
  2. Vue 프로젝트를 생성하는 명령어를 실행합니다.bash복사편집vue create my-vue-app
  3. Vue 3 버전을 선택합니다.
    • Vue 3 기본 설정을 사용하려면 Default (Vue 3)을 선택하세요.
    • 커스텀 설정을 원하면 Manually select features를 선택하세요.

💡 주의사항: 프로젝트 이름에 대문자나 특수문자는 사용하지 않는 것이 좋습니다.

4. 프로젝트 폴더 구조 이해하기

Vue 프로젝트가 생성되면, 폴더 내부에 다양한 파일과 폴더가 자동으로 생성됩니다.

주요 폴더 및 파일

폴더/파일설명
node_modules/설치된 라이브러리 및 패키지들이 저장됨
public/정적 파일(html, 이미지 등)이 저장됨
src/Vue 컴포넌트와 코드가 저장되는 핵심 폴더
src/main.js프로젝트의 진입점(메인 파일)
src/App.vueVue 프로젝트의 기본 컴포넌트
package.json프로젝트의 설정 정보 및 의존성 목록
vue.config.jsVue 프로젝트의 설정 파일(필요시 수정 가능)

5. Vue 프로젝트 실행하기

이제 프로젝트를 실행하여 Vue 앱이 정상적으로 동작하는지 확인해보겠습니다.

실행 방법

  1. 프로젝트 폴더로 이동합니다.bash복사편집cd my-vue-app
  2. 서버를 실행합니다.bash복사편집npm run serve
  3. 터미널에서 다음과 같은 메시지가 나타나면, 정상적으로 실행된 것입니다.arduino복사편집Local: http://localhost:8080/
  4. 웹 브라우저에서 http://localhost:8080/에 접속하면, 기본 Vue 페이지가 나타납니다.

💡 실시간 반영 기능: Vue 프로젝트는 Hot Module Replacement(HMR) 기능을 지원하므로, 코드를 수정하면 브라우저에서 자동으로 변경 사항이 반영됩니다.

6. Vue 프로젝트의 기본 코드 살펴보기

App.vue

src/App.vue는 Vue 프로젝트의 기본 컴포넌트입니다.

기본 코드

vue복사편집

<template>
  <div id="app">
    <h1>안녕하세요, Vue 3!</h1>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
#app {
  text-align: center;
}
</style>

위 코드를 실행하면, 화면에 “안녕하세요, Vue 3!”라는 텍스트가 나타납니다.

7. 자주 발생하는 오류 및 해결 방법

1. Vue CLI 설치 오류

오류 메시지: command not found: vue
해결 방법:

bash복사편집

npm uninstall -g @vue/cli
npm install -g @vue/cli

2. npm 설치 속도가 느린 경우

해결 방법:

  • yarn을 사용하여 패키지를 설치합니다.bash복사편집npm install -g yarn yarn install
  • npm 캐시를 정리합니다.bash복사편집npm cache clean --force

3. npm 실행 시 권한 문제

해결 방법:

  • sudo를 붙여 실행 (Mac/Linux)bash복사편집sudo npm install -g @vue/cli
  • Windows에서는 관리자 권한으로 터미널 실행 후 명령어를 입력합니다.

결론 및 다음 단계

지금까지 Vue 3 개발을 위한 환경을 세팅하고, 기본적인 프로젝트를 생성 및 실행하는 방법을 배웠습니다. 다음 단계에서는 Vue의 컴포넌트 구조, 반응형 데이터, 이벤트 처리 등을 학습하면 더욱 깊이 있는 개발을 진행할 수 있습니다.

💬 혹시 설치 과정에서 문제가 발생했나요? 댓글로 질문을 남겨주세요! 😊