안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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를 저장하거나 전역변수처럼 어디서든 사용해야할 때가 있습니다. 예를 들어 부모와 자식 관계가 깊은 상황에 부모의 값을 변경하기 위해선 emit으로 많은 자식을 거쳐야합니다. 이럴 때 사용하는 vuex에 대해서 포스팅해보겠습니다. (링크) mutations은 state의 값을 변경할 때 쓰이며, actions은 method로 사용됩니다. 1. mutations 사용하기 import { createStore } ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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를 저장하거나 전역변수처럼 어디서든 사용해야할 때가 있습니다. 예를 들어 부모와 자식 관계가 깊은 상황에 부모의 값을 변경하기 위해선 emit으로 많은 자식을 거쳐야합니다. 이럴 때 사용하는 vuex에 대해서 포스팅해보겠습니다. 1. vuex 설치하기 (링크) npm install vuex@next --save 2. store 폴더 및 store.js 생성하기 # vue store 관련된 파일은 여기에서 관리..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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 chrome에서 사용할 수 있는 devtools을 설치하고 사용해보겠습니다. 1. chrome 웹 스토어 접속하기 (링크) 2. chrome 관리자(F12) > Vue 탭으로 이동하기 Vue의 계층 구조, Router, params, emit, path 등 다양한 값들을 한 눈에 볼 수 있는 devtools입니다. 개발 시, devtools 또는 debug는 필수입니다. 궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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 컴포넌트에 값을 넘길 때 props를 사용합니다. 여러 개를 사용하게 된다면 :param이 여러 개가 추가 되는 형식이 됩니다. props의 값은 변경이 안 되기 때문에 emit을 통해 자식에서 부모의 function을 이용해서 변화시켜야합니다. props로 받은 데이터 값을 바꾸기 위해선 emit의 한 쌍이 필요합니다. 부모에게 받은 값(props)을 간단하게 변경할 수 있는 v-model에 대해 알아보도록 하겠습니다. ex) 기존 pr..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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 Model 등의 컴포넌트에 여러가지 값을 넣고 싶을 때 사용하는 slot에 대해서 알아보도록 하겠습니다. 예) Main.vue에서 Users.vue의 컴포넌트를 여러번 사용하면서 이름과 직업을 넣고 싶을 때 아래와 같이 사용할 수 있습니다. 1. Main.vue에서 Users.vue 컴포넌트 2번 사용하기 2. User.vue에서 이름과 직업을 출력하기 3. 실행하기 User.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 vue에서는 props와 emit이 있습니다. - 자식 컴포넌트에서 부모 데이터 값 사용하기 (props) - 자식 컴포넌트에서 부모 function 사용하기 (emit, emits) 가 있습니다. (자세한 내용은 링크를 통해 확인할 수 있습니다.) vue3에서는 3. props를 통해 자식에서 부모의 데이터 출력하기 (자식에서 부모 데이터 출력하기) # Main.vue Main입니다. props.user > {{ props.user }}..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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-router: 4.1.3 현재 사용하고 있는 코드가 공통 작업 또는 다른 vue에 사용되어야할 때가 있습니다. 이때 텔레포트를 사용하면 됩니다. 1. App.vue 세팅하기 router-view만 있는 App.vue입니다. 2. Main.vue 세팅하기 Main.vue입니다. 3. 실행해서 요소 값 확인하기 vue는 id="app"에 모든 요소가 들어가 있습니다. 4. Main.vue에서 App.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 - vue-router: 4.1.3 페이지를 이동하다보면 전 페이지의 이벤트를 모두 종료하고 현 페이지로 이동해야하는 경우가 있습니다. 예를 들면 setTimeout을 통해 이벤트를 추가한 이후 다른 페이지로 넘어가면 이전 페이지의 이벤트는 종료되어야하는 게 맞습니다. 메모리 관리하는 방법에 대해 포스팅하겠습니다. 1. Main.vue > setTimeout 추가하기 # Main.vue에 접속하면 setTimeout을 통해 3초 후 con..