킹바구니 🦜

Message compilation error: Invalid linked format Message compilation error: Unexpected lexical analysis in token Message compilation error: Unexpected empty linked key 이런 메세지들이 뜨면서 안되기 시작했는데 알고보니 특수문자는 별도로 처리를 해줬어야했음. 1. 특수문자 앞뒤로 {''} 붙여주기 // 틀림 const string = "특수문자 !,@,#,$를 넣어주세요."; // 맞음 const string = "특수문자 {'!'},{'@'},{'#'},{'$'}를 넣어주세요."; 이렇게 해주면 되는데 꼭 따옴표(쌍따옴표 말고)로 써야함! https://github.com/..

vuex에서 getters, mutations를 작성한 후 각종 파일에서 store 변수를 활용하여 써놓은 함수를 불러오는데, 만약 위와 같은 에러가 나타난다면 두가지를 확인해봐야함. 1. namespaced 유무 const state = { // ... } const actions = { // ... } export default { namespaced: true, // 여기 state, actions } 2. 모듈화 되어있다면 이름을 써주었는지 확인 // index.js import user from "./user.js"; export default createStore({ modules: { // 이런식으로 모듈화 되어있다면 user, } }); // user.js const states = { n..

가끔 v-for를 돌리면서 필요한 부분을 차례대로 ref에 넣어줘야할 때가 있음(일일히 ref="input1"이렇게 설정하는게 아니고). 이걸 dynamic ref라고 하는데 아래와 같이 넣을 수 있음. 1. ref에 함수 사용 {{ item }} // script 쓰는 부분 const divs = ref([]); // 이부분을 활용하여 업데이트될때 꼭 리셋해줘야한다고 함 onBeforeUpdate(() => { divs.value = []; }); 이러면 divs에 순서대로 착착착 들어감. 참고로 약간 뭐 이런식으로 좀 nested하게 넣고싶다면 [ [el, el], [el, el], ] 따로 함수를 빼서 이렇게 적용해도 된다. {{ item }} const divs = ref([]); onBefore..

보통 부모의 함수를 자식에서 쓸수있는 방법은 많이들 나오는데, 자식의 함수를 부모가 쓰는건 잘 찾아도 안나오고~ 찾아도 내가 쓰는 setup function버전으로는 안나와서 또 허공주먹질하다가 밥먹고오니까 갑자기 머리가 돌아가서 발견함. vue는 기본적으로 vue2, vue3(근데 setup function), vue3(근데 setup script) 이렇게 방법이 나뉘다보니 그거 찾느라 시간이 더 걸리는거같음... 1. setup function 버전에서 쓰는법 setup() { const active = () => { // something } return { active // 한번 return을 해줘야함 } } 자식 컴포넌트는 이렇게 있는데 일단 해당 함수를 return해줘야함 setup() { c..

router를 활용하여 다른 페이지로 이동하면서 데이터를 보내는 방법이 있는데 배가 아파서 정리해보았음. 1. 동적으로 보내기 // 기본 router.push('/user') // name으로 보내기 [2] router.push({ name: 'user' }); // params와 함께 보내기 [3] router.push({ name: 'user', params: { userNo: 1 } }) 특히 [2]번과 [3]번은 라우터에 아래와 같이 별도로 name을 정해줘야한다. { path: "/user", name: "user", component:() => import("@/views/user/user.vue") } 여기서 주의할것은 [3]의 경우(params이랑 보낸거) 이런 경고창이 뜨게된다. 연결된 ..

child component에 어떤 데이터를 전달해서 화면에 띄우는데, 저 데이터가 db와 통신 후 들어오는 거라면 시간차가 발생하기때문에 child에서 watch를 써서 나중에 값이 들어오면 전달해줬었음. 근데 markRow로 child component를 화면에 띄웠더니 잘되던 watch가 안먹혀서 열심히 찾아보다가 해결함. 1. watch함수 변경 // 기존 watch(props, (n, o) => (user.value = props.data)); // 변경 watch(() => { if (props.data) { user.value = props.data; } }, callback()); --- vue에서 markRow가 뭔가 싶다면 아래 포스팅 확인! [vue3] child component를 ..

가끔 상황에 따라서 같은 태그에 변수값을 넣어야할때가 있음. 나같은 경우 10%라는 값을 나타내기 위해 span에 style로 width: 10%를 줬어야했는데 그럴때는 이렇게 쓰면 된다. 1. 따옴표 안에 백틱쓰기 안에 들어가는 completionRate는 ref변수라서 style앞에 :붙여줬음

actions에 promise를 반환하는 함수가 있고, 그걸 dispatch로 받아서 데이터 요청을 하고 있었는데 죽어도 비동기가 안되길래 찾아봤는데 for문으로 하면 되더라. 이유는.. 몰러... // 원래 하던거 let promises = arr.map((m) => await store.dispatch("user/add", userNo)); // 바꾼거 let promises = []; for (let i = 0; i < arr.length; i++) { let p = await store.dispatch("user/add", userNo)); promises.push(p); }; await Promise.all(promises).then()

예를들어 주기적으로 변하는 값이 있는데 이 값은 부모한테서 받아오고, 출력은 자식에서 하는데 값이 변한다는걸 인지해서 자동으로 바꿔줘야할때가 있음(예: 파일업로드 할때 몇퍼센트 되었는지 계속 찍어줘야할때) 1. 전달할 ref에 데이터 넣어주기 (부모) const num = ref(0); // 계속 값을 전달해주는 함수에서 // percent라는 값을 줘야할때 num.value = percent 일단 부모는 그냥 평범하게 써줌. 2. computed로 받기 (자식) const props = defineProps({ num: Number }); let computedNum = computed(() => props.num.toFixed(2) * 100); 중요한것은 나는 보통 새로운 변수에 props로 받아온..

단순히 v-for를 돌려서 같은걸 보여주는게 아니라 컴포넌트를 보여줘야했음. 그리고 순서도 랜덤으로ㅇㅇ 1. 문제 만약에 html에 미리 이렇게 써놓고 숨겨놨다고 한다면, my2 다음에 my1을 보여주고 싶어도 무조건 저기에 써놓은 순서대로 my1이 위에있고 my2가 밑에 있게됨. 2. 컴포넌트를 넣어주는 방법 html에 와 그 안에 :is라는 요소를 넣어줌(:item은 그냥 데이터 전달용 props). 그리고 markRaw로 감싼 컴포넌트를 :is의 값으로 전달해주면 된다. 3. 컴포넌트를 넣어주는 방법(여러개) 위에꺼랑 다를건 없고 v-for를 추가해주고 여러 컴포넌트를 넣어주면 된다. --- 참고로 markRow로 넣은 component에서 watch가 안먹힐 경우 아래 포스팅 확인! [vue3] ..