반응형

ECMAScript 2024

웹개발 시 유효성 검사 등으로 Object Array의 중복값을 알아내서 사용자에게 경고해주는 기능을 만드는 경우가 있다.

이를 예시로 만든 자바스크립트 코드이다.

let arr = [
	{
    	year: '2024', 
    	name: '가철수'
	},
	{
    	year: '2024', 
    	name: '나철수'
	},
	{
    	year: '2024', 
    	name: '다철수'
	},
	{
    	year: '2024', 
    	name: '다철수'
	},
	{
    	year: '2024', 
    	name: '라철수'
	}
];

let dup = [];
let check = arr.reduce((acc, cur) => {
	if (objFound = acc.find(accItem => accItem.year === cur.year && accItem.name === cur.name)) {
		dup.push(cur);
	}
	else {
		acc.push(cur);
	}
	return acc;
}, []);
     
// console.log("check: ", check);
console.log("dup:", dup);   // {year: '2024', name: '다철수'}

개선하는 방법이 있으면 댓글 부탁드립니다..

reduce.. find.. filter.. map.. set..

공부를 더 열심히 하자..... ㅜㅜ

 

도움을 받은 곳..

https://stackoverflow.com/questions/58754685/find-duplicate-objects-in-array-and-return-new-array-of-object-with-number-of-du

반응형
반응형

* 실무에서 부모 창에서 팝업을 구현할 때에 대량의 배열 데이터를 자식 창으로 전달하는 경우가 종종있다.

* 비슷비슷해서 헷갈리다 보니 시간 낭비가 너무 심해서 기록해둔다.

<부모창>

<input id="devsim01" type="hidden">

$("#devsim01").val(JSON.stringify(배열));

 

<자식창>

let json_child = opener.document.getElementById("devsim01").value;
let data = JSON.parse(json_child);

console.log(data);

#배열이 출력되겠죠?
반응형
반응형

 · 개요 : a태그를 사용하여 href 링크 사용 시 크롬 하단에 나타나는 주소 숨기는 방법

 

 · 방법 : 

<a href="javascript:void(0)" onclick="location.href='http://www.google.com'">Hide Link</a>

  위 코드를 자신의 상태에 맞게 수정하여 사용한다.

 

 · 출처 : https://allinworld99.blogspot.com/2015/02/hide-url-hover-over-link-hide-link-from.html

 

Hide url hover over link / Hide link from status bar

--> --> AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...ea

allinworld99.blogspot.com

 

 · 개요 : GET 방식으로 파라미터 전송 시 공백에서 잘리는 현상 조치

 · 방법 : href= 뒤 파라미터 부분을 " 따옴표(Double Quotation Mark) 로 감싼다.

           href="블라블라"

 · 출처 : https://blog.naver.com/justgo000/150130283919

 

Get방식으로 공백넘길때 처리방법

[ 주소(URL)의 뒤에 정보를 추가하는 GET 방식은 최대 2,047 글자를 넘어갈 수 없습니다. ] - (taeyo...

blog.naver.com

 

반응형
반응형

 · 개요 : 자바스크립트에서 window.open 으로 팝업창을 사용하는 경우

         상황에 따라 자식 팝업창에서 부모 페이지의 함수를 사용해야 하는 경우가 있다.

          (파라미터 전달 가능)

 

 · 호출방법 :

 

⊙ 부모 페이지

window.parentsFun = function(param) {

   console.log("I'm parents");

}

 

⊙ 자식 페이지

opener.parentsFunc(param);

 

 · 출처 : https://www.c-sharpcorner.com/blogs/calling-a-javascript-function-of-parent-window-from-child-window1

 

Calling a JavaScript function of Parent Window from Child Window

This blog gives you a way to call a Javascript function of Parent window from the new popup Child Window.

www.c-sharpcorner.com

 

반응형
반응형

* 배열 혹은 JSon 데이터를 중복제거 하는 방법

 

- 방법 1. 배열 데이터를 중복제거 하는 경우

const oneArr = ['aaa', 'bbb', 'bbb'];

const set = Array.from(new Set(oneArr));

 

- 방법 2. JSon 데이터 중복제거 하는 경우(요소가 모두 일치하는 경우만 중복제거된다)


var jsonArrOrg = [];
var jsonArrNew = [];

jsonArrOrg.push({'aaa', 'bbb', 'ccc'});
jsonArrOrg.push({'aaa', 'bbb', 'ccc'});
jsonArrOrg.push({'aaa', 'bbb', 'ddd'});

jsonArrNew = [...new Set(jsonArrOrg.map(JSON.stringify))].map(JSON.parse);

도움을 받은 곳

https://kyounghwan01.github.io/blog/JS/JSbasic/dupulication-property-remove/#filter

 

JavaScript - new Date 날짜 다루기

JavaScript - new Date 날짜 다루기

kyounghwan01.github.io

 

반응형
반응형

 

[HTML 소스]

<a id="test" download="My-FileName" href="data:application/octet-stream,HELLO"></a>

 

[JavaScript 소스]

var fileName = "질병관리본부";

var urlEncodedData = "data:application/octet-stream;charset=utf-8";

var txt = "\uFEFF";

txt += "코로나19";

urlEncodedData += encodeURIComponent(txt);

$("#test").attr("download", fileName);

$("#test").attr("href", urlEncodedData);

$("#test").get(0).click();

 

자바스크립트로 파일생성 시 UTF-8이 아닌 ANSI로 만들어야 하는 경우가 있다.

역슬레시uFEFF 를 원하는 문자열 앞에 붙이면 신기하게 ANSI로 저장이 된다.

 

[도움을 받은 곳] 홍세미로 블로그

http://blog.naver.com/PostView.nhn?blogId=remocon33&logNo=221583792066&categoryNo=0&parentCategoryNo=75&viewDate=¤tPage=1&postListTopCurrentPage=1&from=search

반응형
반응형

JS 파일 다운로드 구현 시 확장자가 없는 파일을 생성해야 할 때

공백이 먹지 않는 경우 encodeURIComponent 함수를 사용

 

var uriEncodedData = 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent("파일 내용");

$("#아이디").attr("download", "파일명");

$("#아이디").attr("href", uriEncodedData);

$("#아이디").get(0).click();

 

도움을 받은 곳 : https://micropilot.tistory.com/2253

반응형
반응형

웹 문서를 읽을 때, 함수를 실행하는 방법

window.onload = 함수명;


팝업창 띄우는 함수 예시

function popUp(url){

window.open(url, "popup", "width=320, height=480");

}    // 두번째 인자 : 팝업 제어를 위한 이름 설정, 세번째 인자 : 팝업의 기능 설정

반응형
반응형

var toDay = new Date();

toDay.setMonth(toDay.getMonth() - 2);

return $.datepicker.formatDate('yy-mm-dd', toDay);        // datepicker를 사용해서 다음과 같은 return값이 정의 되어 있고 필요한 만큼 입맞에 맞게 수정하여 개발하세요~!

반응형
반응형

첫 번째 방법


window.location.href = url;


두 번째 방법(Spring Security에 위배)


<html>

<iframe id="myiframe" style="display:none;"></iframe>

</html>

<script>

document.getElementById("myiframe").src = url;

</script>


출처 : http://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery

참고 : http://blog.naver.com/PostView.nhn?blogId=javaent&logNo=100057427980&widgetTypeCall=true

작성자 : javaent

반응형

+ Recent posts