[ag-grid] ag-grid cell에 값이 나타나지 않는 문제 해결하기
·
과거의 이력/[그리드] ag-grid
에러내용 ag grid에서 headerName이 '컬럼명'인 컬럼에만 편집모드 옵션을 활성화했다. 그랬더니 필드값이 그리드상에 그려지지 않는 문제가 발생하였다. 셀을 클릭하여 편집모드를 활성화해보니 값을 가지고는 있으나 랜더링이 되지 않는 문제가 발생됐다. 해결방안 기본 그리드는 렌더러를 수행해야한다. 따라서 셀 렌더러(cellRenderer)로 파라미터값을 렌더링함으로써 해결할 수 있다. // 예시 let columnDefs = [ { headerName: 'No', field: 'id' }, { headerName: '컬럼명', field: 'columnName', cellRenderer: (params) => { return params.value } }, ] 참고링크 : https://stacko..
[javascript] 객체에서 마지막 인덱스 찾는법 (findIndex 뒤에서부터 적용하기)
·
과거의 이력/javascript
특정 조건을 만족하는 인덱스를 뽑아야 한다. 배열을 대상으로 할 경우 lastIndexOf() 를 사용하면 쉽게 찾아지지만, 배열안에 객체형태로 되어있는경우는 예외이다. 만약 다음과같은 데이터를 가진 arr 변수가 있다고 할때 나는 name이 jeongmin인 객체의 마지막 인덱스을 구하고싶다. let arr = [{ 'name': 'jeongmin', 'job': null }, { 'name': 'kim', 'job': 'dancer' }, { 'name': 'lee', 'job': 'actor' }, { 'name': 'jeongmin', 'job': 'developer' }] 해당 경우에 만약 아래 로직처럼 findIndex를 사용하게 된다면 조건을 만족하는 첫번째 값을 반환한다. let first..
[javascript] Converting circular structure to JSON (JSON 형태 배열 로그 찍는법)
·
과거의 이력/javascript
에러 발생 원인 이벤트 발생 객체를 콘솔로그로 확인해보려고 하니 >> [objdec Object] 로 출력되어 헤당 내용을 확인할 수 없었다. 떄문에 JSON.stringify 형태로 로그를 확인하려 하니, 선회하는 구조를 JSON 구조로 아래와같은 에러가 발생하였다. 해결책 for in을 사용하여 해당 객체의 콘솔로그를 확인할 수 있다. 나는 키와 밸류를 모두 확인하고자 다음과 같은 로그로직을 짰다. for (let node in event) { console.log(JSON.stringify(node) , ' : ' , JSON.stringify(event[node])); } for in 과 for of의 차이는 여기를 참고! https://pro-jm.tistory.com/50 [javascript..
Vue.js 자식에서 부모로 데이터 전송하기 (객체 일부값만 변경하는법)
·
과거의 이력/Vue.js
부모 컴포넌트에서 데이터 바인딩을 통해 자식 컴포넌트로 데이터를 전달한다. (v-bind 디렉티브 사용!) 자식컴포넌트에서 데이터 변경이 발생시 v-on으로 선언된 함수로 데이터를 전송해 변경할 수 있다. 이때, 객체의 일부값만 변경하고싶다면 Object.assign 을 활용할 수 있다. 1. 부모에서 자식으로 데이터 전달하기 /* 부모컴포넌트 */ /* 자식컴포넌트 */ 위와같은 구조일때, 부모 컴포넌트에서 item 이라는 변수를 자식컴포넌트(child)에 바인딩 하였다. 자식컴포넌트에서 해당 데이터를 전달받아 아래의 방식으로 부모에게 전달할 수 있다. 2. 자식 컴포넌트에서 데이터 변경 후 부모로 전달하기 /* 스크립트부분 */ export default { props: ['item'], method..
[정렬] 선택정렬 자바스크립트로 로직 구현!
·
과거의 이력/기본개념 (손필기)
선택정렬을 javascript로 구현해봤다. 1. 선택정렬 로직 (js) function selectSort(arr) { for(let i=0; i 1, 2, 3, 4, 5
[알고리즘] 배열과 연결리스트의 차이? (Array vs Linked List)
·
과거의 이력/기본개념 (손필기)
배열과 연결리스트 자료구조 알아보기! 연결 리스트(Linked List) 란? 링크드 리스트 라고도 한다. 메모리를 동적으로 사용가능하다. 데이터 재구성이 용이하다. 대용량 데이터 처리에 적합한 자료구조이다. 노드(Node)로 구성되어 있으며 노드 두개의 셀이 있는데 첫번째 셀에는 실 데이터가 있으며 두번째 셀에는 다음 노드의 시작 메모리 주소를 뜻하는 링크가 들어있다. (자료의 주소값으로 연결된 구조) 마지막 노드의 두번째 셀에는 Null값을 가진다. (마지막 노드이기 때문에 다음 노드의 링크가 없기떄문!) 노드가 서로 이웃하지 않기 때문에 각 노드의 위치를 바로 검색할 수 없다.(첫 노드부터 순차탐색 해야함) 배열이란? 배열은 크기가 고정적이다. 연속적인 메모리공간이 필요하기 때문에 최대 데이터 개수..
[빅오표기법] 빅오표기법이란? (Big O notation)
·
과거의 이력/기본개념 (손필기)
. 개발자로써 알고리즘을 짜야하고, 누군가가 만들어놓은 알고리즘을 자주 사용한다. 과연 그 알고리즘은 빠른 알고리즘일까? 이것을 평가하기위한 지표가 빅오표기법(Big O notation) 이다. 1. 빅오표기법이란? 상단에서 언급했듯 빅오표기법은 알고리즘이 얼마나 빠른지를 나타내는 표기법이다. 실제로 대문자 O를 사용하기에 빅.오. 표기법이라고 한다.(정말로..!) 빅오표기법은 '초' 와같은 시간단위로 속도를 세는것이 아니라 연산 횟수를 비교하기 위한것이다. 따라서 연산양이 많아질때 알고리즘에 걸리는 시간이 어떤식으로 증가하는지 알 수 있다. 2. 예시 100개의 원소를 가진 리스트를 단순탐색과 이진탐색을 각각 수행한다고 해보자. 이진탐색은 7밀리초가 걸리고 단순탐색은 100밀리초가 걸린다. 해당 결과로..
[알고리즘] 이진탐색(binary search) 기본개념 + js코드
·
과거의 이력/기본개념 (손필기)
240,000 개의 값이 있을때 단순탐색은 최대 240,000번 추측해야하지만, 이진탐색은 최대 18번의 추측으로 정답을 찾아낼 수 있다. 크기가 커질수록 단순탐색과는 비교도 안될정도의 빠른속도로 정답을 찾아낼 수 있다. 단, 이진탐색은 원소들이 정렬되어 있어야만 사용할 수 있다. javascript로 구현한 이진탐색 function binarySearch (target, dataArray) { let low = 0; let high = dataArray.length - 1; while (low target) { // 추측값이 정답보다 클 경우 high = mid - 1; } else { // 추측값이 정답보다 작을 경우 low = mid + 1; } } return undefined; } 단순탐색과 이..