AACII.TISTORY.COM

React 의 특징페이스북(메타)에서 만든 UI를 구축하기 위한 자바스크립트 라이브러리입니다. 1. 컴포넌트 기반 아키텍처 (Component-Based Architecture)React는 UI를 '컴포넌트(Component)'라는 독립적이고 재사용 가능한 조각으로 나눠서 개발합니다.코드를 재사용하기 쉽고, 유지보수가 용이해집니다.각각의 분리된 컴포넌트들을 조립해서 UI를 만들수 있습니다. 예를 들어, 웹사이트의 헤더(Header), 버튼(Button), 사이드바(Sidebar)를 각각 별개의 컴포넌트로 만들 수 있습니다. 2. Virtual DOM (가상 DOM)웹 브라우저는 DOM(Document Object Model)이라는 트리 구조로 웹페이지를 표현합니다.사용자가 버튼을 클릭하는 등 변화가 생..

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

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

100 : 현재 데이터를 서버가 받은 상태 200 : 에러없는 정상 처리 204 : 정상처리되었지만 서버에서 응답 데이터가 없음 301 : 요청 페이지가 새 URL로 변경되었음 304 : 기존 데이터와 변경된 것이 없음 400 : Request에 문제가 있어서 서버가 인식 할 수 없음 403 : 서버에서 허락되지 않음 404 : URL에서 자원을 찾을 수 없음 406 : 전송 방식(method)가 허락되지 않음 500 : 서버 처리시 문제 발생 502 : 게이트웨이나 프록시 상태 문제(과부하) 503 : 일시적 과부하 혹은 서비스 중단 504 : 서비스가 타임 아웃 되어 처리되지 못함.

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); };

소개 보통 웹사이트에 접속한 사용자를 식별하려면 쿠키를 사용합니다. Canvas fingerprinting 은 웹사이트에 접속한 브라우저를 95% uniquely 하게 식별하는 기술입니다. 100% 식별이 아니기 때문에 주로 광고 타겟팅에 이용되고 있습니다. University of California, San Diego 의 연구원이 2012년 5월에 쓴 논문 “Pixel Perfect: Fingerprinting Canvas in HTML5” 이 최초입니다. 미국 백악관 사이트 포함 5.5% 이상 이 기술을 사용중인 것으로 알려졌습니다. 원리 html5 canvas로 렌더링 되는 이미지는 GPU나 드라이버의 영향으로 pc 마다 달라서 고유 이미지가 됩니다. 이 canvas 이미지를 base64으로 인코..

CSS에서 레이아웃을 담당하는 컨테이너 같은 블록요소, 등의 가운데 정렬 은 margin을 이용해서 합니다. {margin-left:0 auto; margin-right:0 auto; } 태그나 컨테이너나 부모요소 태그에 width를 설정하더라도 이미지 태그는 텍스트와는 달리 줄바꿈이 일어나지 않으므로 이미지 태그의 이미지의 size를 설정하지 않으면 부모 요소를 벗어나 표시되게됩니다. 이미지의 크기를 브라우저 크기에 자동 조절하려면 max-width 속성을 사용합니다. CSS 예제: img {width: inherit; max-width:100%; height: auto;}

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 다루기

기본 예제 $.post("test.jsp"); 데이터를 같이 전달하는 예제 $.post("test.jsp", {name: "john", time: "10:00pm"}); 배열을 parameter로 전달하는 예제 $.post("test.jsp"), {'choices[]':["john", "susan"]}); 폼(form) 데이터를 전달 $.post("test.jsp", $("testform").serialize()); 콜백함수를 통한 리턴 값을 얻어와 알림창 출력 $.post("test.jsp", function(data){ alert(data);}); parameter로 데이터를 전달하고 콜백으로 리턴된 결과를 알림창으로 출력 $.post('test.jsp", {name:"john", time:"10:0..

자바스크립트에서 메인 스레드 외에 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..