# vue3
Vue 인피니티 스크롤 컴포넌트 만들어보기
: 프로젝트에 사용하려고 했던 vue 인피니티 스크롤 컴포넌트가 vue3에서 지원을 하지 않아서 형태를 참고해서 직접 컴포넌트를 구현해 보았다.: 정말 간단하게 만들어서 그런지 컴포넌트가 유연하지 않다..부모 자식 컴포넌트간 통신하는 새로운 방법에 대해서 알게되었다기존
store 네 가지로 나눠서 사용하기
vuex를 사용할 때, index.js가 지나치게 길어져 코드의 가독성이 떨어지는 것을 방지하기 위하여 store의 index.js를 index.js, actions.js, getters.js, mutations.js 로 나눠서 사용하려 한다.우선 사진과 같이 acti
도넛 차트 플러그인(vue3)
좋은 플러그인이 있어 사용법을 소개한다.https://github.com/mazipan/vue-doughnut-chart우선 다운로드 해준다.컴포넌트를 사용하기 위해 다음의 코드를 원하는 vue 파일에서 작성한다.여기까지 하면 sass 관련 설치가 안되어 있어
권한에 따른 접근 허용
참고(https://jess2.xyz/vue/vue-tip/관리자 페이지에 manager 권한을 가진 유저만 접근할 수 있도록 만들려고 한다.어떤 컴포넌트의 create 시점에 하는게 아니라, vue router에서 자체적으로 이러한 기능을 제공한다.이를 네비
응답을 모두 로드하고 난 후 페이지 렌더링하기
Admin 페이지의 default 화면을 공지사항으로 해놨는데, Admin 페이지를 클릭하면 공지사항 관련한 모든 데이터가 로딩된 후 공지사항이 표시되도록 하고자 한다.이를 위해 router를 사용했다. 그 흐름을 되짚어보자.Admin 클릭Admin을 클릭하면 함수가
카카오맵 API 사용법(Vue.js)
카카오맵 API 사용시 지도가 잘려서 일부만 보이고, 화면 크기를 줄이거나 키우는 등의 작업을 하면 정상적으로 보이는 상황 발생, 이를 해결하는 과정을 담은 글
이중 라우터(router children)
상위 컴포넌트의 형태는 유지하고, 그 안에 자식 컴포넌트들을 보여주려고 할 때 사용하는 이중 라우터에 대한 설명
어쩌다 Vue
이전에 vue를 사용해본적 없다가 써보게 되었다. 지원했던 회사에서 과제 조건으로 vue아니면 jquery를 사용해서 설계하라고 했기 때문이다. jquery는 정말 어쩔수 없는 경우 아니면 배우기 싫기 때문에 vue를 선택하게 되었다. vue와 react의 차이나 vu
Vue.js #2 템플릿 문법(v-model, v-html, mustache)
화면을 구성해주는 👉 template실질적인 기능을 담당하는 👉 script화면의 디자인을 담당하는 👉 styleVue파일에서 변수처럼 작성해주기 위해서 export default안에 data라는 메서드를 작성해준다.data를 작성하는 방법1.data:()=>{}
Vue.js #1 시작하기
vue/cli 설치 해주기npm install -g @vue/clivue project 생성vue create vue-practice옵션선택(새로나온 vue3 연습)Default (Vue 3) (Vue 3 babel, eslint)설치가 다 된 다음 $ cd vue-p
vue3에서 전역 변수 선언하기
최근에 vue3으로 채팅 기능이 있는 웹을 만들고 있다. main.js에서 선언된 socket 인스턴스를 다른 컴포넌트에서도 쓸 수 있게 전역 변수로 두려고 했는데, 잘 안 되는 것이다. vue2에서 vue3으로 넘어가면서 워낙 업데이트가 잦다 보니 한참 구글링 하고 나서야 찾았다. vue3에서 전역 변수 선언하기 이 글에서의 vue 버전은 3.0.0이...
[Vue 3] Vue-CLI 4 설치방법
프로젝트를 설치할 폴더를 하나 생성 후,cmd에서 이동 후 설치하자.frontend 는 프로젝트 이름으로 원하는 걸로 바꿔서 설치하자.2번째 라인의 'Default (Vue3) (Vue 3 babel, eslint)' 선택이제 'http://localhost:
[Vue3] Vue 3 기초
Vue CLI로 생성한 Vue 프로젝트를 비교해보자.화살표 함수를 통해 함수를 정의할 수 있다.return 해주면 template 태그에서 접근이 가능하다.greeting 함수의 값을 greet에 저장하여 사용할 수도 있다.