Language
-
React/InfiniteScroll - 외부 collectionLanguage/React 2022. 12. 2. 09:49
InfiniteScroll을 공통으로 사용하기 위해서 Component형식으로 만들고 나중을 위해서 정리해 둔다. InfiniteScroll Component 외부에 collection을 두고 사용하는 방식 부모 컴퍼넌트 import React, { Component } from 'react'; ... class RequestViews extends Component { state = { infiniteResetUseEffect: false, // Infinite 외부에서 리스트를 초기화 해줘야 할 경우 변경 requests: [], ... }; fetchMoreList = (offset) => { return new Promise((resolve, reject) => { const pagination ..
-
React/InfiniteScroll - 내부 collectionLanguage/React 2022. 12. 2. 09:47
InfiniteScroll을 공통으로 사용하기 위해서 Component형식으로 만들고 나중을 위해서 정리해 둔다. InfiniteScroll Component 내부에 collection을 두고 사용하는 방식 부모 컴퍼넌트 import React, { Component } from 'react'; ... class RequestViews extends Component { state = { infiniteResetUseEffect: false, // Infinite 외부에서 리스트를 초기화 해줘야 할 경우 변경 requests: [], ... }; fetchMoreList = (offset) => { return new Promise((resolve, reject) => { const pagination ..
-
React/RadioButton Component 만들기Language/React 2022. 12. 1. 10:15
Radio component가 마땅한게 없어서 급조해 봤다. Parent Component import React, { Component } from 'react'; ... class UnitViews extends Component { ... render() { ... return ( { const checked_unit_status = value === '' ? null : [value]; this.setState({ unitStatus: value }, this.props.onUpdate({ UNIT_STATUS: checked_unit_status })); }} /> ... ... ); } } export default wrapWithBase(UnitViews); RadioButton Compon..
-
React/X-Bar chart 만들기Language/React 2022. 12. 1. 10:08
챠트를 만들어야 하는데 마땅한게 없어서 만들어 보았다. (x,y chart는 간단하니깐!) 데시보드 import React, { Component } from 'react'; ... class DashboardTab1 extends Component { ... render() { const receiptStatusCounts = { PAY_COMPLETE_AMOUNT: 50.0, PAY_COMPLETE_COUNT: 2, PAY_FAIL_AMOUNT: 3.0, PAY_FAIL_COUNT: 1, PAY_WAIT_AMOUNT: 7.5, PAY_WAIT_COUNT: 1, payCompletePercent: 50, payFailPercent: 25, payWatePercent: 25, }; const styleB..
-
React/DropdownSearch 만들기Language/React 2022. 12. 1. 09:54
간단한 검색이 가능한 dropdown을 만들려고 한다. css .g-dropdown-search-wrap { position: relative; } .g-dropdown-search-wrap > .search-section { display: flex; justify-content: flex-start; align-items: center; } .g-dropdown-search-wrap > .search-section input { width: 100%; padding: 12px 8px; border: 1px solid #D9D9D9; } .g-dropdown-search-wrap > .search-section input:focus { border: 1px solid #25B9B9; } .g-dropd..
-
JAVA/StreamLanguage/Java 2022. 11. 29. 15:25
Map List 검색 List payCompleteList = new ArrayList(); payCompleteList.add(new HashMap() {{ put("RECEIPT_YM", "202207"); put("aaa", "aa1"); } }); payCompleteList.add(new HashMap() {{ put("RECEIPT_YM", "202210"); put("aaa", "aa2"); } }); Set receiptYearMonthSets = new HashSet(); payCompleteList.forEach(e -> receiptYearMonthSets.add(e.get("RECEIPT_YM"))); System.out.println(receiptYearMonthSets.conta..
-
JS/자주쓰는 scriptLanguage/Java Script 2022. 10. 28. 14:27
기본 데이터 const items = [ {id: 0, name: 'name0'}, {id: 1, name: 'name1'}, {id: 2, name: 'name2'} ]; const tempItem = { id: 1, name: 'name1' }; findIndex let newItems = [...items]; const findIndex = newItems.findIndex((x) => x.id === tempItem.id); newItems[findIndex].name = '테스트'; Object.values & filter const result = Object.values(items).filter((item) => { if (item.id === tempItem.id) { return true..
-
React/moment 사용 탐방Language/React 2022. 10. 21. 11:44
앞으로 자주쓸것 같기도 하고 한번에 분석 끝내놓고 나중에 찾아보는 시간을 줄이기 위해서 작성해 둔다. module 추가 $ yarn add moment https://yarnpkg.com/package/moment https://yarnpkg.com/package/moment Fast, reliable, and secure dependency management. yarnpkg.com 기본 사용 방법 import moment from 'moment'; ... console.log(moment().format('YYYYMMDD')); console.log(moment().subtract(1, 'days').endOf('day')); ... 예시) diff 예시 const diffDaysToText = (c..