자바스크립트22

• 자바스크립트 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.

• 

  테트리스 게임 개발 #10 - 모바일 플레이 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색 sangminem.tistory.com 이번에는 약속드린 대로 모바일에서 조작 가능하도록 버튼을 만들어 보겠습니다. 모바일 뷰에서는 고려할 사항이 좀 더 많습니다. 메타 설정 수정 하나하나 생각해 보겠습니다. 먼저 play.html을 수정할 건데요. 모바일 기기에서 최적화 된 화면을 보여주기 위한 메타 설정 값입니다. 일반적인 사항이라 특별한 설정이 .. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 10. 1.

• 

  테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 목차 sangminem.tistory.com 이번 시간에는 한층 더 고급스러워진 게임에 더욱 난이도 높은 기능을 추가해 보도록 해볼게요. 1. 먼저 콤보 기능을 만들어 볼 거구요. 2. 특정 레벨 이상에서 일정 시간이 지나면 밑에서 한 줄씩 올라오는 로직을 구현해 보겠습니다. 별 거 아닌 거 같아도 생각보다 고려할 게 많습니다. 정신 바짝 차리고 따라 오세요. 콤보 기능 추가 .. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 10. 1.

• 

  테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 목차 지난 강의 리뷰 테트리스 게임 개발 #6 - 시작, 종료, 일시 정지 및 레벨, 라인, 점수 계산 기능 구현 테트리스 게임 개발 #6 - 시작, 종료, 일시 정지 및 레벨, 라인, 점수 계산 기능 구현 목차 sangminem.tistory.com 이제 테트리스는 저희 손 안에 있습니다. 원하는대로 바꾸도록 해 볼거예요. 1. main-board와 next-board에 밝은 색 무늬도 추가하여 1자 블럭이 잘 보이도록 할 겁니다. 2. 그리고 블럭에 스타일 옵션을 추가하여 블럭을 좀 더 고급스럽게 만들어.. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 28.

• 자바스크립트 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.