Vue를 먹자 1

Vue를 먹자

Vue를 먹은 것을 정리

RealWorld 라는 웹앱을 5일동안 클론코딩 (ㅋㅋ) 하면서 빠르게 문법을 손에 익히고 뭐… 그러고 돌아왔습니다

Vue란

• JavaScript 프레임워크이다
• 구글에서 일하던 Evan You가 Angular.js의 단점을 보완하여 이러쿵저러쿵… (이하생략)
• MVVM 모델에서의 VM (ViewModel) 부분에 해당한다

장점

• 입문이 쉽다 (야너두 시작할 수 있어)
• React와 Angular 보다 후발주자인 만큼 둘의 장점만을 취해서 발전시킨 형태라 빠르고 가볍다
• 공식문서가 꽤 잘 되어 있는 편

MVVM 모델

Model - View - ViewModel

• Model: 어플리케이션에서 사용하는 데이터를 처리하는 부분
  • 자바스크립트 코어 부분이라고 보면 된다
• View: 화면에 실제로 보여지는 부분
  • HTML 을 통해 구성된 DOM 부분이라고 생각하자
  • 사용자와 직접적으로 소통하는 구간이다
• ViewModel: View를 표현하기 위해 만들어진 Model
  • 화면을 나타내기 위해 데이터를 처리하고 화면을 조작하는 부분이라고 생각하면 된다
  • Vue, Angular 등의 프레임워크가 이 부분에 해당한다
  • 안드로이드, IOS 등 모바일 어플리케이션을 개발할 때에도 본 기법이 많이 사용된다
  • 검색하면 안드로이드 IOS 얘기가 훨씬 많이나온다
• Model과 View 간에 의존성을 없앴고, Data Binding 기법을 통해 View와 ViewModel 간의 의존성 또한 없애 유연하게 모듈화가 가능하고 유지보수가 쉽다

MVVM 동작 과정

1. View 를 통해 사용자로부터 이벤트 등의 Action을 받는다
2. View 는 Action을 받아 ViewModel 측에 요청을 한다
3. ViewModel은 요청을 받아 Model 측에 요청을 한다
4. Model은 요청받은 데이터를 ViewModel 측에 응답한다
5. ViewModel 은 응답받은 데이터를 보기 좋게 가공하여 저장한다
6. View는 ViewModel 과 데이터를 바인딩하여 화면에 표현한다

데이터 바인딩

화면상에 보여지는 데이터 (View 단에서 관리한다) 와 브라우저 메모리 상의 데이터 (Model 또는 ViewModel 에서 관리한다) 를 묶어서 (Bind) 동기화하여 관리하는 기법

브라우저 메모리 상의 데이터가 바뀌었을 때 그에 맞춰 화면상의 데이터도 바꿔주는 행위를 데이터 바인딩이라고 보면 된다

• 단방향 데이터 바인딩: Model → View 방향으로만 데이터가 흘러가는 바인딩
  • View → Model 방향으로 데이터 흐름이 불가능하기 때문에 이벤트를 발생시켜서 자바스크립트 코드를 통해 값을 변경해야 한다
  • 대표적으로 React가 단방향 데이터 바인딩을 지원한다
• 양방향 데이터 바인딩: Model ↔ View 양방향으로 데이터가 흘러가는 바인딩
  • 모델이든 뷰든 한 쪽에서 데이터가 변동될 경우 다른 한 쪽도 같이 데이터가 변동된다
  • Vue, Angular 가 양방향 데이터 바인딩을 지원하며, 보통 input 태그 등에서 주로 사용된다

프로젝트 초기화 (Vue3 + Vite 기준)

$> npm init vue@latest

위 명령으로 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 an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

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

1. 타입스크립트 추가
2. JSX 지원 추가
3. Vue Router 추가 (React-Router처럼 뷰의 SPA 라우팅 라이브러리이다)
4. Pinia 추가 (Pinia는 Vue의 상태 관리 라이브러리이다 - Redux, Recoil 같은 거)
5. Vitest 추가 (Vue testing framework)
6. Cypress / Playwright 추가 (E2E testing framework)
7. ESLint 추가
8. Prettier 추가

취향껏 추가하면 된다

$> npm i
$> npm run dev

레포지토리 초기화 후 npm i 를 진행해서 패키지를 내려받아야 한다

Vue 페이지 구성

// App.vue
<template>
    <div class="wrapper">
        <span>{{ str }}</span>
    </div>
</template>

<script setup lang="ts">
const str = 'Hello World!!'
</script>

<style scoped>
.wrapper {
    width: 100vw;
    height: 100vh;
    ...
}
</style>

한 파일 안에 HTML, JavaScript, CSS가 정갈하게 놓여 있는 것을 볼 수 있다

이러한 형태의 파일을 싱글 파일 컴포넌트라고 부르는데, 컴포넌트에 필요한 3요소인 HTML, CSS, JS가 한 파일에 모여있다는 뜻이다

위의 예제에서는 스크립트 영역의 str 변수를 템플릿에 출력하고 있다

template

html 코드 대부분과 쪼끔의 Vue 문법 (v-bind, v-if 등… v- 접두로 시작한다) 이 들어가는 공간이다

React에서의 JSX 문법과 비슷한 역할을 한다고 생각하면 된다

코드 스타일이나 문법이 (vue 문법 쪼끔을 제외하면) html의 그것과 매우 유사하기 때문에 html, css를 기억한다면 화면을 구성하기 매우 쉬울 것

script

자바스크립트 (또는 타입스크립트) 코드가 들어가는 영역이다

여기서 데이터나 함수를 선언하거나 요청을 보내고, 다른 컴포넌트를 import 하는 등의 일을 수행할 수 있다

React에서의 로직 단을 생각해보자 - 그것과 비슷하게 작성하면 된다

여기서 사용되는 다양한 함수들은 추후 소개. .. . .

style

css가 들어가는 영역이다

scss 를 설치했다면 scss도 적용이 된다 (와)

---

참고 자료

https://beomy.tistory.com/43

https://adjh54.tistory.com/49