728x90

📌 Vue 기본 개념 이해

1. Vue.js란?

Vue.js(뷰)는 프론트엔드 프레임워크로, 웹 애플리케이션의 UI(User Interface)를 만들기 위해 사용돼.
React나 Angular 같은 프레임워크와 비슷하지만, 더 가볍고 배우기 쉬운 구조를 가지고 있어.

✅ Vue의 주요 특징
✔ 반응형(Reactivity): 데이터가 변경되면 UI도 자동으로 업데이트됨
✔ 컴포넌트 기반(Component-Based): UI를 작은 블록(컴포넌트) 단위로 재사용 가능
✔ 가상 DOM(Virtual DOM) 사용: 성능 최적화
✔ 쉽고 유연한 학습 곡선: HTML, CSS, JS 기본만 알면 빠르게 배울 수 있음

2. MVVM 패턴

Vue는 MVVM(Model-View-ViewModel) 아키텍처 패턴을 기반으로 동작해.

Model: 데이터 (state)
View: 사용자 화면 (HTML)
ViewModel: Model과 View를 연결하는 중간 역할 (Vue 인스턴스)

예를 들어, 사용자가 입력한 데이터를 화면에 표시할 때, Model이 바뀌면 자동으로 View도 바뀌어!

3. Vue 2 vs Vue 3 차이점

현재 Vue 3이 최신 버전이야. Vue 2와 비교하면 몇 가지 중요한 차이가 있어.

비교 항목 Vue 2 Vue 3

Composition API	❌ (옵션 API만 제공)	✅ (새로운 Composition API 지원)
Reactivity 시스템	Object.defineProperty 사용	Proxy 사용 (더 빠르고 강력함)
Teleport	❌	✅ (DOM 위치 변경 가능)
Suspense	❌	✅ (비동기 컴포넌트 지원)

Vue 3에서는 Composition API가 추가돼서, 더 구조적인 코드 작성이 가능해!
Vue 3을 기준으로 공부하는 게 좋아. 🚀

💡 여기까지 이해됐어?
이제 개발 환경 설정을 알려줄게. 😃

📌 2. 개발 환경 설정

Vue를 사용하려면 개발 환경을 먼저 설정해야 해.
방법은 크게 Vue CLI 사용과 Vite 사용 두 가지가 있어.

✅ 1) Node.js 및 npm 설치

Vue 프로젝트를 만들려면 Node.js와 **npm(Node Package Manager)**가 필요해.
(이미 설치되어 있다면 이 단계는 건너뛰어도 돼.)

📌 Node.js 설치 방법

공식 사이트에 접속
LTS(Long Term Support) 버전 다운로드
설치 후, 터미널(또는 명령 프롬프트)에서 다음 명령어 입력하여 설치 확인
```
node -v  # Node.js 버전 확인
npm -v   # npm 버전 확인
```
버전 번호가 나오면 정상적으로 설치된 거야.

✅ 2) Vue CLI 설치 및 프로젝트 생성

Vue CLI(Vue Command Line Interface)는 Vue 프로젝트를 쉽게 만들고 관리할 수 있도록 도와줘.

📌 Vue CLI 설치

터미널에서 다음 명령어 실행:

npm install -g @vue/cli

설치 확인:

vue --version

버전 번호가 출력되면 정상적으로 설치된 거야.

📌 Vue 프로젝트 생성

vue create my-project

이 명령어를 실행하면 프로젝트 설정 옵션이 나와.
기본 설정(기본 Vue 3 + Babel + ESLint)으로 진행하려면 Default 선택하면 돼.

설정이 끝나면 프로젝트 폴더로 이동 후 실행:

cd my-project
npm run serve

이제 브라우저에서 http://localhost:8080을 열어보면 Vue 앱이 실행될 거야! 🎉

✅ 3) Vite를 이용한 프로젝트 생성

Vite는 Vue CLI보다 더 빠르고 가벼운 빌드 도구야.
최근에는 Vite를 더 많이 사용하니까, 이 방법도 배워두는 게 좋아.

📌 Vite 프로젝트 생성

npm create vite@latest my-project

옵션 선택 시 Vue를 선택하고, Vue 3 버전을 골라.
그다음 프로젝트 폴더로 이동해서 의존성 설치:

cd my-project
npm install
npm run dev

Vite는 기본적으로 http://localhost:5173에서 실행돼. 🚀

💡 CLI vs Vite 차이점

비교 항목 Vue CLI Vite

속도	상대적으로 느림	빠름 (ES 모듈 기반)
설정 방식	Webpack 기반	Rollup 기반 (더 간단함)
개발 서버	npm run serve	npm run dev

CLI와 Vite 중 Vite를 추천하지만, CLI도 사용법을 알아두면 좋아!

이제 Vue 프로젝트가 실행되는 걸 확인했을 거야!
다음은 프로젝트 폴더 구조를 분석하는 방법을 알려줄게. 😃

📌 3. 프로젝트 폴더 구조 분석

Vue 프로젝트를 생성하면 여러 폴더와 파일이 생기는데, 각각 어떤 역할을 하는지 알아보자.
아래는 Vite 기준의 폴더 구조지만, Vue CLI도 비슷해!

my-project/         # 프로젝트 루트
├── node_modules/   # 설치된 npm 패키지 (건드릴 필요 없음)
├── public/         # 정적 파일 (이미지, favicon 등)
├── src/            # 핵심 소스 코드
│   ├── assets/     # 이미지, CSS 등 정적 리소스
│   ├── components/ # 재사용 가능한 Vue 컴포넌트
│   ├── views/      # 페이지 단위 컴포넌트 (라우팅 사용 시)
│   ├── App.vue     # 최상위 컴포넌트
│   ├── main.js     # Vue 앱의 진입점
│   ├── router.js   # (옵션) Vue Router 설정 파일
│   ├── store.js    # (옵션) 상태 관리(Vuex, Pinia)
├── index.html      # 앱이 실행될 기본 HTML
├── package.json    # 프로젝트 설정 및 의존성 목록
├── vite.config.js  # Vite 설정 파일
└── README.md       # 프로젝트 설명 파일

📌 주요 폴더 & 파일 설명

✅ src/ (소스 코드 폴더)

이 폴더 안에서 Vue 애플리케이션을 개발해.

assets/ → CSS, 이미지, 폰트 등의 정적 파일 저장
components/ → Vue 컴포넌트(.vue 파일) 저장
views/ → 페이지 단위 컴포넌트 (Vue Router 사용 시)
App.vue → 최상위 루트 컴포넌트
main.js → Vue 앱의 진입점 (Vue 인스턴스를 생성하는 곳)
router.js → (옵션) Vue Router 설정 파일
store.js → (옵션) 상태 관리(Vuex, Pinia)

✅ public/ (정적 파일 폴더)

여기에 있는 파일은 그대로 빌드되며, / 경로로 접근 가능해.
예) public/logo.png → http://localhost:5173/logo.png

✅ index.html (Vue의 시작점)

Vue 앱이 로드되는 HTML 파일이야. main.js에서 Vue가 이 파일에 연결됨.

✅ package.json (프로젝트 설정 파일)

프로젝트 정보, npm 패키지 목록이 저장됨.

주요 스크립트:

"scripts": {
  "dev": "vite",   // 개발 서버 실행
  "build": "vite build",   // 프로젝트 빌드
  "serve": "vite preview"  // 빌드된 파일 실행
}

✅ vite.config.js (Vite 설정 파일)

포트 변경, 별칭 설정 등 프로젝트 설정을 변경하는 곳.
기본적으로 수정할 필요 없지만, 필요하면 수정 가능.

📌 프로젝트 구조 이해 예제

Vue 앱이 동작하는 기본 흐름

index.html → main.js 로 Vue 앱을 로드
main.js → App.vue를 렌더링
App.vue 내부에서 components/에 있는 여러 컴포넌트를 사용

이제 기본적인 폴더 구조와 역할을 이해했을 거야!
다음으로 CDN 방식으로 Vue를 실행하는 방법을 알려줄게. 🚀

📌 4. CDN 방식으로 Vue 실행하기

CDN(Content Delivery Network)을 사용하면 설치 없이 바로 Vue를 실행할 수 있어.
Vue CLI나 Vite를 쓰기 전에 빠르게 실험해볼 때 유용해!

✅ 1) 기본 Vue 앱 만들기

📌 아래 코드를 index.html 파일에 저장하고 브라우저에서 열어봐!


        // Vue 앱 생성
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    message: "안녕하세요! Vue입니다 🚀"
                };
            },
            methods: {
                changeMessage() {
                    this.message = "버튼을 클릭했어요! 🎉";
                }
            }
        }).mount("#app"); // id="app"인 요소에 Vue 연결

✅ 2) 코드 설명

Vue 3 CDN 추가위 코드가 Vue를 불러오는 역할을 해!
Vue 앱 생성Vue 3에서는 createApp()을 사용해 앱을 만들고, mount("#app")으로 연결해.
const { createApp } = Vue; createApp({
데이터 바인딩 ({{ message }})
- data() 함수에서 message라는 변수를 만들었어.
- HTML에서 {{ message }}를 쓰면, Vue가 자동으로 값을 표시해 줘.
이벤트 핸들러 (@click="changeMessage")
- <button>을 클릭하면 changeMessage() 함수가 실행돼!
- this.message 값을 변경하면 화면에 자동으로 반영돼.

✅ 3) 실행 방법

위 코드를 index.html로 저장
브라우저에서 index.html 파일 열기
화면에 "안녕하세요! Vue입니다 🚀"가 보이면 성공!
버튼을 클릭하면 "버튼을 클릭했어요! 🎉"로 변경됨!

✅ 4) CDN 방식의 장점과 단점

장점 단점

✅ 장점	- 설치 없이 빠르게 Vue 사용 가능 - 간단한 테스트 및 프로토타이핑에 적합
❌ 단점	- 프로젝트 규모가 커지면 유지보수 어려움 - Vue CLI/Vite보다 성능 최적화 기능 부족

✅ 결론: 빠른 테스트용으로는 CDN이 좋지만, 실제 프로젝트에서는 Vue CLI 또는 Vite를 사용하는 게 좋아!

이제 Vue를 실행하는 기본 방법을 알았어!
다음으로 Vue DevTools 설치 및 활용법을 알려줄게. 🚀

📌 5. Vue DevTools 설치 및 활용

Vue DevTools는 Vue 애플리케이션을 디버깅하고 상태를 확인하는 도구야.
컴포넌트 상태, 반응형 데이터, 이벤트 등을 실시간으로 확인할 수 있어!

✅ 1) Vue DevTools 설치 방법

🔹 ① 크롬 브라우저 확장 프로그램 설치

Vue DevTools 크롬 웹스토어 방문
"Chrome에 추가" 버튼 클릭
확장 프로그램 활성화

설치 후, F12(개발자 도구) → "Vue" 탭이 생겼는지 확인해 봐!

🔹 ② Firefox 사용자는?

Firefox용 Vue DevTools 설치

🔹 ③ Vue DevTools가 안 보일 때?

Vue 3에서는 개발 모드에서만 작동하기 때문에,
Vite 또는 Vue CLI에서 실행한 상태에서 확인해야 해!

npm run dev  # Vite 사용 시
npm run serve  # Vue CLI 사용 시

또한, CDN 방식을 사용할 때는 Vue DevTools가 작동하지 않을 수 있어.
이 경우, 개발자 모드 활성화가 필요해!

위 코드를 다음과 같이 수정하면 DevTools에서 Vue가 감지될 수 있어:

✅ 2) Vue DevTools 활용 방법

Vue DevTools 활성화
- F12(개발자 도구) → "Vue" 탭 클릭
컴포넌트 확인
- 현재 렌더링된 Vue 컴포넌트 트리를 볼 수 있어!
- 특정 컴포넌트를 클릭하면, 데이터(data), props, computed 값을 확인 가능
데이터 실시간 수정
- "Vue" 탭에서 message 값을 직접 변경하면, 화면도 즉시 업데이트돼!
- 예제:
```
data() {
    return { message: "안녕하세요!" };
}
```
  → Vue DevTools에서 message 값을 "반가워요!"로 수정하면?
  → 브라우저 화면에서도 "반가워요!"로 즉시 반영됨!
이벤트 확인 (Events 탭)
- 컴포넌트에서 발생하는 이벤트 확인 가능
- 예를 들어, 버튼 클릭 시 어떤 이벤트가 발생하는지 체크 가능
Vuex / Pinia 상태 관리 디버깅 (선택)
- Vuex 또는 Pinia 사용 시, 상태(state) 변경 내역을 추적 가능

✅ 3) Vue DevTools 활용 예제

아래 예제를 실행한 후, Vue DevTools에서 데이터 값을 변경해 보자!


        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    message: "Vue DevTools로 값을 바꿔보세요!"
                };
            },
            methods: {
                changeMessage() {
                    this.message = "버튼 클릭됨!";
                }
            }
        }).mount("#app");

🔹 실행 후 Vue DevTools에서 확인할 것

✔ Vue 탭에서 message 데이터 변경 → 브라우저 화면에서 바로 반영됨
✔ 버튼 클릭 후 이벤트 확인 (Events 탭에서 어떤 이벤트가 발생했는지 체크)

✅ 4) Vue DevTools 사용 시 주의할 점

배포 환경에서는 DevTools가 비활성화됨
- 기본적으로 npm run build로 빌드한 후 배포하면 Vue DevTools가 작동하지 않아!
- 개발 환경에서만 사용하도록 설계된 기능이야.
Vue DevTools가 작동하지 않을 때
- npm run dev를 실행하지 않았다면 실행할 것
- Vue 3 사용 시, CDN 방식이면 devtools가 제한될 수 있음
- vite.config.js에 define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true } 설정 추가 가능

이제 Vue DevTools도 활용할 수 있게 됐어!
다음으로, Vue의 데이터 바인딩과 기본 문법을 알려줄게. 🚀

📌 6. Vue의 데이터 바인딩과 기본 문법

Vue에서는 데이터를 **HTML에 쉽게 연결(바인딩)**할 수 있어.
이제 데이터 바인딩의 개념과 기본 문법을 배워보자! 🚀

✅ 1) 데이터 바인딩이란?

**데이터 바인딩(Data Binding)**이란, Vue 인스턴스의 데이터와 HTML을 연결하는 것이야.
Vue에서는 {{ }}(Mustache Syntax)와 v-bind 디렉티브를 사용해 데이터를 바인딩할 수 있어.

✅ 2) 데이터 바인딩 문법

🔹 ① {{ }} (Mustache Syntax) - 텍스트 바인딩

{{ }}를 사용하면 Vue의 data()에 있는 변수를 HTML에 출력할 수 있어.

<div id="app">
    <h1>{{ message }}</h1>
</div>

<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return {
                message: "안녕하세요! Vue입니다 🚀"
            };
        }
    }).mount("#app");
</script>

📌 실행하면 화면에 "안녕하세요! Vue입니다 🚀"이 출력돼!

🔹 ② v-bind - 속성(attribute) 바인딩

v-bind는 HTML 속성에 Vue 데이터를 바인딩할 때 사용해.
축약형(:)을 사용할 수도 있어.

마우스를 올려보세요!


    const { createApp } = Vue;
    createApp({
        data() {
            return {
                imageUrl: "<a href=https://vuejs.org/images/logo.png>https://vuejs.org/images/logo.png</a>",
                tooltip: "Vue는 쉽고 강력해요!"
            };
        }
    }).mount("#app");

📌 v-bind:src="imageUrl"을 사용해서 이미지 경로를 Vue 데이터에서 가져와!
📌 :title="tooltip"은 v-bind:title="tooltip"의 축약형이야!

🔹 ③ v-model - 양방향 데이터 바인딩

v-model을 사용하면 사용자 입력값과 Vue 데이터가 자동으로 동기화돼!

<div id="app">
    <input v-model="name" placeholder="이름을 입력하세요">
    <p>입력한 이름: {{ name }}</p>
</div>

<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return {
                name: ""
            };
        }
    }).mount("#app");
</script>

📌 사용자가 <input>에 입력하면, name 값이 자동으로 업데이트돼!
📌 v-model은 input, textarea, select 태그에서 사용 가능해!

🔹 ④ v-if, v-show - 조건부 렌더링

v-if와 v-show는 특정 조건에 따라 요소를 보이거나 숨기는 데 사용돼.

<div id="app">
    <button @click="isVisible = !isVisible">토글</button>
    <p v-if="isVisible">v-if: 이 문장은 조건이 참일 때만 표시돼요.</p>
    <p v-show="isVisible">v-show: 이 문장은 CSS로 숨겨졌다가 보여요.</p>
</div>

<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return {
                isVisible: true
            };
        }
    }).mount("#app");
</script>

📌 v-if는 요소를 DOM에서 완전히 제거하거나 추가해.
📌 v-show는 CSS의 display: none을 사용해서 숨기는 방식이라 빠르게 전환 가능!

🔹 ⑤ v-for - 리스트 렌더링

v-for를 사용하면 배열을 반복해서 HTML 요소를 만들 수 있어.

<div id="app">
    <ul>
        <li v-for="(fruit, index) in fruits" :key="index">
            {{ index + 1 }}. {{ fruit }}
        </li>
    </ul>
</div>

<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return {
                fruits: ["사과", "바나나", "포도"]
            };
        }
    }).mount("#app");
</script>

📌 v-for="(item, index) in 배열"을 사용해서 리스트를 자동 생성할 수 있어.
📌 :key는 Vue가 리스트를 더 효율적으로 업데이트할 수 있도록 돕는 고유값이야.

🔹 ⑥ @click, @input - 이벤트 바인딩

Vue에서는 v-on을 사용해서 이벤트를 연결할 수 있어.
축약형(@)을 사용하면 더 간단해져!

<div id="app">
    <button @click="increaseCount">카운트 증가</button>
    <p>카운트: {{ count }}</p>
</div>

<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return {
                count: 0
            };
        },
        methods: {
            increaseCount() {
                this.count++;
            }
        }
    }).mount("#app");
</script>

📌 @click="increaseCount" → 버튼 클릭 시 increaseCount() 함수 실행
📌 this.count++ → count 값을 증가시키고, 자동으로 화면 업데이트!

🔹 ⑦ computed - 계산된 속성

computed는 데이터 변경 시 자동으로 값을 업데이트하는 속성이야.
기존 methods와 다르게, 캐싱(저장)되어 불필요한 연산을 줄일 수 있어!

<div id="app">
    <p>이름: <input v-model="name"></p>
    <p>반갑습니다, {{ greeting }}!</p>
</div>

<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return {
                name: "홍길동"
            };
        },
        computed: {
            greeting() {
                return this.name ? this.name + "님" : "이름을 입력하세요!";
            }
        }
    }).mount("#app");
</script>

📌 computed는 name 값이 변경될 때만 다시 계산돼.
📌 methods를 사용할 수도 있지만, computed가 더 효율적이야!

✅ 3) 정리

기능 디렉티브/문법 설명

텍스트 바인딩	{{ message }}	Vue 데이터를 HTML에 출력
속성 바인딩	v-bind:src="imageUrl" (:src 가능)	HTML 속성에 데이터 바인딩
양방향 바인딩	v-model="name"	input 값과 Vue 데이터 동기화
조건부 렌더링	v-if="조건", v-show="조건"	조건에 따라 요소 표시/숨김
리스트 렌더링	v-for="(item, index) in 배열"	배열을 반복하여 리스트 생성
이벤트 바인딩	@click="함수명"	버튼 클릭 등의 이벤트 처리
계산된 속성	computed	데이터를 자동 계산 & 캐싱

이제 Vue의 기본 문법을 배웠어!
다음으로 Vue의 컴포넌트 개념과 사용법을 알려줄게. 🚀

'홈페이지' 카테고리의 다른 글

CSS와 jQuery를 사용한 좌우로 움직이는 슬라이드쇼 - 3개씩 이미지 캐러셀 형태 (0)	2025.03.05
div 높이 설정 방법 - Flexbox (0)	2025.02.28
VUE 공부 3개월만에 끝내려고 하는데 1일차 공부할 내용 알려줘. (0)	2025.02.22
HTML5 CSS3 홈페이지 스타일링 3 - 레이아웃속성 플렉스 flex (0)	2024.06.27
HTML5 CSS3 홈페이지 스타일링 2 - 포지션 position (0)	2024.06.19

VUE 1일차-(1)