안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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는 계산 속..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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은 변경되지 않는 걸 볼 수 있습니다. 궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 1. vue-cli를 통해 프로젝트 생성하기 vue create [프로젝트명] # vue 3버전으로 설치하기 Default ([Vue 3] babel, eslint)로 선택 vue-cli가 되어있지 않다면 링크를 통해 설치를 진행해주세요. 2. IDE를 통해 프로젝트 열기 프뚜는 IntelliJ를 사용하고 있습니다. 3. VUE에서 필요한 node_modules를 설치하기 # yarn yarn install # npm npm install 4. VUE 실행하기 # yarn yarn serve # npm npm serve 궁..