AACII.TISTORY.COM

동기화 방식은 순차적으로 작업을 위에서 부터 순차적으로 실행합니다.동기화 방식은 직관적이고 쉽지만 특정 작업이 오래 걸리는 경우, 다음 작업이 실행하지 않고 무작정 기다리는 단접이 있습니다. 비동기 방식은 작업에 요청을 한뒤 기다리지 않고 다음 작업을 실행합니다.그러다가 이전 요청이 완료되어 결과가 통보되면 이전 요청을 완료시키는 방식으로 동작합니다.자바스크립트는 특히 서버와 브라우저 간 통신 작업이 많기 때문에, 비동기 방식으로 서버에 요청 작업을 보내고 나머지 다른 작업들을 처리하다가 서버로부터 결과 통보 요청이 오면 그 작업을 마무리 하는 식으로 코딩합니다.여러 요청을 비동기로 처리하다보면 로직의 실행 순서를 헷갈리게 되어 각종 object들이 undefined 가 되는 저주에 걸립니다. ㅎㅎ이러한..

popup은 차단이 기본 값popup은 보안 문제가 있어서 대부분의 브라우저에서 차단하는 것이 기본 값으로 되어있습니다.그렇지만 web application을 만들다 보면 popup 기능이 필요할 때가 있습니다.popup 윈도우의 대안으로 iframe, modal, overlay 등을 생각해 볼 수 있습니다.  IFRAMEiframe의 경우에도 popup고 마찬가지로 보안 문제 때문에, 정책상으로 https으로만 접근이 가능하도록 하는 것이 일반적입니다.https으로 서버를 구축하려면 CA(인증 기관)으로부터 발급된 SSL 인증서가 필요합니다. 인터넷과 단절된 폐쇄된 내부 인트라넷 환경에서 HTTPS를 사용할 때는 내부 CA와 자체 서명 인증서를 이용해서 https를 구축할 수 있습니다.내부 CA(인증 ..

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. 범용적인 약어는 대문자 그대로 사..

보안 조치 우리는 종종 보안상 우클릭 이벤트나 드래그 등을 막아야 할 때가 있습니다. 보안이란 뚫지 못하는 방패의 개념이 아니라 뚫기 어렵게 만드는데 목적이 있다고 할 수 있습니다. 그런의미에서 자바스크립트의 우클릭, 더블클릭을 통한 선택, 드래그를 막는 방법을 소개합니다.

본래 뒤로가기는 클라이언트 측의 브라우저의 고유 기능이기 때문에 서버 측에서 막는 것이 사실 불가능 하지만 종종 기능상의 이유로 뒤로가기를 막을 필요가 있습니다. 이용자 뒤로가기를 막는 꼼수는 여러가지 있지만 가장 깔끔한 방법을 소개합니다. 원리는 히스토리 스택에 강제로 현재 페이지의 URL을 박아 넣은 뒤 뒤로가기를 할 경우 현재 페이지를 보여주는 방법입니다. 스크립트 태그 안에 아래와 같이 입력하면 됩니다. history.pushState(null, null, "http://현재페이지URL을 입력하세요."); window.onpopstate = function(event) { history.go(1); };

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

select box 예제 선택 1 2 option 다루기

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..

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

리터럴로 객체(object) 생성 예제 var card1 = {suit:"클로버", rank:"Q"}; var card2 = {"suit":"하트", "rank":"K"}; //object의 값을 불러올때는 .키값 이나 대괄호[] 안에 키값을 사용합니다. console.log(card1.suit); console.log(card2["rank"]); //object에 새로운 property를 추가 삭제 할 수 있습니다. card1.value = 11; console.log(card1); //{suit:"클로버", rank:"Q", value:11} delete card1.rank; console.log(card1); //{suit:"클로버", value:11} //property 존재 확인 console...

Symbol() 기존에는 상수로 상태값을 표현해 왔습니다. var NONE = 0; var BLACK = -1; var RED = 1; 이러한 상태 값들을 Symbol로 표현할 수 있습니다. var NONE = Symbol("none"); var BLACK = Symbol("black"); var RED = Symbol("red"); //Symbol은 유일한 값입니다. console.log(BLACK.toString()); //black 이 출력됩니다. Symbol과 문자열 연결 //Symbol.for()를 이용하면 전역 레지스트리에 심벌이 만들어 져서 공유할 수 있습니다. let sym1 = Symbol.for("test"); let sym2 = Symbol.for("test"); console.log..