킹바구니

다른건 없고 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가 메인이라 이클립스는 잘 안쓰는데 요새 조금 볼일이 있어 자주 들리다보니 폰트가 영 마음에 안들어서 이것저것 깔아보다가 한번 정리해야지 싶어서 정리함. 캡쳐처럼 기본경로에 들어간 다음 해당 폴더([basic])에 있는 메뉴명(text font)를 더블클릭해서 설정하면 된다. 1. 기본 경로 window - prefencse - general - appearance - colors and fonts 이곳에서 화면에 있는 폰트를 수정함. 2. 설정창 간략 소개 메뉴 검색은 [이름 검색창]이라고 되어있는 부분에서 하면 된다. 폰트 변경 후 apply를 눌러주고나서 한번 쭉 보고 마음에 안들면 reset을 눌러 초기화해주면 된다. + xml 폰트 변경 얘는 똑같이 기본경로에 들어가서 structur..

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

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

scrollTo은 element에 붙어있는 기본 메소드로 스크롤의 위치를 옮겨줌. 근데 이상하게 이동을 안해서 30분 동안 고생좀 하다가 찾아냄. 기본 기능 // 1. 좌표형 scrollTo(x좌표, y좌표) // 2. 옵션형 scrollTo({top: 250}) // y좌표 scrollTo({left: 250}) // x좌표 scrollTo({top: 250, behavior: "smooth"}) // 같이 쓰는 애니메이션(smooth, instant, auto) 이건 그냥 이렇게 쓴다고ㅇㅇ 1. 안먹힐때 const html = document.querySelector('html'); const div = document.querySelector('.page'); html.scrollTo({top: d..

보통 부모의 함수를 자식에서 쓸수있는 방법은 많이들 나오는데, 자식의 함수를 부모가 쓰는건 잘 찾아도 안나오고~ 찾아도 내가 쓰는 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이랑 보낸거) 이런 경고창이 뜨게된다. 연결된 ..

작업하다보니 어느순간 tsconfig.json은 건들지도 않았는데 이름이 빨간색이고, 오류를 보아하니 '~~구성 파일에서 입력을 찾을 수 없습니다' 라고 떴음. 안그래도 다른 오류도 있어서 이거때문인가 싶었는데 찾아보니 별개였고 다행히도 이거는 껐다 켜주면 됐었음. 1. vscode 껐다 켜기 역시 콤퓨타는 때리거나 껐다 켜거나 ㅎㅅㅎ 여기 다른 방법도 있으니 참고 https://velog.io/@heony/tsconfig.json-input-error tsconfig.json 구성 파일에서 입력을 찾을 수 없습니다. tsconfig.json 파일에서 발생한 `구성 파일에서 입력을 찾을 수 없습니다.` 오류를 해결하기 위해 노력한 과정입니다. velog.io

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

이놈의 라이브러리는 왜케 간단한것도 바로바로 안나오는지 모르겠다 진짜 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..