프로그래밍 & IT 정보/Javascript14

• 자바스크립트 HTML 특정 요소 도달 감지 예시 특정 위치까지 도달하였을 때 실행하고 싶은 로직이 있을 수 있죠. 이 경우 사용할 수 있는 객체가 있습니다. 목차 특정 요소 도달 감지 가시적으로 특정 요소에 도달했는지 체크하기 위해 사용하는 객체입니다. 기본적인 사용법은 다음과 같습니다. // 옵션 설정 var config = { root: document.querySelector('#scrollArea'), // 기준 영역 지정 rootMargin: '0px', // root 영역의 여백 threshold: 0.1 // root에 지정된 영역 내에 10% 보여질 때 감지 }; // 객체 생성 var observer = new IntersectionObserver(function(entries) { var entry = entries[0]; if (e.. 프로그래밍 & IT 정보/Javascript 2021. 12. 22.

• 자바스크립트 HTML DOM 변경 감시 예시 코딩을 하다보면 특정 DOM의 속성 등이 변경됐는지 알고 싶을 때가 있습니다. 이 경우에 활용 가능한 객체가 있어서 소개합니다. 목차 DOM 변경 감시 다음과 같이 MutationObserver 객체를 이용하여 DOM의 변경을 감시합니다. // 인스턴스 생성 var observer = new MutationObserver(function(mutations) { // 변경 감지 시 수행할 작업 기술 }); // 감시할 대상(항목) 설정 var config = { attributes: true, childList: true, characterData: true }; // 감시 대상 노드 var target = document.getElementById('target'); // 감시 시작 observer.ob.. 프로그래밍 & IT 정보/Javascript 2021. 12. 22.

• 자바스크립트 스크롤 맨 위/아래 감지하기 사용자가 웹 페이지를 다 읽었는 지 판단하여 다른 액션을 이어가고자 할 때 또는 꼭 읽어야 하는 글이 있을 경우 글의 맨 아래에서 버튼 상태를 활성화 시킬 때도 유용할 수 있습니다. function detectBottom() { var scrollTop = $(window).scrollTop(); var innerHeight = $(window).innerHeight(); var scrollHeight = $('body').prop('scrollHeight'); if (scrollTop + innerHeight >= scrollHeight) { return true; } else { return false; } } 스크롤 되어 내려온 위치와 브라우저에 표시된 높이를 더한 값이 페이지 전체 높이 값과 같거.. 프로그래밍 & IT 정보/Javascript 2021. 3. 8.

• 

  자바스크립트 async / await 예제 목차 async / await 란 무엇인가 Promise 객체를 좀 더 쉽게 다룰 수 있게 고안된 문법입니다. 이해가 어렵지 않고 사용법도 쉽게 익힐 수 있습니다. 다만 ECMAScript 2017에서 표준으로 정의된 문법이므로 이전 버전에서 사용하기 위해서는 Babel, Polyfill과 같은 라이브러리를 사용하여 이전 버전 문법으로 변환해야 합니다. [자바스크립트] Promise 예제를 통해 쉽게 이해하기 [자바스크립트] Promise 예제를 통해 쉽게 이해하기 비동기 처리의 한 방법인 콜백 함수를 다루면서 동기와 비동기에 대한 개념도 함께 설명을 드렸는데요. 잘 모르시는 분은 아래 포스팅 먼저 읽어 보시길 바랄게요 :) sangminem.tistory.com/275 [자바스 sangminem.tis.. 프로그래밍 & IT 정보/Javascript 2021. 2. 20.

• 

  자바스크립트 Promise 예제를 통해 쉽게 이해하기 비동기 처리의 한 방법인 콜백 함수를 다루면서 동기와 비동기에 대한 개념도 함께 설명을 드렸는데요. 잘 모르시는 분은 아래 포스팅 먼저 읽어 보시길 바랄게요 :) sangminem.tistory.com/275 [자바스크립트] 콜백 함수 예제를 통해 개념 및 원리 쉽게 이해하기 자바스크립트를 배운 지 얼마 안 되신 분이라면 콜백 함수를 많이 헷갈려 하실 수 있는데요. 차근차근 설명을 해 보도록 하겠습니다. 목차 동기와 비동기 의미 동기는 하나의 요청이 오면 완료 sangminem.tistory.com 지금부터 비동기 처리의 또 다른 방법인 Promise에 대해 알아 보겠습니다. 목차 Promise란 무엇인가 비동기 함수를 동기 처리하기 위해 고안한 객체입니다. 비동기 작업이 완료된 이후에 다음 작업을 연결.. 프로그래밍 & IT 정보/Javascript 2020. 12. 4.

• 

  자바스크립트 콜백 함수 예제를 통해 개념 및 원리 쉽게 이해하기 자바스크립트를 배운 지 얼마 안 되신 분이라면 콜백 함수를 많이 헷갈려 하실 수 있는데요. 차근차근 설명을 해 보도록 하겠습니다. 목차 동기와 비동기 의미 동기는 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식을 말하고 비동기는 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식을 말합니다. 동기 방식은 순차적으로 로직이 수행되므로 흐름을 쉽게 예측할 수 있지만, 비동기 방식의 경우 여러 작업을 동시에 효율적으로 처리할 수 있는 반면에 즉시 응답을 못받기 때문에 적절히 처리가 되지 않으면 예상 밖의 결과가 나올 수 있으므로 주의를 기울여야 합니다. 콜백 함수 사용 목적 비동기 방식으로 작성된 함수를 동기 처리 하기 위해 주로 사용합니다. 비동기 처리를 기본으로 하면서도 일부 구간에.. 프로그래밍 & IT 정보/Javascript 2020. 12. 1.

• 자바스크립트 Base64 이미지 코드 파일로 쓰기 base64로 인코딩 된 이미지를 다시 파일로 변환하고자 할 때 사용하실 수 있습니다. function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = window.atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); } 프로그래밍 & IT 정보/Javascript 2020. 9. 24.

• 자바스크립트 이미지 크기 조정 및 보정 로직 이미지를 축소하여 저장할 필요가 있을 때 유용합니다. 크기를 줄이는 자체는 어렵지 않습니다. 계단 현상이 일어나지 않도록 보정하는 로직이 이 포스팅의 핵심이니 유용하게 사용하시기 바랍니다. function imageResizing(canvas, width, height, resize_canvas) { var width_source = canvas.width; var height_source = canvas.height; width = Math.round(width); height = Math.round(height); var ratio_w = width_source / width; var ratio_h = height_source / height; var ratio_w_half = Math.ceil(ra.. 프로그래밍 & IT 정보/Javascript 2020. 9. 24.

• 자바스크립트 텍스트 길이(바이트) 구하기 문자열의 length 속성은 단순히 숫자, 영문, 한글 모두 1글자씩이라고 판단을 하지만 경우에 따라서 한글을 2자로 인식을 해야 하는 경우가 있습니다. 예를 들어 바이트 계산을 할 때 영문, 숫자, 일반적인 특수 기호들을 1바이트, 한글은 2바이트가 되죠. 단순한 방식으로 함수를 구현해 보겠습니다. function getTextLength(str) { var chk = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_0123456789\~!@#$%^&*()_+| "; var length = 0; if (str != null) { for (var i = 0; i < str.length; i++) { if (chk.indexOf(str.charAt(i)) .. 프로그래밍 & IT 정보/Javascript 2020. 9. 24.

• 자바스크립트 아스키 코드 정렬 배열을 인자로 받아서 아스키 코드 순으로 정렬을 한 뒤 리턴하는 함수를 작성해 보겠습니다. function asciiSort(input, reverse) { var output = [], temp; if (input != undefined && input != null) { for (var i = 0; i < input.length; i++) { output.push(input[i]); } for (var i = 0; i < input.length; i++) { for (var j = i + 1; j < input.length; j++) { if (compareTo(output[i], output[j], reverse)) { temp = output[i]; output[i] = output[j]; out.. 프로그래밍 & IT 정보/Javascript 2020. 9. 24.

• 로컬스토리지에서 배열로 저장하는 방법 목차 목표 JSON Object를 활용하여 localStorage에 배열 형태로 값을 저장할 수 있습니다. 방법 JSON Object를 만들어 저장하고 불러오는 방식으로 구현하였습니다. Set 함수 구현 key에 대응하는 value를 배열로 갖는 JSON Object를 만든 후 JSON String으로 변환하여 localStorage에 저장합니다. function setArray(key, value, limitMax){ var str = localStorage.getItem(key); var obj = {}; try { obj = JSON.parse(str); } catch { obj = {}; } if(!obj){ obj = {}; obj[key] = []; } obj[key].push(value); .. 프로그래밍 & IT 정보/Javascript 2020. 7. 3.

• 자바스크립트 URL 및 E-Mail 링크 자동 생성 [목표] URL 및 E-Mail 입력 시 자동으로 태그 링크를 생성합니다. [방법] 아래와 같이 정규식을 활용하여 태그를 추가합니다. function autoLink(id) { var container = document.getElementById(id); var doc = container.innerHTML; var regURL = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi"); var regEmail = new RegExp("([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+\.[a-z0-9-]+)","gi"); container.innerHTML = doc.replace.. 프로그래밍 & IT 정보/Javascript 2020. 7. 3.