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

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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 개발 환경에 맞춰서 properties를 사용하기 위해선 dotenv를 사용해야합니다. 1. dotenv 설치하기 # npm npm i dotenv # yarn yarn add dotenv 2. .env 파일 생성하기 # 프로젝트 제일 상단에 생성하기 vue-tistory/.env 3. 변수 선언하기 # 변수명 "VUE_APP" prefix가 필수 VUE_APP_JSS=프뚜 VUE_APP_가 꼭 들어가야..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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. 아래의 경로로 이동하기 # 현재 프로젝트 (vue-tistory) ./node_modules/webp..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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에서는 아래와 같은 라이프사이클 훅이 존재합니다. 상황에 맞춰서 사용한다면 좋은 퍼포먼스를 낼 수 있습니다. 크게 beforeCreate, beforeMount, mounted, beforeUpdate, update, beforeUnmount, unmounted가 있습니다. 1. beforeCreate 사용하기 (setup) # VUE3에서는 setup 프로퍼티가 create를 담당하고 있음 # 0..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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 Javascript에는 원시타입과 참조타입이 있습니다. 원시타입은 언어의 최고 로우 레벨에서 직접 표현되는 불변 데이터입니다. 변수에 할당될 때, 메모리의 고정 크기로 원시 값을 저장하고 해당 저장된 값을 변수가 직접적으로 가리키는 형태입니다. 또한 값이 절때 변하지 않는 불변성을 갖고있기때문에 때문에 재할당 시 기존 값이 변하는것 처럼 보일지 몰라도 사실 새로운 메모리에 재할당한 값이 저장되고 변수가 ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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 html은 태그 안에 태그로 만들어진 형태입니다. 그러다보면 버튼(클릭)을 감싸고 있는 태그에 같은 이벤트를 추가할 때가 있습니다. 같은 이벤트를 추가하게 되면 이벤트 버블링 현상이 일어납니다. 1. 클릭 이벤트 연결하기 div태그 안에 버튼 태그를 생성했습니다. 버튼 클릭 이벤트와 div 클릭 이벤트를 연결했습니다. 2. 버튼 클릭하기 버튼을 클릭하면 buttonClick log만 출력되어야 하는데, ..