프로그램/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 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..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - 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 작성 도중.... 임시저장이 안되고 컴퓨터가 꺼지는 바람에 다시 작성해서 올리겠습니다... 부들부들...

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