작업 노트

props는 팝업, 모달, component 등등 추가로 필요한 화면에 값을 전달 하기 위해서 사용 합니다. 처음 아 .... 도대체 어떻게 해야 저어어어창에대가 값을 전달 하지 ㅡ.ㅡ 하고 고민 하고 예제를 찾아서 구글링을 했던게 기억이 나네요 일단 간단하게 a.vue에서 b.vue에 값을 전달 하고 전달 받아 보도록 하겠습니다. 일단 전 a.vue와 b.vue를 만들었습니다. a.vue에서 b.vue를 modal처럼 띄우려고 합니다. a.vue 모달 띄울꺼임 자 이렇게 하면 일단 b.vue내용이 우리가 알고 있는 modal처럼 보일 겁니다. 하나하나 찾아보죠 1. b.vue 를 import를 한다음 components에 해당 이름을 넣어주고 template안에 태그()를 넣어 줍니다 해당 태그는 자동..

안녕하세요 이번엔 router에 대해서 이야기 해보겠습니다. 다들 알고 계시겠지만 roter는 폴더 만들고 js파일 하나 만들고 조건에 맞게 설정하면 문제 없이 진행 가능 합니다. 그런데 플잭 중에 스크립트 안에서 router를 호출 해야 할 상황이 있어 방법을 적어 볼까 합니다. 더보기 let router = this.$router router.push({name: 'contentmetainput'}) 간단하죠? 처음 Vue개발을 시작 하고 이런거 하나 찾는게 어찌나 힘들 던지 ㅋㅋ 지금은 아니지만 여러분에게도 도움이 됐으면 좋겠습니다. 아!! 추가로 해당 페이지의 url정보를 알아오는 방법도 기술 하도록 하겠습니다. let url = window.location.href 내 ㅡ.ㅡ 엄청 쉽습니다. 하..

오늘은 Vue Tree를 만들어 보도록 하겠습다. 컴포넌트로 만들어서 어디서든 가저다가 사용 가능 하도록 구성하였습니다. 트리 구성할때 구글링으로 여러곳을 찾아서 해보았지만..... npm으로 설치를 하여 세세한 동작들을 마음대로 하지 못해서 답답 했습니다. 일단 제가 CSS에 대한 지식이 부족하므로 디자인적인 것은 .... 다중에 퍼블님들에게 요청하시고 그럼 시작 하겠습니다. 구성으로는 TreeView.vue > msf-tree.vue > msf-tree-item.vue로 구성 하였습니다. 다른 의미는 없고 각각의 역활을 맡도록 하기 위해 구성 했습니다. 파일명 조회 일단 TreeView.vue입니다. data에 contentTree에 그림과 같이 구성이 되어야 합니다. 중요하게 생각하셔야 할 것은 c..

프로젝트를 하면서 Vue와 Spring Boot를 이용하여 구성을 하였다 restful server와 연결 잡업을 하기 위해서 개발 셋팅을 하고 있는데 ㅡ.ㅡ server는 8880으로 port를 설정하고 vue node server는 8800으로 셋팅 후 테스트를 하는데 ㅡ.ㅡ 계속 CORS 오류가 발생을 하는 것이다 ㅡ.ㅡ 아 열받아 ......ㅋㅋ 해결책은 바로 Vue Config파일에 더보기 module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { "/api": { target: 'http://localhost:8880', changeOrigin: true, secure: ..

ctx.drawImage(a, b, c, d, e, f, g, h, i) a:Background의 Image경로 b: a이미지의 보여줄 x좌표 c: a이미지의 보여줄 y좌표 d:0이면 이미지가 안나옴 e:0이면 이미지가 안나옴 값을 올리면 zoom기능 d를 높이면 이미지 가로가 길어지고 e를 낮추면 이미지 하단이 내려감, 1940, 1350 f:프레임 x위치시점 g:프레임 y위치 시점 h:화면에 보이는 widht i: 화면에 보이는 height h,와 i의 경우 처음 시도 할때는 이렇게 적용 했을때 canvas의 property에서 WIDTH와 HEIGHT를 가져 올때 defult값을 가지고 와서 고생을 했다. 이때 console.log를 찍어서 property를 확인해보면 clientWidth 와 cl..

Attribute Value Description columnDefs 칼럼정보 정의된 칼럼 정보를 넣어줘야 합니다. rowData [{key:value]} 그리드 데이터, json data를 넣어 줘야 합니다. defaultColDef 기본정의 공통 기본 정의 rowSelection 'single' or 'multiple' row data를 선택하는 경우의 옵션으로 하나만 선택하거나 복수개를 선택할 수 있습니다. enableColResize true | false 칼럼 리사이즈 허용 여부 enableSorting true | false 정렬 옵션 허용 여부 enableFilter true | false 필터 옵션 허용 여부 enableRangeSelection true | false 정렬 기능 강제여부,..

위 그림을 보자 정말 어렵게 생각했다... 우리가 javascript를 사용했을 때 필요한 부분 다 안에서만 접근이 다 되는 게 아니다 그냥 해당. vue화면에서 다 접근이 가능하다. 이게 중요했다. Vue화면에서 그냥 다 접근이 가능하다 이런 생각을 가지고 소스를 한번 살살 살펴보면 어떻게 해야 할지 감이 올 것이다. 다음엔 Vue에서 태그에 대해 끄적여 봐야겠다.

1. 구글창을 띄운다. 2. Vue Hellow World로 검색한다. 3.그냥 다 나온다. ㅋㅋ vue cli설치했고 webpack도 설치 했다 설치와 hellow world를 찍는건 정말 너무나도 쉽다. npm이 알아서 다 해주니까 하지만 이 다음부터다 내가 고심했던건 정말 아주 사소한 부분이었으니까 처음 부터좀 알려주면 안되나 싶어서 적어본다. 자 보자 제일 고민 했던게 처음에 router? 이건 뭐야 y/n 뭘 선택 해야 하지 router저거 Y안하면 나중에 src밑에 폴더 설치하고 js파일 만들고 손이좀 간다 ESLint y/n 나중에 알았는데 아 이거 했을때 짜증나 죽는줄 알았다... 띄워쓰기 부터 시작해서 막말고 // 이거 쓰는 것까지 아주 그냥 소스품질 체크 하는건데 적응 하기 힘들었다....