초보자를 위한 Vue.js 시작하기

Vue.js는 사용자 인터페이스와 단일 페이지 애플리케이션을 구축하기 위한 인기 있는 JavaScript 프레임워크입니다. 단순성, 유연성, 다른 라이브러리나 프로젝트와의 통합 용이성으로 유명합니다. Vue.js는 최소한의 노력으로 동적 웹 애플리케이션을 구축하려는 초보자와 숙련된 개발자 모두에게 훌륭한 선택입니다.

첫 번째 Vue.js 프로젝트 설정

Vue.js를 시작하려면 개발 환경을 설정해야 합니다. 가장 쉬운 방법은 Vue CLI(명령줄 인터페이스)를 사용하는 것입니다. 이 인터페이스는 Vue.js 프로젝트를 만들고 관리하는 데 도움이 됩니다. 다음 단계에 따라 첫 번째 Vue.js 프로젝트를 설정하세요.

Node.js와 npm 설치: Vue.js는 Node.js와 npm(Node Package Manager)이 시스템에 설치되어 있어야 합니다. 공식 Node.js 웹사이트에서 다운로드하여 설치할 수 있습니다.
Vue CLI 설치: Node.js와 npm이 설치되면 터미널이나 명령 프롬프트를 열고 다음 명령을 실행하여 Vue CLI를 전역적으로 설치합니다.

npm install -g @vue/cli

새 Vue 프로젝트 만들기: Vue CLI를 설치한 후 다음 명령을 실행하여 새 Vue.js 프로젝트를 만듭니다.

vue create my-vue-app

사전 설정을 선택하라는 메시지가 표시됩니다. 초보자의 경우 Enter를 눌러 기본 사전 설정을 선택합니다. Vue CLI는 my-vue-app라는 이름의 새 폴더를 만들고 프로젝트 구조를 설정합니다.

프로젝트 폴더로 이동합니다: 다음을 실행하여 프로젝트 폴더로 이동합니다.

cd my-vue-app

개발 서버 실행: 로컬 개발 서버를 시작하고 새 Vue.js 애플리케이션을 보려면 다음을 실행하세요.

npm run serve

이 명령은 http://localhost:8080(또는 다른 사용 가능한 포트)에서 개발 서버를 시작합니다. 브라우저를 열고 이 URL로 이동하여 Vue.js 애플리케이션이 작동하는 것을 확인하세요!

Vue.js 프로젝트 구조 이해

새로 만든 Vue.js 프로젝트는 잘 정리된 구조를 가지고 있습니다. 가장 중요한 파일과 폴더에 대한 간략한 개요는 다음과 같습니다.

src: 이 폴더에는 애플리케이션의 소스 코드가 들어 있습니다. 모든 Vue 구성 요소, 스타일 및 기타 리소스가 여기에 있습니다.
public: 이 폴더에는 이미지, 글꼴, index.html 파일과 같은 정적 자산이 들어 있습니다. index.html 파일은 애플리케이션의 진입점 역할을 합니다.
src/main.js: 이 파일은 Vue.js 애플리케이션의 진입점입니다. Vue 인스턴스를 초기화하고 DOM에 마운트합니다.
src/App.vue: 이것은 애플리케이션의 루트 구성 요소입니다. 이 파일을 사용자 지정하여 앱의 기본 레이아웃을 만들 수 있습니다.
src/components: 이 폴더에는 HelloWorld.vue와 같은 Vue 구성 요소 예제가 들어 있습니다. 이 폴더에서 새 구성 요소를 만들고 애플리케이션으로 가져올 수 있습니다.

첫 번째 Vue.js 구성 요소 만들기

Vue.js는 컴포넌트 기반 프레임워크로, 즉 애플리케이션이 재사용 가능하고 자체 포함된 컴포넌트를 사용하여 빌드된다는 의미입니다. 인사 메시지를 표시하는 간단한 Vue.js 컴포넌트를 만들어 보겠습니다.

새 구성 요소 만들기: src/components 폴더에 Greeting.vue라는 이름의 새 파일을 만들고 다음 코드를 추가합니다.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

구성 요소는 세 개의 섹션으로 나뉩니다. HTML 마크업의 경우 '<template>', JavaScript 로직의 경우 '<script>', 범위가 지정된 CSS 스타일의 경우 '<style>'입니다.

구성 요소 가져오기 및 사용: src/App.vue를 열고 새 Greeting 구성 요소를 가져와 사용하도록 수정합니다.

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

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

변경 사항을 저장하면 개발 서버가 자동으로 다시 로드됩니다. 이제 페이지에 "Hello, Vue.js!"라는 인사말 메시지가 표시됩니다.

결론

Vue.js 개발 환경을 성공적으로 설정하고, 새 프로젝트를 만들고, 첫 번째 구성 요소를 빌드했습니다. Vue.js는 강력하고 유연한 프레임워크로, 이를 통해 동적이고 대화형 웹 애플리케이션을 빠르게 만들 수 있습니다. 계속해서 학습하면서 Vue Router, Vuex, Composition API와 같은 고급 기능을 발견하게 될 것이며, 이를 통해 더욱 강력한 애플리케이션을 빌드할 수 있습니다.

지금 바로 Vue.js로 개발을 시작하고 현대 웹 개발의 잠재력을 최대한 활용해 보세요!

vuejs 설정 구성 요소 cli 설치 프로젝트 템플릿 스크립트 스타일 가져오기 모듈 빌드 배포 범위 지정