내 생각의 한계를 절실히 깨달은...오늘... 나는 가져오는 데이터 list를 감지하는 watch의 listRows에서 조건 걸 생각만 했다. 그래서 this.$router을 쓰려고 했다. router는 페이지 접속 될 때마다 데이터를 감지하니까... 근데 선임분께서 listRows를 다른 곳에서 하는 게 좋겠다고 말씀하시더니 paramsInit()에서 조건을 걸었다. 가령 이런 식이다. paramsInit() { // 여기서 들어오는 데이터를 맵핑해준다 let result = {} // 1. 들어오는 데이터의 id 값 여부 체크(맨 처음엔 선택된 값이 없으므로 id = null) if (this.data.id === null) { result = this.list.find(v => v.active ==..
문제의 발단 기존의 데이터 list를 보여주는 multiselect가 존재하는 페이지가 있다. 데이터를 신규 등록하는 버튼을 만들고, 신규 등록 중인 상태를 취소하는 버튼을 만들었다. 신규 등록을 취소하면 store에서 api 호출로 데이터를 새로 받아오도록 하고 싶었다. 그래서 아래처럼 적었다. onCancelClick () { // 취소 버튼 클릭 시 this.actList({ params: this.params, menuAuth: this.checkMenuAuth('authList') }) } // actList라는 action 실행 그리고... 가져오는 데이터(객체)에는 active: true 인 항목이 있었다.(활성화 여부) 화면에는 active 값을 변경시켜주는 radio가 존재하고(true ..
매일매일 써야하는데 코드에 치이다가...일단 틈틈이 노션에 정리해둔 거라도 올려본다. 처음 본 라이브러리라 간략하게 기록해놓고자 한다. 공식 문서 Vue-Multiselect | Vue Select Library. Probably the most complete selecting solution for Vue.js, without jQuery. vue-multiselect.js.org 기본 옵션은 다음과 같다. multiselect( v-model="value", :options="options", :searchable="false", :close-on-select="false", :show-labels="false" placeholder="Pick a value" ) options 같은 경우 boots..
환경 변수로 설정한 token 값을 넣으면 토큰이 유효하지 않다는 에러가 떴다. 근데 직접 발급받아 넣으면 잘 작동했다. 알고보니 내가 엉뚱한 값을 계속 고치고 있었음 환경 설정 Current Value 수정해야함!
어젠 멀쩡히 인식 되다가 오늘 키니 갑자기 vue 파일만 highlight가 적용이 되지 않았다.(js 파일은 정상적으로 표시됨) 구글링하다가 Extensions을 아예 지우고 재설치해보라는 답변을 봤다. Extensions 파일 위치는 다음과 같다.(링크 참고) Windows %USERPROFILE%.vscode\extensions Mac ~/.vscode/extensions Linux ~/.vscode/extensions 나같은 경우엔 재설치해도 상태가 변함 없었는데, Vetur Extensions가 깔려있지 않은 걸 확인해서 설치했더니 잘 표시되기 시작했다. 요약 1. Vetur Extensions 설치 확인 2. Extensions 폴더 삭제 후 재설치
현재 내 노트북에 Edukit을 연결하고 SmartConnector를 실행하여 mqtt를 이용해 데이터를 publish 하고 있다. 근데 내 기기에서 publish한 데이터를 같은 네트워크 내의 다른 노트북에서 subscribe로 받아오질 못하고 있었다. 방화벽의 인바운드 아웃바운드도 추가해보고...했으나 어디선가 막혀서 데이터가 넘어가질 못했다. cmd로 찍어도 보고 docker로 실행도 해봤으나 subscribe는 묵묵부답이었다. 그런데 다른 성공하신 팀원분께 여쭤보니 방화벽을 그냥 끄셨다고 하여 방화벽을 그냥 껐다. 그랬더니 데이터가 잘 넘어갔다. 단순히 방화벽을 해제하는 것으로는 야기될 문제가 많겠지만...이건 더 알아봐야 할 것 같다.
클릭 가능한 오브젝트에 마우스 호버 시 마우스 포인터가 클릭 가능한 걸 인지하도록 변경하는 기능을 추가했다. src/js/example.js container에 test 아이디를 불러와서 hover 함수의 조건문에 style을 추가했다. addEventListener 또한 doucument가 아닌 container에 추가하는 것으로 수정했다. /* raycaster 형식 클릭 이벤트 */ let container init() function init() { container = document.getElementById('hover') } // 중략 function hover(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1 mouse.y =..
3호기 클릭을 인식하게 하기 위해 마우스 커서가 3호기(오브젝트) 위에 있으면 색이 변하는 효과를 구현 했다. src/js/example.js 팀원분의 도움으로 클릭 이벤트를 참고하여 구현했다. // 중략 // hover 효과 function hover(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1 mouse.y = -(event.clientY / window.innerHeight) * 2 + 1 raycaster.setFromCamera(mouse, cameraElement) const intersects = raycaster.intersectObjects(scene.resource.obj.children, true) //array //..
