반응형 Vue34 window.opener 메세지 보내기 (부모창 함수 호출) 자식 창에서 데이터를 수정하고 난 후, 부모창에 데이터를 전달해야하는데 몰랐던 API 가 있었다. window.opener.postMessage 자식 창 (Child Window) window.opener.postMessage('parentWindowMessageSend', '*'); 부모 창 (Parent Window) window.addEventListener('message', (event) => { if (event.data === 'parentWindowMessageSend') { // action } }); 생각보다 개발하고 있는 Vue/Nuxt 기반 프로젝트 새 창을 띄우는 일이 많았다. 그런데 pinia/store 로도 데이터가 전달이 안되서 위와 같은 방식으로 해결을 해야했는데.. 일단.. 2024. 3. 23. TypeError: Cannot read properties of null (reading 'parentNode') Nuxt / Vue (Version 3 기준) 위와 같은 오류가 지속적으로 발생하는데 캡쳐모를 못해놓음. 일단 메세지는 위와 같음. 내용을 읽어보다 예전에 Nuxt/Vue 2 때 본 거 같아서 혹시나 해봤더니 역시나 였음;; 정확한 원인이 아닐 수 도 있지만 그때도 가끔씩 Vue 나 Nuxt 버전 업데이트때 생겼던 것 같아서 일단 정신건강상 개발규칙으로 해놓음. 코드 컨벤션 툴등을 이용하여 규칙화시키면 관리용이. 결국엔 NuxtLayout 컴포넌트 위에 루트 엘리먼트가 있어야 했던 것임. 추가적으로 관련 이슈가 github 에도 있다. 다양한 케이스가 있겠지만 위 코드로도 해결이 안되면 확인해보시길 2024. 1. 17. Vue3 / div 엘리먼트에서 contenteditable 을 반응형으로 Vue3 Composition API 기준으로 작성했다. 어쨌든 잘못된 기획으로 인하여 불필요한 코드를 작성했지만, 메모해둘 필요는 있는 듯 하여 포스팅을 한다. 특별한 건 없다. 코드 작성구조 및 방식만 메모해두는 거니 HTML (Template) Javascript (Vue.js 3 / Composition API) const editData = reactive({ origin: '', edit: '' }); const updateStyling = (eventTarget) => { editData.edit = eventTarget.innerHTML.toString(); }; @input 이벤트에서 target 까지만 함수 파라미터로 넘겨주어야 innerHTML 속성에 접근할 수 있다. 2024. 1. 12. Vue.js/Electron.js (Electron-Vue) 를 통한 개발환경 구성 Vue.js 와 Electron.js 데스크톱 어플리케이션을 개발하기 위한 환경을 구성해보려한다. UI Framework 는 Vuetify.js 로 하기로 한다... 익숙해짐인건가.. 가장깔끔;; 일단 진행해보자. * 그리고 사전에 기본적으로 필수사항을 확인한다. (Requirement : npm or yarn) 1. Vue CLI (제일먼저 Vue CLI 를 설치하고 버전을 확인해보자) "-g" 옵션이니 sudo (관리자 계정) 으로 설치하자. npm install -g @vue/cli vue --version 2. Create Electron App (Vue CLI 를 이용하여 프로젝트 생성) vue create MyProjectName 그럼 다음처럼 Vue.js 버전을 선택하라고 나오는데.. 이번 .. 2022. 3. 5. 이전 1 다음 반응형
