킹바구니

특화된 드래그/회전 기능 등을 제공하는 라이브러리임. 화면에 뭔가 드래그&돌아가는걸 구현했어야해서 이걸 캔버스로 해야하나 싶었는데 다행히 라이브러리가 있었다. 참고로 보니까 한국인이신듯?? 아무튼 어떤 요소를 드래그나 회전을 열심히 하다가 reset버튼을 눌렀을 때 원래대로 돌아가게 하고 싶다면 아래와 같이 설정하면 된다. https://daybrush.com/moveable/ Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! daybrush.com 1. reset하기 const reset = () => ..

swiper의 webcomponent를 활용하여 슬라이드를 구현하고 있었는데 슬라이드 앞뒤이동 버튼 색만 변경하려고하는데 !important를 줘도 아무리 안먹어서 뒤져보다가 정리함. 1. injectStyles 활용 먼저 html태그 swiper-container에 ref를 설정해주고 init값을 false로 둬야함. 그리고 watch에 ref가 들어왔을때 위와 같은 코드를 넣어주고 initialize()를 해주면 잘 적용된다. 참고로 onMounted는 안먹히니께 주의! 이게 공식 설명서에 있긴한데 묘하게 빠진 부분이 있어서 안먹힌단말이지..

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

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

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

다른건 없고 css로 제어하는 것이 방법. 1. css 만들기 .ell { .ag-cell-wrapper { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } css가 길어서 일부러 클래스로 따로 만들어서 적용하기로 함. 참고로 ag-grid에서 글이 .ag-cell-wrapper > span에 있길래 한번 더 저렇게 자세하게 써줌. 2. 클래스 붙여주기 columnDefs: [ { headerName: "댓글 내용", field: "replyText", cellClass: ["left", "ell"], // 클래스 추가 }, ] 그러면 이..

vscode 익스텐션중 하나인 prettier는 코드를 가독성 좋게 정렬해주는 기능을 가지고 있는데, 기본값 그대로 쓰면 캡쳐와 같은 사단이 벌어지게 됨. 길어도 한줄로 나왔으면 한다면 이렇게 설정해주면 됨. 일단 설정창(컨트롤+쉼표해서 prettier검색)에서 설정하는 방법과 옵션값으로 설정하는 방법이 있는데, 설정창에서 아래와 같이 설정해도 전혀 안먹혀서 방법이 없는줄 알았는데 옵션으로 설정하면 되더라. [옵션값으로 설정] 1. .prettierrc 이라는 파일을 폴더 내에 생성 일할때는 이것만 빼고 커밋하면 된다. 2. 옵션값에 이렇게 설정 { "printWidth": 3000 } 한줄로 정렬이 되서 아주 좋다. 인터넷에 prettier 설정 이라고 치면 정리가 잘된 포스팅이 나오기때문에 참고하면 ..

이놈의 라이브러리는 왜케 간단한것도 바로바로 안나오는지 모르겠다 진짜 1. enableBrowserTooltips 추가 여기서 header에 주고싶다면 2-1. headerTooltip 추가 { headerName: "아이디", field: "userId", headerTooltip: "(아이디=이메일 주소임)", }, 아니면 cell에 주고싶다면 2-2. tooltipValueGetter 추가 { headerName: "이름", field: "userName", tooltipValueGetter: function (params) { return params.data.fullName; } }, https://www.ag-grid.com/javascript-data-grid/column-properties..

vue3에서 쓰는 에디터인데 module을 붙이는 과정에서 위와 같은 경고창이 자꾸 뜸. 에러는 아니다만 거슬려서 한참을 찾아서 겨우 없앴는데 문제는 다른 에러([Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.)가 생기긴함.. 아직 방법 못찾음.. 1. debug 값 변경 import { QuillEditor } from "@vueup/vue-quill"; QuillEditor.props.globalOptions.default = () => { return {debug: 'error'} }; ..

ag grid는 기본적으로 왼쪽 정렬임. 이걸 사진처럼 바꾸는 방법은 여러가지임. 1. columnDefs에 개별입력 (추천) 2. css로 제어 3. 공통으로 지정 (추천) + 클래스 삭제 + 클래스 추가(여러개) 1. columnDefs에 개별입력 (추천) { headerName: "회원구분", field: "grade", cellStyle: {textAlign: "center"} // 여기 }, cellStyle에 쓰는 방법은 카멜형식 또는 "대시형식"으로 쓰기 예) { cellStyle: { justifyContent: "center" } cellStyle: { "background-color": "red" } } 장점 - 원하는 셀만 제어가 가능 단점 - !important 적용이 불가능 - 모..