vue

웹 프레임워크에서 주로 쓰이는 react와 vue를 비교해 보겠다그중에서도 데이터 바인딩과 데이터 흐름 방식에 대해 자세히 알아보자!UI 라이브러리와 프레임워크 각각 공식문서에 따르면 react는 라이브러리이고 vue는 프레임워크로 소개되고 있다.react는 라이브러리이기 때문에 리액트만으로 전역상태관리, 라우팅 등을 지원하지 않는다. 사용자가 별도의 라이브러리를 추가하여 사용해야 한다. vue는 프레임워크로 주어진 문법에 따라 사용해야 한다.  코드 형태react는 jsx를 사용하고 자바스크립트를 통해 UI로직과 DOM을 구현한다.vue는 에는 html, {{ childData }}   데이터 바인딩데이터 바인딩이란?화면상에 보이는 데이터와 브라우저 메모리에 있는 데이터를 서..

일단 시작하기 전에 내가 원하는 결과는 아래와 같다. 숫자만 입력될 것 (영어, 한글 등 입력 시 자동으로 삭제되도록) 세 자리 숫자마다 콤마 찍기 1. v-model (이건 안 되는 방식임) 처음엔 v-model을 이용하여 구현했다. 잘 작동하는 것 같았으나 한글 입력 시 느리게 반영되어? (자음과 모음 조합이 한 글자이기 때문인듯하다. 즉 자음 모음 조합이 완성되어야 입력되었다고 인식하는 것 같다.) 삭제가 바로 안 되는 그런 문제가 있었다. data: { onlyNumber: '', }, methods: { checkValue(event){ this[event.target.name] = event.target.value.replace(/[^0-9]/g, '') .replace(/\B(?=(\d{3}..

이번 프로젝트에서 나는 수평 막대그래프를 담당했다. 이 막대 그래프 내용을 정리해보겠다. vue 버전은 3.2.13이다. 나는 뷰를 처음 써보는 사람이다. 틀린 부분이 있을지도 모른다는 점 명심해야 한다. 나는 vue-chart-3을 사용했다. 내가 원했던 그래프는 아래와 같이 1. 수평 막대그래프이고 2. 중앙을 기준으로 왼쪽 값이 5보다 크다면 왼쪽으로 그려지고 아니라면 오른쪽으로 그래프가 그려져야 한다. prop로 받아온 값이 5보다 크면 -1을 곱해 음수로 만들어 왼쪽으로 그려지도록 했다. 반대로 양수라면 오른쪽으로 그려진다. 위에 그래프 관련 코드는 아래와 같다. import { defineComponent, ref } from "vue"; import { BarChart } from "vue-..