본문 바로가기
반응형

Development271

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.
TailwindCSS SVG Icon 사이트 모음 찾기에 지쳐서, 정리를 해놔야지 겠다 싶었는데 이제서야 한다;; https://www.mingcute.com/ MingCute Icon _ Carefully Designed Icon Library www.mingcute.com https://remixicon.com/ Remix Icon - Open source icon library remixicon.com https://basicons.xyz/ Basicons Basic icons for product design & development basicons.xyz https://pixelarticons.com/ Pixelarticons 480 open-source line pixel-art style icons, in one color and made .. 2024. 1. 11.
반응형