본문 바로가기
반응형

Development/Javascript | Vue.js17

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.
[Nuxt.js (Vue.js) + NginX Proxy] ERR_INCOMPLETE_CHUNKED_ENCODING Nuxt.js 기반으로 개발을 하다 크롬에서 보면 다음과 같은 메세지가... 참 보기가 짜증이 났었다. 꾸주우운히이 발생하는데 꽤나 거슬리는데 아직까지 정확한 원인이나 해결책은 못찾았다. 내가 해본 것은 아래 포스트들을 참고해 보았는데 해결되었다기 보다는 발생빈도가 현저하게 줄었다. 엔진엑스로 알아보는 리버스 프록시 안녕하세요 Mambo 입니다. 오늘은 웹 서비스 인프라에서 리버스 프록시 구성을 위해 사용되는 Nginx와 함께 리버스 프록시에 대해 알아보고자 합니다. NginxNginx는 정적 파일을 배포할 수 있는 HTTP 웹 kdevkr.github.io 위 포스트에서 "이벤트 스트림 프록시" proxy_buffering off; 서버설정에서 위 항목 추가. 그리고 추가적인 포스트로 보면 NginX .. 2023. 1. 18.
Vue.js - 슬롯(Slot) 존재여부 Vue.js 에서 컴포넌트를 다루는 작업에서 슬롯에 대한 존재여부 확인이 필요한 경우가 있다. 이에 Computed 로 슬롯존재여부를 다음과 같이 추적하면 된다. export default { name : 'example-component', computed : { hasDefaultSlot(){ // return this.$slots.default ? true : false; // !!this.$slots['default]; return !!this.$slots.default; } } } 2022. 3. 9.
반응형