팡이네

파이프를 변수에 넣어 동적으로 적용시키고자 할 때 사용

 

dynamic-pipe.ts

import { Injector, Pipe, PipeTransform } from '@angular/core';
import { NumberZeroPipe } from './number-zero.pipe';
import { StringZeroPipe } from './string-zero.pipe';

@Pipe({
    name: 'dynamicPipe'
})
export class DynamicPipe implements PipeTransform {

    public constructor(
        private injector: Injector
    ) {
    }

    transform(value: any, pipeToken: any, pipeArgs: any[]): any {
        // 사용할 pipe 선언
        const MAP = {
            'number0': NumberZeroPipe,
            'string0': StringZeroPipe,
        }

        if (pipeToken && MAP.hasOwnProperty(pipeToken)) {
            var pipeClass = MAP[pipeToken];
            var pipe = this.injector.get(pipeClass);
            if (Array.isArray(pipeArgs)) {
                return pipe.transform(value, ...pipeArgs);
            } else {
                return pipe.transform(value, pipeArgs);
            }
        }
        else {
            return value;
        }
    }
}

HTML

<ul>
    <li *ngFor="let item of list">
        {{ item.data | dynamicPipe: item.pipe : item.pipeOptions }}
    </li>
</ul>

TS

this.list = [
	{ data: 1000000.12345, pipe: 'number0', pipeOptions: 'limit: 2' },
	{ data: 2000000.12345, pipe: 'number0', pipeOptions: 'limit: 2' },
];

출처

http:// https://stackoverflow.com/questions/36564976/dynamic-pipe-in-angular-2/46910713#46910713

이름 정의 (엑셀: 수식 > 이름관리자)

HSSFWorkbook wb = new HSSFWorkbook();

//참조 sheet 생성
HSSFSheet sheet = workbook.createSheet("감면");
//참조 데이터 생성
...

//userName 이라는 이름 정의
String name = "userName";

HSSFName namedCell = wb.createName();
namedCell.setNameName(name);
namedCell.setRefersToFormula("감면!$A$11:$A$35");   //감면 sheet 해당 범위에 참조 데이터 존재
//또는
namedCell.setRefersToFormula("'감면'!$A$11:$A$35");

//이미 이름이 정의되어 있는 엑셀인 경우
FileInputStream file = new FileInputStream(new File("already.xlsx"));
HSSFWorkbook workbook = new HSSFWorkbook(file);
HSSFName namedCell = wb.getName(name);
...

 

이름 적용

//String name = "userName";
HSSFSheet sheet = workbook.createSheet("Test");
...
//CellRangeAddressList(시작 row index, 종료 row index, 시작 column index, 종료 column index);
//범위 설정 (1 ~ 10행, B열)
CellRangeAddressList addressList = new CellRangeAddressList(0, 9, 1, 1);

//데이터 유효성 검사 추가(엑셀: 데이터 > 데이터 유효성 검사)
DVConstraint dvConstraint = DVConstraint.createFormulaListConstraint(name);
DataValidation dataValidation = new HSSFDataValidation(addressList, dvConstraint);

dataValidation.setEmptyCellAllowed(false);      //공백무시
dataValidation.setShowPromptBox(false);         //설명 미표시
dataValidation.setSuppressDropDownArrow(false); //셀 선택 시 드롭다운 목록 미표시

sheet.addValidationData(dataValidation);

출처

https://kkani.tistory.com/entry/poi-HSSF-%EC%82%AC%EC%9A%A9%EC%8B%9C-Excel-DropDownListBox-%EC%82%AC%EC%9A%A9-%EC%98%88%EC%A0%9C

'Java' 카테고리의 다른 글

List 다중 컬럼 정렬  (0) 2021.05.21
날짜 관련 유틸리티  (0) 2018.10.23
JDK 8 인스톨 없이 설치하기  (0) 2018.10.20
사진 이미지 크기 변경 후 Base64 문자열 변환  (0) 2018.04.26
POI, Excel 셀 생성  (0) 2015.06.30

.html

tr 태그는 포커스가 가능한 태그가 아니기 때문에 tabindex 속성 필요

...
<tr #trOrder tabindex="0">
    <td>...</td>
</tr>
...

.ts

import { ElementRef, QueryList, ViewChildren } from '@angular/core';
...
@ViewChildren('trOrder') trList: QueryList<ElementRef>;
...
setFocus(index) {
    this.trList.get(index).nativeElement.focus();
}

typescript, angular

 

문자열 표시 파이프

//--------------------------------------
// 문자열 표시 파이프
//--------------------------------------
/**
 * 문자열 형식 표시
 * options {
 *     replace: %s를 문자열로 변환하여 표시,
 *     pre:  문자열 앞에 표시
 *     post: 문자열 뒤에 표시
 *     limit: 지정한 길이만큼 표시
 * }
 * 사용법)
 *     {{ null | string : { post: '년' } }} => null
 *     {{ '2021' | string : { post: '년' } }} => '2021년'
 *     {{ '2021' | string : { replace: '(%s년 리모델링)' } }} => '(2021년 리모델링)'
 *     {{ 25 | string : { replace: '(지상 %s층)' } }} {{ 8 | string : { replace: ' / 지하 %s층' } }} => '지상 25층 / 지하 8층'
 *     {{ 25 | string : { replace: '(지상 %s층)' } }} {{ null | string : { replace: ' / 지하 %s층' } }} => '지상 25층'
 */
@Pipe({ name: 'string' })
export class StringPipe implements PipeTransform {
    transform(value: number | string, options?: { replace: string, pre: string, post: string, limit: number }): string {
        if (value) {
            let result: string = null;
            if (options?.replace) {
                result = options?.replace.replace('%s', ''+ value);
            } else {
                result = ((options?.pre) ? options?.pre : '') + value + ((options?.post) ? options?.post : '');
            }
            
            if (options.limit && result.length > options.limit) {
                result = result.slice(0, options.limit) +'...';
            }
            return result;
        } else {
            return null;
        }
    }
}

List 다중 컬럼 정렬

Java2021. 5. 21. 08:55

List 에 대하여 다중 컬럼 정렬을 하고자 할 때

 

//
export class Test {
    String name;
    Integer age;
    Integer score;
}

List list = ...;

// 점수순으로 정렬
list.sort( (a, b) -> a.getScore().compareTo(b.getScore()) );

// 점수순, 나이순으로 정렬
Collections.sort(list, Comparator.comparing(Test::getScore)
            .thenComparing(Test::getAge));
//

출처

https://stackoverflow.com/questions/4258700/collections-sort-with-multiple-fields

 

Collections.sort with multiple fields

I have a list of "Report" objects with three fields (All String type)- ReportKey StudentNumber School I have a sort code goes like- Collections.sort(reportList, new Comparator<Report>() { @

stackoverflow.com

내림차순(역순) 정렬

public class TempDTO {

	private Integer order;
    private String name;
    ...
}

list.sort(Comparator.comparing(TempDTO::getOrder, Comparator.reverseOrder()));

typescript, angular

 

숫자 데이터가 0인 경우 -로 표시하기 위해 기존 number 파이프 대신 제작

 

/**
 * 숫자형식 표시
 * 데이터가 0인 경우 - 로 표시
 * options {
 *     digits: 소수점 이하 표시할 자릿수,
 *     unit: 값 뒤에 표시할 단위명,
 *     text: 값이 null 일 때 표시할 텍스트,
 * }
 * 사용법)
 *     {{ 0 | number0 }} => -
 *     {{ null | number0 }} => null
 *     {{ null | number0 : { text: '별도표시' } }} => '별도표시'
 *     {{ 1234.12345 | number0 : { digits: 2, unit: '원' } }} => 1234.12원
 *     {{ 1234.12 | number0 : { replace: '(%s㎡)' } }} => '(1,234.12㎡)'
 */
@Pipe({ name: 'number0' })
export class NumberZero implements PipeTransform {
    transform(value: number | string, options?: { digits: number, unit: string, text: string, replace: string }): string {
        if (value != null) {
            let num = null;

            if (typeof(value) === 'string') {
                num = Number(value);
                if (isNaN(num)) {
                    return null;
                }
            } else {
                num = value;
                if (isNaN(num)) {
                    return null;
                }
            }

            if (num === 0) {
                return '-';
            } else {
                if (options?.replace) {
                	return options?.replace.replace('%s', trunc(num, options?.digits));
                } else {
                	return trunc(num, options?.digits) + ((options?.unit) ? options?.unit : '');
                }
            }
        } else {
            return (options?.text) ? options?.text : null;
        }
    }
}

function trunc(number, digits) {
    const n = number + '';
    const pos = n.lastIndexOf('.');
    if (pos > -1) {
        if (digits == null) {
            digits = n.length - (pos + 1);
        }
        return parseFloat(n.substr(0, pos + digits + 1)).toLocaleString('en', { minimumFractionDigits: digits });
    } else {
        if (digits == null) {
            digits = 0;
        }
        return number.toLocaleString('en', { minimumFractionDigits: digits });
    }
}

경도, 위도 2개의 좌표로 사이의 거리 계산

//------------------------------------------
// 경도, 위도 2개의 좌표로 사이의 거리 계산
//------------------------------------------
getDistince(lng1: number, lat1: number, lng2: number, lat2: number, useKm?: boolean) {
	if ((lng1 == lng2) && (lat1 == lat2)) {
		return 0;
	} else {
		const theta = lng1 - lng2;
		let dist = Math.sin(this.deg2rad(lat1)) * Math.sin(this.deg2rad(lat2))
					+ Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) * Math.cos(this.deg2rad(theta));
		dist = Math.acos(dist);
		dist = this.rad2deg(dist);
		dist = dist * 60 * 1.1515;

		if (useKm) {
			dist = dist * 1.609344;
		} else {
			dist = dist * 1609.344;
		}

		return dist;
	}
}

deg2rad(deg: number) {
	return deg * Math.PI / 180.0;
}

rad2deg(rad: number) {
	return rad * 180 / Math.PI;
}

출처

https://fruitdev.tistory.com/189

이전에 작성했던 행정구역 표시 방법은

 

https://neopang.tistory.com/entry/%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-%ED%96%89%EC%A0%95%EA%B5%AC%EC%97%AD-%ED%91%9C%EC%8B%9Cshp-geojson

 

shp 파일을 이용하여 자신의 서버에 geojson 데이터를 올려두고

사용하고자 할 때 유용했지만 아래와 같은 단점이 있었다.

 

1. shp -> geojson 변환과정이 복잡

2. simplify 과정에서 맞닿아 있는 경계구역의 모양이 서로 맞지 않는 문제

3. 경계구역이 변경될 경우 유지보수 문제

 

이러한 문제점을 해결할 수 있는 오픈API가 있어서 소개한다.

 

공간정보 오픈플랫폼 오픈API 사용

 

https://dev.vworld.kr/

 

1. 회원가입 > 인증키 발급 > 이메일 인증

 

2. API 인증키 발급

회원가입 후 인증키 관리 메뉴에서 발급가능

https://www.vworld.kr/dev/v4dv_apikey_s002.do

 

3. 오픈API > 데이터 API 레퍼런스

https://www.vworld.kr/dev/v4dv_2ddataguide2_s001.do

 

분류를 '경계' 조회 -> 광역시도, 시군구, 읍면동, 리

 

광역시도

https://dev.vworld.kr/dev/v4dv_2ddataguide2_s002.do?svcIde=adsido

 

시군구

https://dev.vworld.kr/dev/v4dv_2ddataguide2_s002.do?svcIde=adsigg

 

읍면동

https://dev.vworld.kr/dev/v4dv_2ddataguide2_s002.do?svcIde=ademd

 

https://dev.vworld.kr/dev/v4dv_2ddataguide2_s002.do?svcIde=adri

 

경계구역 - 서울특별시 중구 태평로1가

(주의사항)

geojson 데이터에 bbox 값이 있을 경우

map.data.addGeoJson() 메소드 호출할 때 해당 위치로 자동 이동한다.

지도의 자동 이동을 원하지 않는다면 bbox 값을 삭제

버튼 클릭 시 테두리 및 효과 삭제

.btn { color: #fff; background-color: #fff; cursor: default; }
.btn:active, .btn:focus { border: none; box-shadow: none; }

/* 또는 */

.btn { color: #fff; background-color: #fff; cursor: default; }
.btn:active, .btn:focus { border: none !important; box-shadow: none !important; }

/* 또는 */

.btn { color: #fff; background-color: #fff; cursor: default; }
.btn:active, .btn:focus { outline: none !important; box-shadow: none !important; }

JSON 배열을 일종의 목록이라고 보고 특정 열 전체를 삭제하고 싶을 때 아래와 같이 간단하게 처리 가능

const arr = [
    {
        XXX: "2",
        YYY: "3",
        ZZZ: "4"
    },
    {
        XXX: "5",
        YYY: "6",
        ZZZ: "7"
    },
    {
        XXX: "1",
        YYY: "2",
        ZZZ: "3"
    }
]

// destructure 'YYY' and return the other props only
const newArray = arr.map(({YYY, ...rest}) => rest)

console.log(newArray)

[참고]

https://stackoverflow.com/questions/24770887/remove-key-value-pair-from-json-object