치춘짱베리굿나이스
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 동작 과정
- View 를 통해 사용자로부터 이벤트 등의 Action을 받는다
- View 는 Action을 받아 ViewModel 측에 요청을 한다
- ViewModel은 요청을 받아 Model 측에 요청을 한다
- Model은 요청받은 데이터를 ViewModel 측에 응답한다
- ViewModel 은 응답받은 데이터를 보기 좋게 가공하여 저장한다
- 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.
- 타입스크립트 추가
- JSX 지원 추가
- Vue Router 추가 (React-Router처럼 뷰의 SPA 라우팅 라이브러리이다)
- Pinia 추가 (Pinia는 Vue의 상태 관리 라이브러리이다 - Redux, Recoil 같은 거)
- Vitest 추가 (Vue testing framework)
- Cypress / Playwright 추가 (E2E testing framework)
- ESLint 추가
- 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도 적용이 된다 (와)
참고 자료
'ClientSide > Vue' 카테고리의 다른 글
Vue 에서 Form input 관리하기 (0) | 2023.10.26 |
---|---|
Vue를 먹자 3 - 반응형 API (0) | 2023.10.24 |
Vue를 먹자 2 - template (0) | 2023.10.20 |