안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue state 변수를 감지하여 실행하는 프로퍼티 watch에 대해 알아보도록 하겠습니다. ※ state(ref, reactive)로 선언된 변수가 아니면 watch를 사용할 수 없습니다. 1. watch 프로퍼티를 import 하기 import { ref, watch } from 'vue'; 2. watch 프로퍼티 사용하기 # watch(ref변수명, (현재 값, 이전 값) => { 구현체 }); watch(searchText, (c..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue는 javascript언어로 javascript는 비동기입니다. 1. 비동기 확인하기 # 1~3 console.log 추가, 기대값 1. 유저 데이터 ==> {} 2. 유저 데이터 ==> db.json 3. 유저 데이터 ==> db.json log가 순서대로 출력되지 않음을 확인할 수 있습니다. 2. async / await를 사용하기 # async로 function 선언, 기다려야하는 작업에 await async setup() { ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 서버와 통신해야 할 때 많이 사용하는 함수는 axios입니다. 1. axios 설치하기 npm i axios --save 2. db.json에 값 비워놓기 (json-server 설치가 되어있지 않으면 링크를 통해 진행하기) users라는 데이터만 만들어 놓고 안에 값은 비어놓은 상태입니다. 3. axios를 사용해서 db.json에 값 추가하기 # axios import import axios from 'axios'; # axios는 g..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 yarn이 설치 되어있지 않으신 분은 링크를 통해 설치 진행해주시면 됩니다. npm이 설치 되어있지 않으신 분은 링크를 통해 설치 진행해주시면 됩니다. front 개발을 하다보면 데이터를 저장해야하는 상황이 생깁니다. Database에 저장하기 위해선 Backend 서버가 필요합니다. 개발 단계에서는 backend 서버가 없거나 미구현인 상황이 많이 생깁니다. 이때 대신해서 활용할 수 있는 json-server가 있습니다. 1. npm 홈..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue에서 ref 또는 reactive로 선언된 값이 변할 때 실행되는 computed를 알아보려고 합니다. 1. vue에서 제공하는 computed를 import 하기 vue에서 제공하는 computed를 import 합니다. computed로 지켜볼 ref 변수를 선언합니다. ref변수의 값이 변할 때 실행되는 computed 변수를 생성합니다. 2. ref 변수가 변했을 때 정상적으로 변경되는 지 확인하기 count 값을 +1씩 증가..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue에서는 component import를 자주 하게 됩니다. 자식 component에서 부모 component의 함수를 사용해야 할 일이 많습니다. 그럴 때 사용하는 함수가 emit입니다. 1. 자식(emit/EmitInfo.vue)에서 부모(App.vue) 함수 사용하기 App.vue(부모), EmitInfo.vue(자식) 구조입니다. 2. 자식 컴포넌트에서 emit 사용하기 setup 파라미터에는 props와 context가 있습니..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 # v-if는 데이터를 비교해서 출력 여부를 선택할 때 사용합니다. 비교에 사용 될 태그 안에 v-if를 선언합니다. v-if="변수명 === '비교 할 값'" 변수명은 vue data 입니다. v-else는 위 조건이 맞지 않을 때 출력됩니다. 궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 정확한 답변드리겠습니다.

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 ＃VUE2에서는 값을 변경할 땐 data영역에 있는 값을 this. 접근 후 변경했습니다. ＃VUE3에서는 data, methods가 setup에서 처리할 수 있게 되었습니다. 변수의 값을 변경 할 때, ref를 사용하지 않은 변수는 값 변경이 불가능합니다. ref를 사용한 변수를 변경할 때는 '변수명.value'로 값을 변경해야합니다. 값 변경 function을 실행했지만 ref로 지정하지 않은 notRefName은 변경되지 않는 걸 볼 수 있습니다. 궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 ..