전체 글
[JAVASCRIPT] recude 반복 중지 break 하기
서론 개발하면서 자주 사용하던 reduce를 쓰면서 반복을 중지할 때가 간혹 있는데 그것을 정리하고자 한다. 데이터 let reduceList = [...this.items]; let checkData = reduceList.reduce((acc, obj) => { // 5번째 데이터를 가져오는 조건 if(obj.value === 5) { acc = obj; reduceList.splice(1); } return acc; }, {}); 확인 사항 1. 기준되는 items를 깊은 복사하여 reduceList 생성 2. reduceList 를 reduce 하여 조건 체크 3. 조건에 맞을시 reduce 반복을 break 하기위해 splice를 사용하여 reduceList 길이를 1로 핸들링(ex. reduc..
[VUE] router - history에 따른 scroll 제어를 위한 scrollBehavior 사용법
서론 vue 개발을 하면서 스크롤 이슈가 자주 나온다. 그걸 해결하는 방법은 여러가지 있지만 이번엔 scrollBehavior 를 이용하여 제어하는 방법을 정리하고자 한다. 파일위치 상대경로 : src\router\index.js 소스 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, // history back 일시 이전 스크롤 위치 이동 / 신규 페이지는 스크롤 top scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } }) 소스 설명 rou..
ag grid vue button in cell
서론이번 프로젝트에서 ag grid를 사용하여 여러 기능을 하면서 정리하고자 한다 소스 { filed: 'click', headerName: '클릭테스트', width: 200, cellRenderer: () => { return `click test`; } } cellClicked(params){ // 클릭한 cell 필드명으로 체크 if(params.colDef.filed === 'click'){ alert('click!!'); } }그리드 옵션 정리 api.sizeColumnsToFit(); // 좌우 스크롤 생기거나 여백이 생기지 않게 width에 맞춰서 컬럼 width가 자동으로 맞춰짐 api.setColumnDefs(dolumdefs) //컬럼 정보를 다시 set한다.(header 정보 변경시..