킹바구니

ionic 아이오닉이라고 안드, 아이폰같은 동작을 지원하는 웹앱 툴킷인데(react, vue같은 웹 프로젝트를 앱 형식으로 말때 사용), 제스쳐를 사용하고 싶은데 gesture.enable()만 하면 자꾸 아래와 같은 오류가 떠서 짜증났는데 답은 다음과 같다. 아니 공식예시문서에는 마운트 코빼기도 안보이더니~~~~~ Cannot read properties of undefined (reading '__zone_symbol__addEventListener') 1. onmounted 이후 작성 const viewRef = ref(); onMounted(() => { const gesture = createGesture({ el: viewRef.value, onMove: (ev) => onMoveHandler..

Failed to resolve component: swiper-slide Failed to resolve component: swiper-container swpier.js는 vue, react 버전 가이드를 따로 제공하는데 그대로 따라하다가 어느순간 보니 해당 버전들은 앞으로 버전에서는 삭제될테니 web component 형태로 쓰라고 하더라. 근데 자꾸 저 경고창이 뜨는데다 구글에서는 방법도 안나와서 발동동하다가 찾아냄. 1. vite 설정 변경 export default defineConfig(({ mode }) => { return { plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === "swiper-..

원래 공식문서에서는 swiper.slideNext() 이렇게 쓰면 된다는데 안되는 이유가 뭘까 vue3이라서 그런가 아무튼 다른 방법을 찾아보았음. 1. swiper에 ref 걸어서 swiper가져오기 다음 const swiperRef = ref(); const slideNext = () => { // ref요소를 탐색해서 메소드 호출 swiperRef.value.$el.swiper.slideNext(); };

class 이름을 그냥 쓰거나, 변수로 넣거나, 조건을 걸거나 하는 경우가 있는데 헷갈려서 정리를 해보았음. 추가될 수 있음 1. 기본 그냥 html에 대놓고 쓴다면 쌍따옴표 안에 써주면 된다. 2. 변수 변수라면 중괄호 안에 써주면 된다. 나같은 경우 module.scss를 style이라는 이름으로 import했기에 className에 { style.container } 이렇게 써줌. 3. 기본 + 변수 조합버전은 중괄호 안에 백틱을 넣고 변수는 달러중괄호를 써서 써주면 된다. 아니면 조건문같은 경우 이런 방법도 있다. + 좀 더 고차원적인 방법 const classProperties = { "main-class": true, // 일반 string인 경우 styles: true, // 변수인 경우 }..

next.js에 손을 조금 대보기로 했다. 그런 의미에서 기본적인 설치부터 scss 및 폰트 적용하는 방법까지 정리하겠음. 1. 설치 npx create-next-app@latest 터미널에 입력하면 폴더 이름 뭘로 할건지, 타입스크립트 쓸껀지 물어보는데 알아서 선택해서 엔터엔터해주면 된다. 2. 실행 npm run dev 3000번으로 실행이 된다. 3. scss 설정 npm install --save-dev sass 깔아주고 그냥 scss파일 하나 만들어서 쓰고 해당 컴포넌트에 가서 import해서 써주면 된다. 3-1. 여러 scss 파일을 하나로 설정 및 공통 css로 만들기 하지만 보통 공통 css가 있기때문에 적용하는 방법을 설명해보자면, 기본적으로 생성되어있는 styles 폴더에 각종 scs..

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..

예전에 외주업체에서 퍼블파일을 받았는데 아무리 기다려도 안열리고 그나마 live server와 같은 vscode 익스텐션으로 여니까 좀 떴던 적이 있었는데 이유는 1. 파일 내 태그 및 스크립트 확인 안녕하세요 제목 3번은 앞에 https:붙여줘야함. 아니 진짜 본인들 작업하면서 못느끼나....

가끔 작업하다보면 focus가 어디에 있는지 확인해야할때가 있는데 이럴때 브라우저에서 제공하는 기능이 있음. 1. f12 - console - 눈모양 아이콘 클릭 document.activeElement 그리고 이렇게 그냥 써주면 된다. 이건 엣지인데 어느 브라우저든 된다!

api를 날려서 데이터를 return받는 함수를 만들었고 이 함수의 실행값(=데이터)를 변수로 받으려했는데 자꾸 저렇게 뜬다면 await를 썼나 확인해주면 된다. 1. await 확인 const setInfo = async () => { const data = await getInfo(); // await 썼나 확인 }