Ellen's Web Note

react에서 List 무한스크롤을 처리하는데, reacvt-virtualized를 사용하면 리스트에 사용되는 컴포넌트의 렌더링 관리가 가능하다. 기능 설명은 아래에. https://ellen92.tistory.com/56 [React] 컴포넌트 성능 최적화 2500개의 리스트를 출력한다고 가정할 때 기본적인 코드는 아래와 같이 작성하게 된다. import { useState } from "react"; function setArray() { const array = []; for (let i = 1; i { console.log(clientHeight); console.log(clientWidth); return( )}} ) 특정 이벤트에 스크롤을 적용하려면, 스크롤이 움직이는 동안 scrollHeig..

2500개의 리스트를 출력한다고 가정할 때 기본적인 코드는 아래와 같이 작성하게 된다. import { useState } from "react"; function setArray() { const array = []; for (let i = 1; i { const [arr, setArr] = useState(setArray); return ( {arr.map((obj, idx) => ({obj.num}))} ); }; export default App; 화면에는 10개의 데이터만 보이지만 실제로 2500개의 리스트가 한번에 렌더링되고, 불필요한 렌더링이 반복되면 프로그램이 느려지게 된다. 이럴 때 불필요한 리렌더링을 방지하는, 성능을 최적화하는 작업이 필요. 컴포넌트가 리렌더링 되는 경우는, 1. 전달..

아래의 query로 읽으면 된다. 리스트 전체를가져와 1부터 번호(idx)를 매기고, idx를 조건으로 가져오는 방법. select * from (select row_number() over (order by idx)as sn, * from table ) data where sn between #{start_sn} and #{last_sn} sql.xml파일. select * from (select row_number() over ) data where sn between #{start_sn} and #{last_sn} (order by idx)as sn, * from table 페이징처리도 하지만 동일한 리스트를 엑셀파일로 다운받는 경우, 부분출력 또는 전체 출력도 해야하기 때문에 start_sn과 l..

리스트를 전달하기 위해 검색을 많이 해봣지만대부분 리스트타입을 리스트 타입으로 넘기거나, json을 json으로 넘기는 경우가 많았다. 내 경우 리스트와 함게 string타입의 다른 파라미터도 같이 넘겨 db를 타는 경우가 많기 때문에파라미터타입을 map으로 주로 사용을 한다. 아래의 경우 파라미터 타입을 HashMap으로 사용하는 경우이다. [script]리스트를 json타입으로 변환해준 후 ajax를 통해 controller로 전달var dataParam = {list:JSON.stringify($scope.lists), param1:'param1', param2:'param2'};$.ajax({type : 'POST', dataType : 'json', data: dataParam,url : url..

$scope.item = "abc"; 이면jsp 에서 {{item}}으로 출력 가능 맵 활용$scope.list = [];$scope.list[key][value] = 'abc' 로 map.set과 같은 기능 리스트 해당 컬럼의 필드 하나만 수정하는 경우var list = data;angular.forEach(list, function(key, value){var color = '#000000';if(list[value].num == 4) color = '#0000ff';else if(list[value].num == 5) color = '#ff0000';list[value]["color"] = color;})$scope.items.lists = list;

js에서 세션은 별도의 선언 없이 sessionStorage를 이용sessionStorage.setItem(key, value); 세션에 json으로 받아온 리스트를 저장할 경우sessionStorage.setItem(data.barcode, JSON.stringify(data)); 세션값 받아오기sessionStorage.getItem(key); 세션삭제sessionStorage.removeItem(key); 참조 : https://webisfree.com/2016-06-24/[자바스크립트]-localstorage-sessionstorage-클라이언트에-정보-저장