PromleeBlog
sitemap
aboutMe

posting thumbnail
Vue 3 개발 환경 세팅, Vite와 SFC 구조 이해하기 - Vue 기본기 다지기 1편
Setting Up Vue 3 Development Environment, Understanding Vite and SFC Structure - Vue Basics Part 1

📅
🚀 들어가기 전에
🚀 Vite + Vue 3 프로젝트 생성
✅ Vite란 무엇인가요?
✅ 프로젝트 생성하기
🚀 SFC 구조 이해
✅ SFC 파일의 기본 구조
✅ SFC의 장점
🚀 결론
✅ 참고
🚀

들어가기 전에 🔗

안녕하세요! Vue.js 3 개발 환경을 함께 세팅해 보겠습니다. Vue.js는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크입니다.
특히 Vue 3는 이전 버전에 비해 성능이 크게 향상되었고, 개발 경험도 더욱 편리해졌습니다.
이번 글에서는 Vue 3 프로젝트를 시작하는 가장 빠르고 쉬운 방법인
Vite
를 이용한 프로젝트 생성부터, Vue의 핵심 개념인
단일 파일 컴포넌트(SFC)
구조까지 차근차근 알아보겠습니다.
Vue.js, Vite
Vue.js, Vite
🚀

Vite + Vue 3 프로젝트 생성 🔗

자, 이제 본격적으로 Vue 3 프로젝트를 만들어 볼 시간입니다.
예전에는 Vue 프로젝트를 만들 때
Vue CLI
라는 도구를 주로 사용했는데요, 요즘은
Vite
라는 도구가 더 빠르고 가볍게 프로젝트를 만들고 실행하는 데 많이 사용되고 있습니다.
✅

Vite란 무엇인가요? 🔗

Vite는 차세대 프런트엔드 개발 툴입니다.
기존의 웹팩(Webpack)과 같은 번들러 방식과는 다르게, 네이티브 ES 모듈을 활용하여 개발 서버를 구동하기 때문에 프로젝트 시작 시간이 훨씬 빠릅니다.
개발 서버를 켜는 데 1초도 채 걸리지 않을 때가 많아요. 웹팩처럼 복잡한 설정 없이도 빠르게 개발을 시작할 수 있다는 큰 장점이 있습니다.
✅

프로젝트 생성하기 🔗

프로젝트를 생성하려면 먼저 컴퓨터에
Node.js
와
npm
또는
yarn
이 설치되어 있어야 합니다. 보통
Node.js를 설치하면 npm도 함께 설치된답니다.
터미널(명령 프롬프트 또는 PowerShell 등)을 열고 아래 명령어를 입력해 보세요.
npm create vite@latest
이 명령어를 입력하면 Vite가 몇 가지 질문을 할 것입니다.
  1. project name:: 프로젝트 이름을 입력합니다. 예를 들어 my-vue-app이라고 입력해 볼까요?
  2. Select a framework:: 화살표 키를 이용해 Vue를 선택하고 엔터 키를 누릅니다.
  3. Select a variant:: JavaScript 또는 TypeScript 중 원하는 것을 선택합니다. 이번 학습에서는 JavaScript를 선택하는 것이 좋습니다.
선택이 끝나면 Vite가 프로젝트 폴더와 기본적인 파일들을 자동으로 생성해 줍니다.
이제 생성된 프로젝트 폴더로 이동해 필요한 패키지들을 설치해 볼까요?
cd my-vue-app
npm install
npm install 명령은 프로젝트를 만드는 데 필요한 여러 가지 패키지들을 다운로드하여 설치하는 명령어입니다.
이 과정이 끝나면, 이제 개발 서버를 실행해 볼 수 있습니다.
npm run dev
이 명령어를 입력하면 터미널에 http://localhost:5173과 같은 주소가 나타날 것입니다.
이 주소를 웹 브라우저에 입력하고 접속해 보세요. "You did it!"이라는 메시지와 함께 Vue 로고가 돌아가는 화면을 볼 수 있을 거예요.
🚀

SFC 구조 이해 (.vue 파일) 🔗

Vue의 가장 큰 특징 중 하나는
단일 파일 컴포넌트(Single File Component)
, 줄여서
SFC
라고 부르는 .vue 파일입니다.
마치 레고 블록처럼 각각의 .vue 파일이 하나의 독립적인 컴포넌트 역할을 합니다.
하나의 파일 안에 HTML, JavaScript, CSS 코드를 모두 담을 수 있어서 관련된 코드들이 한곳에 모여있어 관리하기가 매우 편리합니다.
✅

SFC 파일의 기본 구조 🔗

생성된 프로젝트의 src/components/HelloWorld.vue 파일을 열어보세요. 아마 아래와 같은 구조를 볼 수 있을 것입니다.
<script setup>
// JavaScript 로직이 들어가는 부분
// 컴포넌트의 데이터, 함수 등을 정의합니다.
import { ref } from 'vue'
 
defineProps({
  msg: String,
})
 
const count = ref(0)
</script>
 
<template>
  <h1>{{ msg }}</h1>
 
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
 
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test HMR
  </p>
</template>
 
<style scoped>
/* CSS 스타일이 들어가는 부분 */
/* `scoped` 속성을 사용하면 이 스타일은 현재 컴포넌트에만 적용됩니다. */
.read-the-docs {
  color: #888;
}
</style>

➡️

<template> 🔗

이곳에는 컴포넌트의
HTML 구조
가 들어갑니다.
우리가 화면에 보여주고 싶은 내용들, 예를 들어 텍스트, 버튼, 이미지 등이 모두 이 안에 작성됩니다.
Vue는 이 template 안에 작성된 특별한 문법(예: {{ }})을 사용하여 데이터를 화면에 표시합니다.
➡️

<script setup> 🔗

이곳은 컴포넌트의
JavaScript 로직
이 들어가는 부분입니다.
컴포넌트가 가지고 있을 데이터(상태), 데이터를 변경하는 함수, 다른 컴포넌트를 불러와 사용하는 등의 모든 JavaScript 코드가 이 안에 작성됩니다.
Vue 3에서는 setup 속성을 사용해서 더욱 간결하게 컴포넌트 로직을 작성할 수 있게 되었습니다.
setup 키워드를 사용하면 컴포넌트 생성 시점에 한 번 실행되는 함수처럼 동작하여, 반응형 데이터를 선언하고 함수들을 정의할 수 있습니다.
➡️

<style scoped> 🔗

이곳은 컴포넌트의
CSS 스타일
이 들어가는 부분입니다. 여기서 중요한 점은 scoped라는 속성입니다.
이 scoped를 붙이면, 이 <style> 태그 안에 작성된 CSS 규칙들은
현재 컴포넌트에만
적용됩니다.
다른 컴포넌트나 전역 스타일에 영향을 주지 않기 때문에, CSS 충돌 걱정 없이 각 컴포넌트의 스타일을 독립적으로 관리할 수 있습니다.
✅

SFC의 장점 🔗

🚀

결론 🔗

이번 시간에는 Vue 3 개발 환경을 Vite를 이용하여 쉽고 빠르게 설정하는 방법을 알아보았습니다.
그리고 Vue의 핵심적인 파일 구조인 .vue 단일 파일 컴포넌트(SFC)의 각 영역이 어떤 역할을 하는지도 자세히 살펴보았죠.
SFC는 Vue 프로젝트를 체계적으로 관리하고 개발 효율성을 높이는 데 아주 중요한 역할을 합니다.
다음 글에서는 Vue의 템플릿 문법에 대해 더 자세히 알아보면서, 어떻게 데이터를 화면에 표시하고 사용자 입력을 처리하는지 배워보겠습니다.
✅

참고 🔗