알아두면 유용한 잡다한 스크립트들

김승우·2021년 1월 27일

Posts

목록 보기

2/5

1. 이미지 url을 base64로 변환하기

/**
 * https://joswlv.github.io/2016/11/03/CORS/
 * https://www.tutorialspoint.com/converting-images-to-a-base64-data-url-using-javascript
 * image url => base64 url로 변환하기
 * @param {String} src : 이미지 url
 */
function getDataUrl(src) {
	const image = new Image();
	image.crossOrigin = 'Anonymous';

	// 캔버스 생성
	const canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');

	// 이미지가 로드되면 실행될 콜백 함수
	image.onload = function () {
		canvas.width = image.width;
		canvas.height = image.height;

		// 캔버스에 이미지를 그린다.
		ctx.drawImage(image, 0, 0);

		// 변환된 base64 이미지 URL
		const dataUrl = canvas.toDataURL('image/png');
	};

	// 이미지 src 설정하는 동시에 로드 시작
	image.src = src;

	// make sure the load event fires for cached images too
	if (image.complete || image.complete === undefined) {
		image.src =
			'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
		image.src = src;
	}
}

2. 파일 다운로드 기능 만들기

/**
* dataURL로 변경된 이미지 다운로드
* @param uri : 이미지 url
* @param name : string : 파일 명
*/
function downloadURI(uri, fileName) {
	const link = document.createElement('a');
	link.download = fileName; // 파일 이름 지정
	link.href = uri;
	document.body.appendChild(link);
	link.click();
	link.parentNode.removeChild(link); // 추가한 a 태그 삭제
}

3. 동적으로 스크립트 파일 불러오기

function loadScript(url, callback)
{
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    script.onreadystatechange = callback;
    script.onload = callback;

    head.appendChild(script);
}

4. 날짜 yyyy-MM-dd 타입 validation check

/**
 * 입력한 날짜가 yyyy-MM-dd이고, 올바른 날짜인지 체크
 * @param {string} dateString 
 */
function fnIsValidDate(dateString) {
  var regEx = /^\d{4}-\d{2}-\d{2}$/;
  if(!dateString.match(regEx)) return false;

  var d = new Date(dateString);
  var dNum = d.getTime();
  if(!dNum && dNum !== 0) return false;

  return d.toISOString().slice(0,10) === dateString;
}

5. window.open 새 창에서 열기

// https://stackoverflow.com/questions/726761/javascript-open-in-a-new-window-not-tab
window.open(url, windowName, "height=200,width=200");

유니크한 아이디 만들기
: https://gist.github.com/gordonbrander/2230317

6. img가 없을 경우 처리

: https://sub0709.tistory.com/126

7. 현재 URL 쿼리스트링 값 가져오기

현재 주소 : http://localhost:8080/movie?movidId=123;

// 1. URLSearchParams 객체 생성
const url = new URLSearchParams(window.location.search);

// 2. 값 가져오기
url.get('movieId') // 123

8 . 배열 메소드

8.1 slice

8.2 concat

: 배열을 합쳐서 새로운 배열을 반환하는 메서드

const array1 = ['a', 'b', 'd'];
const array2 = ['c', 'e', 'f'];
const array3 = array1.concat(array2); // [ a,b,d,c,e,f ];

8.3 인덱스를 통해 아이템 하나 삭제하기

const _selectedIndex = 1;
array.splice(_selectedIndex, 1);

8.4 배열안에 아이템이 존재하는지 찾기

1) Array.prototype.findIndex
: 주어진 조건을 만족하는 배열의 첫 번째 아이템을 반환한다. 조건에 맞는 아이템이 없으면 -1을 반환한다.
: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

9. 자바스크립트로 특정 시점 이후 일정한 시간이 지난 것을 체크하는 방법

// 시작 시점 체크
let startTime = null;

// setInterval 타이머
let timer = null;

// 3000ms, 3초
const delay = 3000;

// 특정 엘리먼트에 마우스 오버시 시간 카운트
$element.onmouseover = function(event) {
  // 1. 
  startTime = new Date().getTime();
  
  // 500ms(0.5s) 마다 시간을 체크
  timer = setInterval(() => {
    // 2. 
  	const elapsed = new Date().getTime() - startTime;
    
    // 3. 
    if( elapsed >= delay ) {
      	// 4.
    	clearInterval(timer);
      	alert('End!!!');
    }
  }, 500);
}

시작 시간을 설정한다. getTime()은 ms단위 이므로 초 단위를 구하고 싶으면 1000으로 나눠줘야한다.

500ms마다 현재 시간에서 시작 시간을 빼서 경과한 시간을 변수에 담는다.

3초 이상 경과했을 경우를 if문을 통해서 체크한다.

clearInterval()을 통해서 타이머를 강제 종료한다.

10. 엘리먼트의 높이, 너비, 포지션을 구하는 방법

출처 : https://mommoo.tistory.com/85
getBoundingClientRect : https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

function getOffset(element) {
  // 1. 
  const clientRect = element.getBoundingClientRect();

  const relativeTop = clientRect.top;
  const relativeLeft = clientRect.left;

  //2.
  const top = (pageYOffset || scrollY) + relativeTop;
  const left = (pageXOffset || scrollX) + relativeLeft;

  return {
    top,
    left,
    width: clientRect.width,
    height: clientRect.height,
  };
}

pageYoffset, scrollY : y축으로 스크롤된 거리
pageXoffset, scrollX : x축으로 스크롤된 거리
1. getBoundingClientRect를 통해서 Viewport에 상대적인 top, left와 엘리먼트의 높이 너비를 구한다.
2. viewport기준이 아닌 브라우저 컨텐츠를 기준으로한 x, y 좌표 값을 구한다.
  😎 엘리먼트의 Y절대 좌표 = 브라우저가 세로로 스크롤된 거리 + 뷰포트 기준 y좌표

11. 엘리먼트의 중앙 좌표를 구하는 방법

: https://stackoverflow.com/questions/8027875/how-to-find-the-elements-x-center-coordinates-and-related-window-offset

var $this = $(this);
var offset = $this.offset();
var width = $this.width();
var height = $this.height();

var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;

12. 배열 특정 갯수로 분할하여 이중 배열 만들기

division(arr, n) {
	var len = arr.length;
	var cnt = Math.floor(len / n);
	var tmp = [];

	for (var i = 0; i <= cnt; i++) {
		tmp.push(arr.splice(0, n));
	}

	return tmp;
},

13. 스와이퍼 슬라이드 네비게이션 이동시키기

 for(const el in slider) {
	if(slider[el].nodeName) {
		if(slider[el].className.indexOf("swiper-slide-active") >= 0) {
			// this.$refs['slider__nav__inner'].style.left = `${12.5 * slider[el].getAttribute("data-swiper-slide-index")}vw`;
			this.$refs['slider__nav__inner'].style.left = `${navWidth * slider[el].getAttribute("data-swiper-slide-index")}px`;
			break;
		}
	}
}

14. html 태그 이스케이프 처리

var entityMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;', '/': '&#x2F;', '`': '&#x60;', '=': '&#x3D;' }; 
function escapeHtml (string) { return String(string).replace(/[&<>"'`=\/]/g, function (s) { return entityMap[s]; }); }

15. html 태그 unescape 처리 : escape의 반대

16. 브라우저 쿠키

16.1 쿠키 만료날짜 내일로 설정하기

: https://ko.javascript.info/cookie

// 지금으로부터 하루 후
let date = new Date(Date.now() + 86400e3);
date = date.toUTCString();
document.cookie = "user=John; expires=" + date;

: https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript

16.2 쿠키 생성, 가져오기, 삭제

// 브라우저 쿠키 생성
function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

// 브라우저 쿠키 가져오기
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

// 브라우저 쿠키 삭제하기
function eraseCookie(name) {   
    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

17. 자바스크립트의 'this'

: this 값은 호출 시점에 결정됩니다.!!!!!!!!!!!!!!!!!

18. Date 객체 시간 0시간 0분 0초로 초기화하는 방법

var d = new Date();
d.setHours(0,0,0,0);

19. 페이지 새로고침 없이 URL 쿼리스트링 변경하기

: https://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page
: https://developer.mozilla.org/ko/docs/Web/API/History/replaceState

history.replaceState(this.filterData(), null,"?" + url.toString());

20. ✨✨✨✨ 특정 엘리먼트로 포커스(스크롤) 이동하기!

: https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView

// element === 포커싱 할 엘리먼트
element.scrollIntoView();

21. a태그 기본 동작 막기

<a href="javascript:;"></a>

href="javascript:;"를 삽입하면 a태그의 기본 동작을 막을 수 있다.

22. 페이지를 새 창으로 열 경우, 같은 도메인이 중복되어 들어가는 이슈 해결하는 방법

: https://stackoverflow.com/questions/23373990/window-open-simply-adds-the-url-to-my-current-url

const domain = 'https://' + window.location.hostname;
const path = '/somePage';
const url = domain + path;
window.open(url, '', true);

3번째 인자를 전달해 주어야지 새 창으로 열 수 있다.

23. element.scrollIntoView()

1. 2. 엘리먼트 내부 가로 스크롤에서 현재 브라우저 스크롤을 변경하지 않고, 가로 스크롤 내부 스크롤만 변경시키기

element.scrollIntoView({
    behavior: "smooth",
    inline: "start",
    block: "nearest"
});

24. location.pathname에서 마지막 pathname 가져오기

// currentPath === /pc/events/ => ['', 'pc', 'events', ''] => ['pc', 'events']
const currentPath = location.pathname.split('/').filter(path => !!path);

const target = currentPath[currentPath.length - 1];

25. Invalid Date 객체 판단하기

// if(!(d instanceof Date)) 도 가능하다.
if (Object.prototype.toString.call(d) === "[object Date]") {
  // it is a date
  if (isNaN(d.getTime())) {  // d.valueOf() could also work
    // date is not valid
  } else {
    // date is valid
  }
} else {
  // not a date
}

김승우

사람들에게 좋은 경험을 선사하고 싶은 주니어 프론트엔드 개발자