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

1. 들여쓰기 1.1. space와 tab을 섞어 혼용해서 쓰지 않는다. 들여쓰기는 space 4개를 사용. function getText(obj){ return obj.value; } 2. 문장의 종료 2.1. 한 줄에 한 문장만 허용한다. 문장 종료 시 반드시 세미콜론을 사용한다. let systemCall; 3. 명명 규칙 3.1. 변수나 함수 이름은 낙타등 표기법을 사용한다. let privateVariableName; 3.2. 상수는 모두 대문자로 하고 단어를 합성할 때는 언더스코어( _ )를 이용한 스네이크 표기법을 사용한다. SYMBOLIC_CONSTANTS; 3.3 Boolean 변수는 is로 시작한다. let isAvailable = false; 3.4. 범용적인 약어는 대문자 그대로 사..

Eval Injection 동적으로 생성되어 수행되는 명령어 주입 정의 외부 입력이 동적으로 스크립트나 명령어 생성에 사용될 경우 의도하지 않은 명령어가 외부부터 주입되어 문제를 일으킬 수 있습니다. 방어 방법 외부의 입력이 eval()함수의 인자로 사용될 경우 위험 문자를 제거합니다. ESAPI for javascript 등 보안 API를 이용하여 외부에서 입력되는 값을 검증한 후 사용합니다. 안전하지 않은 코드의 예 외부 입력 evalParam이 eval()함수의 인자로 사용되고 있습니다. 안전한 코드의 예

javascript는 replaceAll 함수가 없어서 비슷한 기능을 하도록 구현해봅시다. 1. 정규식을 이용한 방법 var str1 = "2021/04/07"; var str2 = str1.replace(/\//gi,"-"); /를 표기하기 위해서는 이스케이프 문자 \와 같이 사용합니다. 위의 정규식은 /를 모두 - 으로 변경하는 효과가 있습니다. g는 문자열 전역 검색, i는 대소문자 구분안함 이라는 옵션입니다. 2. 함수를 만드는 방법 function replaceAll(originalStr, searchStr, replaceStr){ return originalStr.split(searchStr).join(replaceStr); } replaceAll("2021/04/07", "/", "-")

체크박스는 Y/N, true/false 형 데이터를 다루는데 주로 사용합니다. 체크박스의 name 값은 서버로 submit시 전송되는 parameter 이름이며 value 값은 parameter 값입니다. 체크박스의 id는 element들 중에서 유일하게 하나 식별하기 위한 용도입니다. 체크여부 확인(한개) 동의 체크여부 확인(여러 개) 봄 여름 가을 겨울 체크박스 전체 체크/체크해제 function checkAll(){ if(document.getElementById("checkAll").checked==true){ for(var i=0;i

자바스크립트에서 메인 스레드 외에 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() 배열의 요소를 갈아끼우는 작업을 하는 메서드입니다. 이때 삭제된 요소들이 리턴됩니다. 첫번째 인수: 수정하기 시작할 부분의 인덱스 두번째..