프로그램/VUE

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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 - 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의 값을 출력하거나 사용해야 할 일이 많습니다. 그럴 때 사용하는 함수가 props입니다. 1. 자식(props/MyInfo.vue)에서 부모(App.vue) 데이터를 사용하기 App.vue(부모), MyInfo.vue(자식) 구조입니다. 2. 자식 컴포넌트에서 props 사용하기 props는 배열 방식으로 여러 개를 받을 수 있..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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를 사용할 수 있습니다. 1-1. ref를 사용하여 배열 데이터(Array) 생성하기 {{ array }} 1-2. ref를 사용하여 배열 데이터 값 추가하기 {{ array }} ref로 값을 변경할 땐 변수명.value로 다가가야합니다. (관련 자료 링크) 1-3. ref를 사용하여 배열 데이터 값 삭제하기 {{ array }} 2-1. reactive를 사용하여 배열 데이터(Arr..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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 # v-for는 ListData를 반복적으로 출력할 때 사용합니다. 반복적으로 사용 할 태그 안에 v-for를 선언합니다. v-for="(할당변수, index) in ListData"로 할당변수는 리스트에 있는 데이터, index는 현재 배열의 위치입니다. :key="index"는 v-for를 사용할 때 꼭 사용해야하는 프로퍼티입니다. 궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 정확한 답변드리겠습니다.

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 ＃값 변경은 ref로 사용할 수 있지만, reactive도 변경할 수 있습니다. ref는 모든 형식에 사용할 수 있지만, reactive는 Object, List만 사용할 수 있습니다. 그럼 ref가 더 좋은 게 아니냐라고 생각할 수 있지만, reactive는 ref보다 간결하게 코딩이 가능합니다. 또한, reactive는 계산 속성이 가능합니다. (ref는 사용 불가) # ref는 값을 변경하기 위해서 변수명.value를 사용했지만, reactive로 선언된 변수는 바로 바인딩이 가능합니다. # reactive는 계산 속..