익명의 개발노트

vue tooltip 라이브러리 중에 vuetify를 제외하고 쓸만한 라이브러리가 v-tooltip 밖에 없는 듯... 1. 설치 npm install --save v-tooltip 2. 글로벌 등록 //main.js import Vue from 'vue' import VTooltip from 'v-tooltip' //추가 Vue.use(VTooltip); //추가 new Vue({ router, store, render: h => h(App) }).$mount('#app') 3. 스타일 적용하기 공식문서에 일반 css 와 pre-processor 방식인 sass, less 방식이 있다. 공식문서에는 자세히 안나와 있어서, 전역 스타일 안에다가 아래 코드를 넣었는데 작동하지 않았고, 개발자 도구를 열고 ..

npm 패키지에는 kakaomap 쓸만한 것도, 인기있는 것도 생각보다 없다. 기존에 카카오맵 가이드를 보면 api key 부분을 헤더나, 스크립트에 넣어서 코드가 실행되기 전에 먼저 실행을 시켜주어야 한다. 아래 코드는 맵 불러오는 코드가 불러오기 전에 api키를 html 헤더에 넣고, 맵을 불러오게 한다. 입력해야하는 api키는 https://developers.kakao.com/접속 후 어플리케이션 하나 생성하면 메인화면에 아래와 같은 정보가 뜨는데 앱정보를 누르면 각종 api키를 확인할 수 있다. 여기서 자바스크립트 키를 입력하면 된다. initMap과 addScript에 콘솔을 찍어보면 addScript -> initMap 순으로 찍힘을 알 수 있다. Vue 타입스크립트 kakaomap에 대한..

input 태그를 이용하여 입력된 값 바인딩하는 경우 영어는 문제가 없는데, 한글이나, 중국어, 일본어의 경우에는 바인딩이 늦게 된다. 일반적으로 Vue에서는 v-model을 이용하여 바인딩을 시키는데, input 안에서 모델을 이용하여 바인딩 시킬 경우 아래 그림과 같이 CJK는 한템포 늦게 반영이 된다. 이와 같은 사항을 보완하기 위해서는 input태그에서 @input or v-on:input을 이용하여 바인딩하면 실시간으로 입력값에 대해서 바인딩 받을 수 있다. 아래와 같은 코드로 바인딩하여 사용한다.

Vue에서 router 주소를 /login/type 등등으로 이어서 사용하고자 할때가 있다. 그럴때는 nested router 를 사용한다. nested router는 router 기능 중 children을 사용하는 것으로 써, 주소로 표현하고자 하는 최상단 컴포넌트는 반드시 를 가지고 있어야 보여줄 수 있다. index는 최대한 간단하게 만 써주는 게 좋다.(다른 코드있으면, 그 코드까지 랜더링된다) Index.vue router.js에서 아래와 같이 작성을 한다. //router.js { path: '/login', name: '', component: () => import(/* webpackChunkName: "" */ '../components/views/Index.vue'), //최상위 컴포넌..

토글 버튼이나, 탭기능 구현을 함에 있어서 코드를 최대한 적게 쓰고 싶어서. for문을 이용하여 리스트를 만들고 탭 이름을 뿌려줬다. 클릭하면 html에서 클릭한 부분만 클래스 네임이 하나 더 추가되서 이벤트효과를 따로 부여했다. {{item.title}} 위 코드에서 클래스 추가하는 부분에 클릭하면 active 이름이 추가로 붙는다. (item.id 값이랑 선택한 것이랑 일치하면 클래스 명이 추가되도록 했음) tabMenuList는 아래와 같이 이루어져 있으며, 부모컴포넌트로부터 Prop으로 넘겨받는다. 별도의 파일로 만들어져 빼서 사용했다. //util/tabList.js export const storageBox = [ {title:'내 테마', id:'my_theme'}, {title:'좋아요',..

이메일 형식을 입력하면 버튼이 파란색으로 활성화 되고, 수정하여 이메일 형식이 아니면 버튼이 회색으로 바뀌는 기능 구현 중 리랜더링이 안되는 현상에 대해 적어본다. 우선 input 값을 입력하면, 해당 입력값은 Vuex 로 저장이 되며, 부모 컴포넌트에서 Vuex에 있는 값을 불러와서 사용한다. 버튼이 파란색까지는 변하는데, 그 후 Input 창의 내용을 수정하면 버튼이 회색으로 돌아오지 않았다. Vuex까지는 데이터가 들어가는데, 부모컴포넌트에서 리랜더링이 되지 않았다. 라이프싸이클도 확인해 본 결과, 파란색 버튼이 된 경우까지만 작동하고, input창의 내용을 수정하면 라이프싸이클도 작동하지 않았다. 콘솔에는 nextTick 에러만 뜨고... 우선 Vuex내에 state 값을 객체형식으로 구현했는데,..

위와 같이 통상 하단부 네이게이션 바를 특정 컴포넌트에서 안보이게 하고 싶을 때 처리하는 방법. 글로벌로 보이게 처리하려면 app.vue에서 등록을 해주면 어떤 라우터를 타고 들어가든 해당 컴포넌트를 볼 수 가 있다. 특정 컴포넌트에서 안보이게 처리는 어떻게 할까? //app.vue App.vue 컴포넌트에서 특정 url일때, 해당 컴포넌트를 안보여주면 된다. 위 소스 코드 처럼, 라이프싸이클 부분에서 url을 파싱하여, 해당 url일때 v-if를 통한 분기처리를 해주면 해결된다.

1. 파일마다 태그 상단에 /*eslint-disable*/ 주석을 단다. 2. vue-cli 공식문서에서 lintOnSave 검색 => 제일 바깥에 vue.config.js 파일만들고 아래 사진과 같이 설정해준다. 3. Script단에서 components: { ToolBar } import한 후 template 단에서 라고 사용해도 되고(strong한 방법), 식으로 사용해도 된다. 두번째는 mac 기준으로 option버튼 누르고 클릭하면 해당 컴포넌트파일로 바로 이동가능하다. vscode자체 기능.(essential 한 방법)

프론트단 Vue 프레임워크인 Vuetify, 백엔드는 노드 js를 사용하여 파일 업로드 구현하기. 1. 프론트사용 라이브러리 : Vue-filepond 2. 백엔드 라이브러리 : multer 결론은 단순히 Vue-filepond와 multer 라이브러리 간의 호환이 안된다....(우회하는 방법은 있는 듯 하나..) 통상 Node.js에서 사용하는 이미지저장 라이브러리는 multer를 주로 사용한다. 사용하기가 편하다. 단순히 폴더 저장, 메모리저장, 디스크 저장 기능이 있어서 사용자 입맛에 맞게 사용가능하며, AWS S3를 위해서도 자주 사용하는 라이브러리이다. Vue-filepond는 드래그앤 드랍부터 커스터마이징 기능이 굉장히 많으며, 업로드하면 자동(multipart/form-data) 으로 서버로..

1. 깃 stash 깃 stashing은 작업 중에 깃의 변동사항으로 pull을 받거나 갑자기 push를 할 경우에 내가 현재 작업하고 있는 내용을 커밋하는게 아니고 로컬에 잠시 저장하는 기능이다. 에디터에서도 stash기능을 지원해준다. stash를 할때는 메세지를 입력하게 되어있고, 나중에 꺼내올때 이 메시지를 기준으로 꺼내온다. git stash //로컬에 저장 git stash pop //저장된거 꺼내기 git stash list // stash에 저장된 목록 보기 stash를 한 후에 git status를 보면 기존에 작업하고 있던 값들이 보이지 않을 것이고, pop을 하면 보일 것이다. 2. 이미 깃에 노드 모듈이 올라가있는 경우. 윈도우, 맥-리눅스 포함하여, 노드 모듈이 다르다. 운영체제 ..