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

변수(variable) 변수는 값을 저장하는 메모리 공간을 가리키는 메모리 주소를 참조하는 이름을 붙인 것입니다. 변수의 선언 변수는 사용하기 전에 선언을 해야 합니다. 왜냐하면 저장되는 값의 데이터 타입(data type)에 따라서 메모리 공간의 크기가 달라지기 때문입니다. 그 데이터 타입의 크기만큼 공간을 미리 확보해서 다른 프로그램이 값을 변경시키지 못하도록 해야 하기 때문입니다. int age; 여기서 int가 데이터 타입(정수형)이고 age가 변수입니다. 변수 작성 관례 1. 알파벳 소문자로 시작합니다. 2. 단어를 합성할 때 첫 글자를 대문자로 합니다. (낙타등 표기법) 3. 자바에서 사용하는 예약어는 금지입니다. char charData; 변수 할당 연산자 = = 은 수학에서는 같다의 뜻이지..

JDK 구버전 다운로드 최신 버전은 연구용이나 학습용으로 주로 사용됩니다. 프로젝트에서는 보통 최신 버전을 사용하지 않고 안정화되고 대중화된 버전을 사용합니다. 그래서 jdk 구버전이 필요할 때가 있습니다. 아래는 오라클에서 제공하는 모든 구버전 다운로드에 관한 링크입니다. https://www.oracle.com/technetwork/java 단, 오라클 계정이 필요합니다. JDK JDK는 java virtual machine 실행환경과 개발환경 모두 포함되어 있습니다. jdk설치 경로에는 bin 디렉토리가 있는데, 거기에 javac 가 .java 소스코드를 .class로 컴파일 해주는 컴파일러이고, java가 class를 실행해주는 실행 파일입니다. (윈도우: 제어판>시스템 및 보안>시스템>고급 시스..

Q. 언어를 배우는 방법? 언어(외국어)를 배울 때, 처음엔 듣고 따라하거나 무작정 외우거나 해서 그 언어에 익숙해지는 방법을 사용합니다. 물론 나중에 일정한 수준에 이르면 문법 지식이나 고도화된 활용법을 연구해야 하는 시기가 오지만, 시작하는 단계에서는 아직 그럴 때가 아닙니다. 이 방법은 프로그래밍 언어를 배울 때도 마찬가지 입니다. 먼저 좋은 샘플 코드를 보고 따라쳐보고 무작정 외워서 그 언어에 빨리 익숙해지는 것이 먼저입니다. 배우는 속도에는 차이가 있을 수 있으나 노력만 하면 누구나 할 수 있는 것이 언어입니다. Q. 저는 강의를 듣고 책을 읽어도 코딩을 좀처럼 할 수 없습니다. 모든 언어는 반복 트레이닝(연습)을 기본으로 해야하는 것입니다. 눈으로 읽거나 듣는 연습만을 해서는 말하거나 쓰기가 ..

자바스크립트에서 메인 스레드 외에 Web Wokers에서 병렬로 처리되는 스레드를 워커(woker)라고 합니다. 워커와 메인 스레드는 서로 다른 전역 객체를 가지기 때문에 상대방의 전역 객체를 참조할 수 없습니다. 그래서 워커와 메인 스레드 사이에는 postMessage를 사용한 비동기 통신만 가능합니다. Worker 객체 생성 var worker = new Worker("worker.js"); 메인스레드와 같은 디렉터리에 있는 worker.js 가 워커를 정의한 자바스크립트 파일입니다. Worker생성자의 인수로 URL(같은 사이트)을 넘길 수 있습니다. 워커에 메시지 전송 worker.postMessage("message"); worker 인스턴스가 생성되면 postMessage로 메시지를 보낼 수 ..

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) 도형입니다. 중심좌표(,) : 마우스 클릭..