EventListener를 제대로 붙였음에도 Scroll Event의 Handler가 제대로 호출이 안되는 버그를 수정하고, 그에 대해 정리하고자 합니다. Problem 바로 코드를 보자. import { defineComponent, onMounted, ref } from "vue"; export default defineComponent({ setup() { const scrollTop = ref(0); function scrollHandler() { console.log("scrollHandler has been triggered!") } onMounted(() => { document?.getElementById("content")?.addEventListener("scroll", scrollHa..
Vue
분명 경로가 잘 설정 되어 있음에도 사진처럼 에러가 떴다. 정확한 에러 메시지는 아래와 같았다. An import path cannot end with a '.ts' extension. Consider importing '../utils/useMouse.js' instead. 해결방법은 간단했다.(참조링크) import할 때 ts를 빼고 import를 하니 정상적으로 작동하였다.
Vue에서 페이지를 이동 시킬때, 정상적으로 기능은 작동하더라도, 위와 같은 에러가 발생하는 경우가 있어서, 어떻게 해결했는지 공유해보고자 합니다. 원인 vue-router github의 답변을 보면, router.push 함수는 Promise 객체를 리턴하므로, 만약 navigation failure에 대해 catch를 제대로 해주지 않는다면 위와 같은 에러가 발생한다는 것이다. (왜냐하면, promise rejection을 catch해주지 않았기 때문이다.) 하지만, 이런 navagation failure은 항상 일어나게 된다. 말이 조금 어려웠다. 예를 들어 설명해보자. 1. 나는 현재 A페이지에 있고, B페이지로 가는 버튼을 클릭했다고 해보자. (여기에서 B페이지로 이동하는 함수, goToB()를..
VSCode를 이용하여 Debugging을 하려고 하는데, 내가 설정한 breakpoint가 디버깅 모드만 들어가면 아래 사진처럼 unbound breakpoint로 바뀌면서 저 자리에서 멈추질 않았다. 문제는 launch.json파일에서 file mapping이 잘 되지 않아서 였다. 아래처럼 적용을 하니 정상적으로 작동하는 것을 볼 수 있었다. // launch.json { "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "name": "vuejs: chrome", "request": "launch", "url": "https://localhost:9090/", "breakOnLoad": true, "webRoot": "${worksp..
vue 프로젝트를 진행하면서 vuetify, element UI 같은 library를 사용 할 때가 있다. 이때, 기존에 만들어진 컴포넌트의 스타일을 재조정(override)하는 것에 어려움을 많이 겪었는데, 그것을 극복할 수 있는 방법에 대해 정리해보고자 한다. 스타일 적용이 안되는 상황 분명 .el-input__inner라는 클래스임을 확인하고, 아래 처럼 스타일을 적용 했을 때 스타일 적용이 제대로 되지 않는 것을 확인 할 수 있었고, 이 포스트는 이를 해결 하는 방법에 대한 내용이다. //someComponent.vue //... 문제의 원인 이러한 현상의 원인은 scoped라는 키워드 때문이다. scoped라는 키워드를 넣게 되면, 해당 컴포넌트에만 스타일이 적용이 된다. 즉, scoped라는 ..
정상적으로 작동은 하지만, 콘솔창에 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length') 라는 에러가 발생하였다. 어떻게 해결 할 수 있었는지 알아보자. Problem 위 에러가 의미하는 바는 명확하다. 화면을 렌더하려고 하는데 undefined, 즉 아직 정의되지 않은 속성을 읽으려고 하고 있다는 뜻이다. 아래의 간단한 예시 코드를 통해 알아보자. 아래의 코드를 처음 렌더할 때 info.someProperty는 아직 undefined된 상태 이므로, 에러가 발생하게 될 것이다. {{info.someProperty}} ////////...///// data(){ return { info:..
