삶 가운데 남긴 기록 AACII.TISTORY.COM

BLOB(Binary Large Object) Blob 생성자 var blob = new Blob(source, {type: contentType}); 여기서 source는 버퍼 배열이고 contentType은 MIME 타입입니다. String 타입은 UTF-8 바이너리로 변환됩니다. //문자열 Blob var blob = new Blob(["JavaScript"], {type: "text/plain"}); console.log(blob.size, blob.type); //10 "text/plain" //형식화 배열 blob var a = new UintBArray([0,1,2,3]); var blob = new Blob(a, {type: "application/octet-stream"}); consol..

draggable HTML element를 드래그 할 수 있도록 attribute를 설정할 수 있습니다. 드래그 드래그 앤 드롭 관련 이벤트 dragstart : 드래그 시작 할 때 발생 drag : 드래그를 하는 동안 발생 dragend : 드래그가 끝났을 때 발생 dragenter : 마우스가 드롭 요소의 경계선 안쪽으로 들어갈 때 발생 dragover : 마우스가 드롭 요소의 경계선 안에 있을 때 발생 dragleave : 마우스가 드롭 요소의 경계선 바깥으로 나왔을 때 발생 drop : 요소에 드롭할 때 발생 데이터 전달 드래그 앤 드롭 이벤트의 dataTransfer 프로퍼티 types : setData 메서드로 설정한 데이터 타입 목록 files : 드래그한 파일 객체 목록 effectAllo..

생성자 1. 함수의 선언문으로 정의 function Card(suit, rank){ this.suit = suit; this.rank = rank; } Card.prototype.show = function(){ console.log(this.suit + this.rank); }; 2. 함수 리터럴로 정의 var Card = function(suit, rank){ this.suit = suit; this.rank = rank; }; Card.prototype.show = function(){ console.log(this.suit + this.rank); }; 3. 클래스 선언문으로 정의 class Card { constructor (suit, rank){ this.suit = suit; this.ran..

Ajax Ajax는 XMLHttpRequest 객체를 이용하여 웹서버와 비동기 통신하고 XML이나 JSON을 통해 DOM을 동적으로 갱신하는 기법을 말합니다. XMLHttpRequest 프로퍼티 readyStateHTTP : 통신 상태(0~4) , 읽기 전용 response : 응답 내용, 읽기 전용 responseText : 응답 내용을 텍스 형식으로 가져 옴, 읽기 전용 responseType : 응답 타입, 쓰기 가능 responseXML : 응답 내용을 XMLDocument 객체로 가져옴, 읽기 전용 status : HTTP 상태 코드, 읽기 전용 statusText : 요청 상태 보충 메시지, 읽기 전용 timeout : 요청을 끝내는데 걸릴 시간을 가져오거나 설정, 쓰기 가능 withCrede..

비동기 처리 console.log("A"); setTimeout(function(){console.log("B");}, 0); console.log("C"); 위 코드의 실행 결과는 A -> C -> B 순으로 표시됩니다. 비동기 작업은 콜백 함수로 작업을 예약 해놓고 다음 작업을 수행하기 때문입니다. 콜백 지옥 function sleep(callback){ setTimeout(function(){ callback(); },1000); } sleep(function(){ console.log("A"); sleep(function(){ console.log("B"); sleep(function(){ console.log("C"); }); }); }); Promise var promise = new Prom..

이벤트 리스너(listener) 등록 방법 HTML과 DOM에 이벤트 리스너는 하나만 등록할 수 있습니다. 증복해서 등록할 경우 이전에 등록한 핸들러는 무시됩니다. HTML attribute DOM var btn = document.getElementById("button"); btn.onclick = changeColor(); element.addEventListener(type, listener, useCapture) type : 이벤트 유형 listener : 이벤트 처리를 담당할 콜백 함수 참조 useCapture : 캡처링 단계(true), 버블링 단계(false) , 생략 가능 var btn = document.getElementById("button"); btn.addEventListener..

DOM(Document Object Model) document 변수를 통해 접근하는 HTML Element 트리구조로 부모(parent), 자손(child), 형제(siblings)관계로 이루어지고 최상위 조상은 Document 객체입니다. 이벤트 capturing: 이벤트가 발생한 target 요소의 부모로부터 자손까지 이벤트가 일어났는지 검사해 자손의 이벤트를 통보받을 수 있게 등록한 이벤트 핸들러가 있는 지 확인 하는 과정 이벤트 bubling: element들이 부모자손 관계로 중첩될 때 이벤트가 자손부터 실행되어 부모순으로 이벤트 핸들러를 찾아 수행 하며 상위 element로 이벤트를 전파하는 과정 주요 프로퍼티 document.documentElement //문서 루트 객체 참조 docume..

javascript 실행 순서 Window 객체 생성: 웹페이지와 탭마다 생성 됩니다. Document 객체 생성: Windows 객체의 프로퍼티로 생성됩니다. DOM 트리 구축 시도: document.readyState가 loading 입니다. HTML 문서를 순서에 따라 분석, DOM객체와 텍스트 노드 추가합니다. script 요소를 만나면 그 시점에서 실행됩니다. HTML문서의 구문 분석이 일시정지 됩니다. DOM 트리 구축을 완료: document.readyState가 interactive로 바뀝니다. Document객체에 DOM 트리 구축 완료를 알리기 위히 DOMContentLoaded 이벤트를 발생시킵니다. img 등 외부 리소스를 읽어옵니다. 리소스를 모두 읽으면 document.ready..

정규 표현식 생성 var reg = new RegExp("abc"); var reg2 = /abc/; test() 문자열이 일치하는지 판별합니다. (boolean) var reg = /cat/; console.log(reg.test("cats")); //true console.log(reg.test("Cat"));//false , 대소문자를 구별합니다. exec() 인수와 비교하여 일치한 문자열을 배열로 리턴합니다. var reg = /Script/; var result = reg.exec("JavaScript"); console.log(result[0]); //"Script" 주요 표현식 abc : abc 문자열을 포함 [abc] : a, b, c 중 한개라도 포함 [^abc] : a, b, c 를 포..

Array.prototype의 주요 메서드 push() 배열의 마지막에 하나 이상의 요소(element)를 추가하고 그 배열의 길이를 리턴 var a = ["A", "B"]; a.push("C", "D"); pop() 배열의 마지막 요소를 잘라내서 리턴 shift() 배열의 첫 요소를 제거하고 모든 배열의 요소들을 왼쪽으로 이동 시킨뒤 제거된 첫 요소를 리턴 unshift() 배열의 앞에 요소를 한개 이상 추가한 후 모든 배열의 요소를 오른쪽으로 이동후 배열의 길이를 리턴 var a = [1,2,3]; a.unshift(4,5);//[4,5,1,2,3] splice() 배열의 요소를 갈아끼우는 작업을 하는 메서드입니다. 이때 삭제된 요소들이 리턴됩니다. 첫번째 인수: 수정하기 시작할 부분의 인덱스 두번째..

순차 검색 정렬된 배열로부터 특정 값을 찾아내는 알고리즘 이진 검색 정렬된 데이터의 중간에 위치한 요소의 값을 비교해서 절반씩 검색 대상에서 제외 시켜서 이진트리 구조를 탐색하는 알고리즘 퀵 정렬 배열을 두개로 나눈 후에 나눈 부분을 다시 퀵정렬로 정렬해 나가는 작업을 재귀적으로 반복 뉴턴-랩슨 법으로 제곱근 구하기 에라토스테네스의 체로 쌍둥이 소수 구하기 정수 n을 정하고 2이상 n 이하의 정수의 목록을 만듭니다. 가장 작은 소수인 2의 배수는 목록에서 지웁니다. 그다음 가장 작은 소수인 3의 배수도 목록에서 지웁니다. 이러한 작업을 반복하면 쌍둥이 소수를 구할 수 있습니다. 만델브로트 집합(mandelbrot set) 자기 닮음 구조의 프랙털(fractal) 도형입니다. 중심좌표(,) : 마우스 클릭..

직렬화(serialize) 컴퓨터 메모리 안에 구현된 객체(인스턴스)를 문자열로 변환하는 과정을 직렬화라고 합니다. 반대로 문자열을 다시 객체로 환원화하는 것을 역직렬화라고 합니다. JSON(Javascript Object Notation) 표기법 리터럴 객체: { name : "Tom", age : 17, marriage : false, data : [2, 5, null] }; JSON: ' { "name" : "Tom", "age" : 17, "marriage" : false, "data" : [2, 5, null] } '; 차이점은 프로퍼티 이름을 큰따옴표로 묶은 문자열로 표기하고 전체는 작은 따옴표로 묶어서 표기한다는 점입니다. 객체를 JSON으로 변환 JSON.stringify() 첫번째 인수:..

프로퍼티 데이터 프로퍼티: 값을 저장하기위한 객체의 맴버 변수 접근자 프로퍼티: 데이터 프로퍼티에 접근하기 위한 함수를 정의한 프로퍼티 getter 와 setter를 정의하면 데이터 프로퍼티에 접근 할 수 있습니다. delete person.name 처럼 delete 연산자로 프로퍼티를 삭제할 수 있습니다. 캡슐화 즉시 실행 함수로 클로저를 생성하면 데이터를 외부에서 숨기고 접근자 프로퍼티(getter, setter)로만 읽고 쓰고 할 수 있습니다. 프로퍼티 디스크립터(property descriptor) 프로퍼티 디스크립터는 해당 프로퍼티의 설정을 기술하는 객체입니다. 프로퍼티의 쓰기 가능 여부 등을 설정 할 수 있게 도와줍니다. 데이터 프로퍼티의 디스크립터 { value: 프로퍼티의 값, writab..

수학은 한마디로 표현하면 수학은 연역적 추론입니다. 현대의 수학은 고대 그리스 철학자들이 논리를 사용하여 자신의 주장(이론)을 증명하면서 시작했다고 할 수 있습니다. 논리는 크게 연역적 추론과 귀납적 추론이 있는데, 이 중에서 수학은 연역적 추론을 사용합니다. 물론 수학적 귀납법을 사용하기도 하지만, 이는 셀 수 있는 특수한 경우에만 사용합니다. 더보기 무수히 많은 실수 집합에서 셀 수 있는 수인 정수는 매우 특수한 경우입니다. 고대 그리스의 유클리드가 쓴 기하학 원론이라는 책이 있습니다. 기하학 원론의 내용은 중학교때 배웠던 삼각형, 합동 등 도형들에 관한 내용입니다. 점, 선, 면 등의 정의와 몇 가지 공리로부터 참인 명제들의 연역적 추론만으로 쓰여있는 책입니다. 이는 현대 수학(과학) 이론 서술(증..

함수적 종속(Functional Dependency) X→ Y: X, Y가 속성의 부분 집합일 때, X 값이 항상 Y 값의 오직 하나만 연관 되어 있을 경우 함수적으로 종속되어있다고 합니다. 학번 이름 학년 학과 400 이순신 4 컴퓨터공학과 422 유관순 3 수학과 (Determinant): 학번 → (Dependent): 이름, 학년, 학과 완전 함수적 종속과 부분 함수적 종속 수강 테이블 학번 과목번호 성적 학년 100 c413 a 4 100 e412 b 4 학번, 과목번호 → 성적 학번 → 학년 성적은 (학번, 과목번호)에 완전 함수적 종속(Functional Dependency)입니다. 학년은 (학번, 과목번호)에 부분 함수적 종속(Partial Functional Dependency)이다. 학..