[PJ] Vue 공부중

최종적으로

Vue3 + MDB + Bootstrap 을 사용해서 프로젝트를 진행하기로 결정!! (땅땅땅)

 

vue 공부

- todo list 만들어보기

 

Vite로 프로젝트 생성

npm init vite-app todo

 

Vitejs2로  프로젝트 생성

npm init vite todo-vite2

 

기본 폴더 구조

vitejs로 프로젝트 생성시, index.css 파일이 따로 있지 않고 <script> 태그가 기본적으로 setup속성을 갖도록 템플릿이 만들어진다... 그게 뭔데.ㅡ

 

Vite Project Start

Bootstrap Library 설치

npm install bootstrap

Popper Library 설치

npm install @popperjs/core

 

Todo List 변수 생성

생성된 변수는 전 컴포넌트에 걸쳐 사용되어야 한다.

변수를 공유하는 방법 중 많이 사용되는 방식들은 아래와 같다.

1. Props/Emits

  - 전통적으로 많이 쓰이는 데이터 전달 방법, 하지만 컴포넌트의 중첩도가 높아지면 데이터를 연계해서 보내줘야 하기 때문에 전달이 매우 어려워질 수 있다.

2. config.globalProperties

  - 상수값을 애플리케이션 전역에서 사용하기 편리하다. Options API를 사용하거나 템플릿에서 선언적으로 사용할 경우 매우 편리하다.

3. Vuex(pinia)

  - 상태관리가 되는 전역스토어로서 예나 지금이나 가장 많이 사랑받는 데이터 보관 및 공유소

4. Provide

  - vue3의 새로운 기능, 부모가 먼저 provide하면 자식 계열의 모든 컴포넌트에서 해당 데이터를 사용할 수 있는 편리한 기능

 

provide 로 변수를 공유해보도록 하자.

reactive : 원시형 변수가 아닐 경우 반응성을 갖도록 해줌. 객체에 반응성을 더해줌.

ref : 객체에서 반응성을 갖도록 해줌.

toRefs : 객체의 내부 속성들 모두에게 반응성을 더해줌.