initiallValue없으면? If initialValue is not specified, previousValue is initialized to the first value in the array, and currentValue is initialized to the second value in the array.
initialValue없고 대상array내 값이 1개뿐이라면?
뭘해도 [A] -> reduce(...) -> A 형태로 결과가 나옴, 즉 1개 있던 value가 array를 빠져나오게됨
@Description("MetaDataFile Download from Admin.")
@GetMapping
@PreAuthorize("hasRole('ADMIN')")
@RequestMapping("/api/admin/apiCallLog/{apiCallLogId}/file")
public ResponseEntity<?> getMetaDataFile(@CurrentUser UserPrincipal currentUser,
@PathVariable Long apiCallLogId) {
Map<String, Object> resultMap = new HashMap<String, Object>();
URL url = new URL(...어찌어찌해서 얻어옴);
InputStreamResource resource = new InputStreamResource(url.openStream());
resultMap.put("fileName", apiCallInfo.getFileName());
resultMap.put("resource", resource);
return ResponseEntity.ok().contentType(MediaType.parseMediaType("application/octet-stream"))
.header(HttpHeaders.CONTENT_DISPOSITION,
"attachement; filename=\"" + resultMap.get("fileName") + "\"")
.body(resultMap.get("resource"));
}
구현된 API call하는 부분
export async function getFileDownload(requestPath, requestMethod, rowData) {
await fetch(API_BASE_URL + requestPath, {
method: 'GET',
headers: getHeaders(),
})
.then(response => {
return response.blob();
})
.then(blob => {
const url = window.URL.createObjectURL(
new Blob([blob]),
);
const link = document.createElement('a');
link.href = url;
link.setAttribute(
'download',
rowData.fileName,
);//filename to be downloaded, it can be used as link.download=fileName
//link.style='display:none'; //OK it is not given
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);
})
.catch(err => {
alert('error')
});
}
BOM이란 문서 맨 앞에 눈에 보이지 않는 특정 바이트(byte)를 넣은 다음 이것을 해석해서 정확히 어떤 인코딩 방식이 사용되었는지 알아내는 방법을 나타냅니다. 자세하게 유니코드가 little-endian 인지 big-endian 인지 아니면 UTF-8 인지 쉽게 알 수 있도록, 유니코드 파일이 시작되는 첫부분에 보이지 않게, 2~3바이트의 문자열을 추가하는데 이것을 BOM이라고 합니다. BOM은 텍스트 에디터 화면에서는 보이지 않고, 헥사 에디터(Hex Editor)*로 열었을 때만 보입니다.
function extractBodyFieldKey(body, timeType, intl) {
let addUpDay = body.reduce( (acc, cur) => {
return acc.concat(cur);
});
addUpDay = sortByTimestamp(addUpDay);
return Papa.unparse(addUpDay.map(log => {
let eventTime = getTimeZoneTime(log, timeType);
let event = intl.formatMessage({id: util.eventLogMessageByCode(log.code)});
let userId = log.userKey;
let userName = log.userName;
let deviceDisplayName = log.deviceName;
return {eventTime, event, userId, userName, deviceDisplayName}
}))
}
[07-22 오전 11:30] 구본관: 저희 모카키도 그렇고 에어팝 포털도 그렇고 CSV 내보내기 할 때 대량으로 생성하게 되면 block 걸리는 경우가 발생합니다. 위에 이번에 변경된 UI도 파일작업을 할 때 동작을 멈추게 됩니다. addUpDay.map 이나 Papa.unparse 부분에서 시간이 굉장히 오래 걸리게 되는데 이때 렌더링이 멈추게 됩니다 대량으로 데이터를 처리할때는 비동기 방식으로 처리할 필요가 있습니다. 저희가 사용하는 papaparse 라이브러리를 보면 step 이나 chunk 같은 옵션들이 있습니다. 이번에 수정하려고 하는 것은 아니고 추후 개발에 참고하시면 좋겠습니다
-> 시간이 오래 걸려서 렌더링 멈춤? 상관없고 대량 데이터를 array로 한번에 처리해서 outOfMemory날뿐, 잘라서 처리해주면됨
<input> width:0으로 해도 변화가 없음 -> <input>의 기본 display:inline이라서 그런줄 알았으나 display:block이었음 -> input의 부모가 display:flex이고 선택된 tab들을 flex형태로 보여주는 데 이 경우 뭔가 제약이 있는 것 같음
UTF-8로 표현 가능한 길이는 최대 6바이트지만 다른 인코딩과의 호환을 위해 4바이트까지만 사용한다. 그래서 한 글자가 1~4바이트 중 하나로 인코딩될 수 있으며, 1바이트 영역은 아스키 코드와 하위 호환성을 가진다. 아스키 코드의 0~127까지는 UTF-8로 완전히 동일하게 기록된다. 어차피 유니코드는 U+10FFFF까지만(10진법으로는 1,114,111) 이용하는데, UTF-8은 아래에 나와 있듯이 가변 바이트 길이를 선언하기 위해 꽤 많은 비트를 잡아먹고도 2,097,151까지 인코딩할 수 있기 때문에 4바이트만으로도 충분하고도 남는다.
axios
fetch
써드파티 라이브러리로 설치가 필요
현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호를 해준다.
별도 보호 없음
data 속성을 사용
body 속성을 사용
data는 object를 포함한다
body는 문자열화 되어있다
status가 200이고 statusText가 ‘OK’이면 성공이다
응답객체가 ok 속성을 포함하면 성공이다
자동으로 JSON데이터 형식으로 변환된다
.json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다.
해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음
기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함
지원하지 않음
좀더 많은 브라우저에 지원됨
Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원
