프론트엔드 (40) 썸네일형 리스트형 vue-grid-layout 아이템 이동시 배경색 바꾸기(placehold) ** 트러블슈팅 ** 목적 vue-grid-item 이동시 백그라운드로 표시되는 placehold 배경색을 바꾸려고 한다. 방법 해당 아이템의 class로 접근하여 원하는 옵션을 추가한다. 그후 important를 먹이면 기존 클래스의 옵션값이 무시되고 반영된다. .vue-grid-item.vue-grid-placeholder { background: rgb(0 151 255) !important; opacity: 0.1 !important; } 주의* SCSS 스코프 내에 선언할것. *참고링크 https://jbaysolutions.github.io/vue-grid-layout/guide/styling.html#placeholder div 태그 선택효과 주기 (focus, blur) div 영역을 클릭했을때 선택된듯한 시각적 효과를 주려고한다. 따라서 focus와 blur를 사용하고자 한다. * focus 이벤트는 요소가 포커스를 받을 때, blur 이벤트는 포커스를 잃을 때 발생한다. * 트러블 div 객체를 가져온 후 .focus() 메소드를 수행시켰으나 전혀 먹지 않았다. 그 이유는 다음과 같다. ** 대다수의 요소는 기본적으로 포커싱을 지원하지 않기 때문이다. 포커싱을 지원하지 않는 요소 목록은 브라우저마다 다르긴 하지만 한 가지 확실한 것은 , , , 와 같이 사용자가 웹 페이지와 상호작용 할 수 있게 도와주는 요소는 focus, blur를 지원한다는 사실이다. 반면 , , 같이 무언가를 표시하는 용도로 사용하는 요소들은 포커싱을 지원하지 않는다. 따라서 이런 요소엔 ele.. [Error] Uncaught (in promise) NavigationDuplicated 에러 해결하기 에러 프로젝트 라우터 이동시 콘솔에 다음과같은 에러가 발생했다. Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/test". 이는 같은 라우터로 router.push('path')를 하게될때 발생한다. 위의 경우는 /test 링크에서 /test로 이동하려 할때 발생하는 에러이다. 해결방법 1 $router.push()의 에러 예외처리가 되지 않아 기본으로 콘솔에 에러가 찍힌다. catch문으로 위 에러를 잡아주는 방법이 있다. this.$router.push('/') 에서 this.$router.push('/').catch(()=>{}); 로 catch만 추가해주면된다. 하지만 이방.. package-lock.json 이란 무엇일까? 프로젝트에서 미사용 패키지를 정리하면서 문득 package-lock.json이 정확히 어떤 역할을 하는지 궁금해졌다. 따라서 package-lock.json에 대해 정리해보려고 한다. package-lock.json 파일은 언제 생기는걸까? 새로운 패키지를 설치하면 package.json 파일에 해당 패키지의 버전 정보가 저장된다. package-lock.json은 mode_modules 폴더나 package.json 이 수정되고 생성될 때 자동으로 생성된다. package-lock.json 에는 의존성에 대한 정확하고 구체적인 정보를 담게된다. 즉, npm install 명령어를 수행할때 생성되는 파일인 것이다. 이렇게 package-lock.json 이 생성되면 npm install 명령어로 생성하는.. [ag grid] 키보드이벤트 제어하기, 선택 범위 재 지정하기 vue.js로 작업한 내용 기반으로, 전역변수 사용을 위해 this.를 사용하였다. 바닐라 js사용시 해당부분 참고하면 된다! 셀 내에서 ctrl + a 이벤트가 발생했을때 셀 전체선택이 아닌, 내가 원하는 범위를 재지정 해야하는 필요성이 있었다. 이를 위해 키보드이벤트 제어와 범위 재조정 API 가 요구된다. 1. 기본 옵션 셋팅 - gridOptions 기본 그리드 옵션 지정을 위해 gridOptions에 셋팅을 해야한다. defaultColDef라는 변수를 만들어 defaultColDef옵션에 해당 변수를 셋팅한다. this.gridOptions = { columnDef: this.columnDefs, rowData: this.rowData ... defaultColDef: this.defaultC.. [js] 이미지 404 에러 (img 404 error) 이미지 경로를 포함한 객체에서 경로를 못읽을때 발생하는 404 에러 해결방안이다. (나의 개발환경은 vue.js 이다. 객체를 v-for로 반복문을 통해 호출하고, 객체의 path 값을 이미지 경로로 사용하여 렌더링한다.) 상황 1. HTML 부분 (vue.js 의 template) 객체의 이미지 경로는 다음과 같이 호출하였다. 2. 사용 객체 let imgArr = [ { name: '테스트 이미지', path: '@/assets/img/my-img.png' } ] 호출 대상이 되는 객체는 다음과 같은 형태이다. 이때 빌드를 수행하면 아래와 같은 404 에러가 발생한다. 해결방안 에러의 원인은 다음과 같다. imgArr 배열의 path 값을 넘겨받을때 ('@/assets/img/my-img.png'),.. [javascript] 자바스크립트 구조분해할당 (직관적인 코드를 짜는법) 기본 선언방식의 아쉬운점 사실 로직을 짜다보면 가독성을 높이기 위해 변수를 선언하는 경우가 있다. 예를어 아래처럼 사용자 정보가 담긴 배열이 있다고 하자. (설명을 위해 복잡한 인덱스를 만들어보았다.) // 사용자 아이디 userInfoArr[0][1].userId[0]; // 사용자 이름 userInfoArr[0][1].userName[0]; // 사용자 주소 userInfoArr[0][1].userAddr[0]; 특정 값을 반복적으로 사용해야하는 경우가 있다고 할때 아래처럼 코드의 길이를 줄이고 가독성을 높이기 위해 명확한 뜻을 가진 변수명을 선언하곤 한다. const uInfo = userInfoArr[0][1]; uInfo.userId[0]; uInfo.userName[0]; uInfo.userA.. [javascript] 자바스크립트 소팅 sort() (큰수가 먼저 정렬되는 이유..?) sort() 란? sort 메서드는 배열의 요소를 정렬할때 사용하는 함수이다. MDN에서는 기본 구문을 아래와 같이 정의한다. arr.sort([compareFunction]) * 대괄호[] 는 괄호 안의 매개변수가 생략이 가능하다는 의미이다. 정렬의 경우 매개변수가 있을 경우와 없을 경우, 값이 다르게 출력되는 경우가 발생한다. 실제로 정렬 알고리즘을 풀면서 원하는 출력값이 나오지 않아 내용을 정리해보고자 한다. 10 이 2보다 먼저 정렬된다? 다음과같은 배열이 주어졌을때 sort 메서드로 정렬을 수행한 수 0번째 인덱스 값을 추출하려 한다. 2가 가장 작고, 7, 10 순으로 커지니 출력 기댓값은 2였다. 하지만 실제로는 10이 출력된다. 대체 왜일까? let sortArray = [7, 10, 2].. 이전 1 2 3 4 5 다음
