ksc-dev 님의 블로그

1. ref가 뭔지 한 줄 요약반응형 데이터를 만들어주는 함수다. 2. 코드 비교// Vue2 Options APIdata() { return { count: 0 }}// Vue3 refimport { ref } from 'vue'const count = ref(0) 3. 자주 하는 실수.value 를 까먹는 경우가 많다.const count = ref(0)count.value++ // 스크립트에서는 .value 필요 템플릿에서는 .value 없이 바로 쓸 수 있다. {{ count }} 4. ref vs reactive refreactive원시값✅❌객체✅✅.value 필요✅❌단순한 값은 ref, 객체는 reactive가 적합하다. 5. 마무리데이터가 바뀌어도 화면이 안 바뀌는 문제가 있었는데, ..

1. Vite가 뭔지 한 줄 요약프론트엔드 개발을 빠르게 실행하고 빌드해주는 도구. Webpack보다 훨씬 빠르다.2. 왜 Vite를 쓰나• Webpack은 프로젝트 커질수록 느려짐• Vite는 ES Module 기반이라 개발 서버 시작이 빠름• Vue3랑 궁합이 좋음3. 프로젝트 세팅npm create vite@latest my-projectcd my-projectnpm installnpm run dev4. 폴더 구조my-project/├── src/│ ├── components/│ ├── App.vue│ └── main.js├── index.html└── vite.config.js5. 마무리Vue3 쓰려고 Vite 선택했는데 Vue3 소형 프로젝트라면 Vite 세팅이 적합한 것 같다.

1. 한 줄 요약Vue2는 Options API, Vue3는 Composition API가 핵심 차이다. 2. 코드로 바로 비교// Vue2 - Options APIexport default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }} // Vue3 - Composition APIimport { ref } from 'vue'export default { setup() { const count = ref(0) const increment = () => count.value++ return { count, increment } }} 3. 실제로 뭐가 달라지나 Vu..