몽땅뚝딱 개발자

Vue3로 만들어진 프로젝트의 버그를 고치던 중 props로 넘긴 값을 할당하던 ref 변수의 값이 바뀌지 않는 현상을 발견했다. 동료에게 조언을 구하여 해결한 결과, 결론은 뿌려진 컴포넌트의 key값을 index로 설정해놨기 때문에 페이징하면서 넘어온 리스트는 다르지만 컴포넌트의 key가 동일하여 동일한 컴포넌트로 인식했기 때문이었다. 그래서 새로 create되는 것이 아니라 해당 컴포넌트에서 props 값만 바뀌었고 리렌더링 되지않기때문에 이미 할당된 값은 바뀌지 않았다....🤦🏻‍♀️ 어쩐지 리렌더링이 안되더라니....

에러 로 받은 file 변수에 forEach not a function 스크립트 에러가 발생했다. 타입이 Array가 맞고 length까지 찍어봤지만 동일한 문제가 생겼다. 해결 [전] handleUploadImage(e) { let inputFile = e.target.files let targetFile // 여기서 에러 발생..! inputFile.forEach((image) => { targetFile.push(image) }) } [후] 1. let → const 변경 2. 파일을 전개연산자로 받았다. handleUploadImage(e) { const inputFile = [...e.target.files] let targetFile inputFile.forEach((image) => { ta..

에러 params로 아무리 보내도 param이 전달되지 않았다. 원인 path로 보낸 것이 원인이었다. name으로 변경하자~ // 'name'으로 보내야한다. router.push({ name: 'CompName', params: { name: 'name' } }) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

에러 태그에 autofocus 속성을 적용하였으나 마운트 될 때 focus가 되지 않는 현상 autofocus processing was blocked because a document already has a focused element 원인 기존 창 위에 뜬 모달이라 이미 focus가 잡힌 엘리먼트가 있어서 생긴 에러이다. onMount() 할 때 해당 엘리먼트의 ref에 focus() 이벤트를 걸어주었다. onMounted(() => { nextTick(() => { if (InputRef.value) { InputRef.value.focus() } }) }) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

에러 다른 파일은 다 핫스왑이 잘 되는데 이 파일만 그렇게 되지 않았다. 시도해본 것: 1. 인텔리제이 설정에서 Advanced Settings의 Compiler의 저 옵션에 체크박스를 설정한다. 2. 기타 핫스왑이 가능하게하는 모든 인텔리제이 설정을 찾아보고 설정한다. 하지만 다 안됨..! 원인 뭔가 이상해서 빌드해봤는데 경로어쩌구~ 에러가 노출됐다.알고보니 해당 vue 파일들을 import하는 부분에서 소문자 경로로 지정해야하는데 대문자로 적혀있었다. 어제 하루죙일 핫스왑없이 다시 run하면서 힘들게 개발했는데....그래도 해결돼서 다행이다...^^! 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

에러 v-model cannot be used on v-for or v-slot scope variables because they are not writable. 이 에러가 떠서 고군분투했다. 기존에는 값을 하나씩만 넘기다가 이번 케이스에선 오브젝트로 넘겨서 양방향 통신을 했어야했는데ㅠ 고것이 문제였다. emit으로 update:value를 input, change 같은 온갖 이벤트로 다 넘겨보고 computed로도 감지해봤지만 몽땅 실패했다. 타입스크립트도 잘 모르고 Vue3도 잘 몰라서ㅠ 해결할 수 없을거라 생각했지만.... 해결은 됐다. 1. 인덱스를 명확히 지정해주자 이건 좀... 뭔가 말이 안되는 해결책이라고 생각이 들었지만.... 해보았고 역시나 안됐다.. 잘 돌아가는 for문에 item[i..

에러 Failed to resolve component: Label 원인 을 사용했어야했는데 로 오작성하여 생긴 문제이다. 없는 태그를 찾아서 생긴 오류...^^! 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

첫번째 시도 => 실패 1. package.json 삭제 2. node-modules 삭제 3. npm i 두번째 시도 => 성공 ㅠ 라우터 js에 언제 이런게 추가됐었을까... 저 부분 지우니까 잘 돌아간다... 아프지마.. (제발)

router에서 dispatch를 사용했을 때 modules를 찾지 못하는 에러가 떴다. store 모듈을 여러개로 분리해놓았는데 auth라는 이름을 가진 모듈만 접근하지 못했다. store를 콘솔로 찍어 확인해보니 다른 module은 '모듈이름/action이름'으로 확인되는데 auth는 그냥 'action이름'만 나오고있어서 namespace에 문제가 있다고 판단했고, 역시나 문제는 namespaced를 namespace로 잘못입력한 오타 때문이었다. (^^) 이런 실수는 더 이상은 naver..

에러 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible" 원인 결론부터 말하면 부모 컴포넌트에서 넘겨준 값을 자식 컴포넌트에서 props로 받은 상태에서 그 값을 자식 컴포넌트에서 변경하려고 할 때 생기는 에러이다. Vue의 데이터흐름은 '단방향'으로, 부모 -> 자식으로 넘겨주는 것은 가능하지만 자식 컴포넌트에서 값을 바꾸면 부모의 값이 변경되지 않는다. 따라서 자식에서 부모가 넘겨준 값을..