본문 바로가기
반응형

Development270

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.
[Tailwindcss] 클래스 그룹화 tailwindcss 를 사용하다 보면 현란한 유틸리티 클래스들에 눈이 쾡 해지는 경험을 하게 됬다. 생산성이 너무 좋은데 추후에 가독성이 떨어짐이 있었는데 보니 css 를 그룹화 할 수 있게 되었다. Before Blog Name JKUN.NET 이렇게 위와 같이 있으면 읽기가 빡씨다.. 그런데 이것을 그룹화 시키면 보다 더 구조화하고 가독성을 향상시키며 간단하게 사용할 수 있다. CSS @layer utilities { .table-basic { @apply min-w-full text-xs divide-y divide-gray-200 dark:divide-gray-700 } .table-basic thead { @apply bg-gray-50 dark:bg-slate-800 dark:text-gra.. 2023. 10. 18.
반응형