HTML5 부터 브라우저는 File API 지원하기 시작한다. File API 는 아래와 같이 정의되어 있다. FileList : 파일 리스트 File : 파일 데이터 FileReader : 파일 읽기 Blob : 바이트 데이터 간단예제 const captureProfile = (event) => { event.stopPropagation(); event.preventDefault(); const file = event.target.files[0]; let reader = new window.FileReader(); reader.readAsArrayBuffer(file); let inputId = event.target.id; reader.onloadend = () => { convertToBuffer(..

event.stopPropagation() 을 이해하기 위해서는 우선 HTML 상에서 사용자 이벤트가 어떻게 전달되는지 이해해야 합니다. 웹에서의 클릭이벤트 전파 propagation 의 사전적의미는 전파, 확산입니다. 사용자가 마우스로 웹페이지 내의 버튼을 클릭했을때 대부분의 사람들은 버튼만 반응했다고 생각하게 됩니다. 하지만 웹페이 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이것을 Bubble Up(버블업)이라고 합니다. 위 슬라이드 우측의 문서구조를 보면 a 태그는 li, ul 의 두개의 부모태그가 있습니다. 사용자가 a 태그를 클릭했을때 클릭이벤트는 a 태그를 감싸고 있는 li, ul 태그로 순차적으로 전달되게 됩니다. 즉 a 태그의 onclick -> li ..

http://www.emailjs.com/ Send email from Javascript - no server code required | EmailJS Send email directly from your client-side Javascript code – no server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier! www.emailjs.com emailJS는 javascript API로 웹에서 바로 메일을 보낼 수 있도록 지원한다. 월 200건까지는 무료로 사용이 가능하다. 만약 파일 첨부와 같은 기능을 사용하려면 돈을 ..

forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다. 하지만 for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다. 1. [].forEach(callback, thisArg) 기본적인 forEach의 사용법은 아래와 같습니다. const arr = [0,1,2,3,4,5,6,7,8,9,10]; arr.forEach(function(element){ console.log(element); // 0 1 2 3 4 5 6 7 8 9 10 }); // 혹은 arrow 함수 가능 arr.forEach(element => console.log(element)); arr 객체의 요소들이 callback 함수에 순서대로 호출되..

str_text.replace("찾을 문자열", "변경할 문자열") 자바스크립트의 replace()함수는 바꿀 문자열을 직접 입력하거나 또는 정규표현식을 사용할 수도 있습니다. 아래는 replace()를 사용한 문자를 치환하는 방법의 간단한 예제입니다. var test = '가나다라 마바사 가나'; var result = test.replace('가', '나'); console.log(result); 나나다라 마바사 가나 // 출력 결과는 맨 앞의 "가"는 "나"로 변경됨 보시는 것처럼 맨 앞의 "가" 문자가 "나"로 변환되었습니다. 하지만 뒤의 "가"는 변하지 않고 그대로 입니다. 그 이유는 replace()함수는 제일 먼저 일차하는 패턴만 변환 후 바꿀뿐 모든 텍스트를 바꾸지는 않기 때문입니다. 어떻..

slice()와 splice()는 배열을 다룰 때 자주 사용하는 함수이다. 두 함수는 언뜻 보기에 비슷한 기능을 하는 것처럼 보이지만 큰 차이점이 있다. [1] Array​.prototype​.slice() slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 수정되지 않는다. slice(start[, end]) start: 추출 시작점에 대한 인덱스. undefined인 경우: 0부터 slice 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다. 배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열을 반환한다. end: 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까..