자바스크립트는 프로토타입 기반의 언어이다. 일반적인 객체지향언어의 클래스 개념이 없다(클래스 만들고 인스턴스 생성하는 과정). 자바를 공부하면 클래스를 알아야 하듯 자바스크립트를 공부하면 프로토타입을 알아야 한다. (ES6에서 클래스 문법이 추가되었다. 하지만 문법이 추가된 것이며 클래스 기반으로 바뀌었다는 것은 아니다). 많은 고수분들이 프로토타입이 무엇인지 알면 자바스크립트가 재밌어지고 숙련도가 높아진다고 하신다. 사실 자바스크립트는 웹사이트의 움직임을 담당하고 돔 조작을 통해 쉽게(?) 쓸 수 있기 때문에 깊이 있게 공부를 안하고 그때 그떄 기능 위주로 찾아봤었다. 프로토타입에 대해 알아보려 하지 않았고 1년 동안 document.getElementById와 제이쿼리 위주로 썼던 것 같다. 나를 반..

우선 돔은 Document Object Model, 문서 객체 모델이다. 문서 객체란 웹페이지를 이루는 html, head, body와 같은 태그들을 javascript가 이용할 수 있도록 만든 객체이다. (브라우저가 만들었다. 트리구조로.) 리액트는 가상돔을 사용한다. 실제 돔이 아닌 가짜돔. 웹페이지에서 사용자의 동작에 따른 이벤트가 발생하면 실제돔을 바로 바꾸지 않는다. 먼저 자바스크립트로 된 가상돔을 랜더링한다(가상돔에 올라간다라고도 표현). 가상돔은 메모리에 저장된다. 그리고 이전의 돔과 비교를 하여 다른 요소(변경부분)만 실제 돔에 반영한다. 반영을 할 때는 수정을 하는 것이 아니다. 이전의 돔에 있던 요소를 버리고 새로운 요소로 갈아끼우는 것이다.

// 정규식 선언 var re = /^(([^()[\]\\.,;:\s@\"]+(\.[^()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; // 이메일을 변수에 할당 var email = 'test'; if(!re.test(email) { alert("올바른 이메일 주소를 입력해주세요."); }

boolean에는 true와 false 두가지가 있다. 예를 들어 아래와 같은 if문이 있다고 하자. if (abc) { console.log(true); } abc가 0, -0, ' ', null, undefined이면 true가 출력이 안되며 -1, 'morning', 'false'이면 true가 출력된다. 정리하면 0은 컴퓨터에서 false로 인식한다. 빈문자열, null, undefined도 false로 인식한다. 여기서 주의할 것은 배열 array는 object인데 배열에 아무값이 없어도 true를 출력한다는 것이다. if ([ ]) { console.log(true); } object는 값이 있든 없든 그 자체로 object가 만들어진 것이라 true로 인식하기 때문이다. 그리고 if문으로 할..

비동기 처리(ajax) function getData() { var tableData; $.get('https://brother.com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefined -> $.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문에 getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값 undefined를 출력. 콜백함수로 비동기 처리 문제점 해결하기 function getData(callbackFunc) { $.get('https://br..

AJAX란? 1. JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술. 2. XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터를 로드할 수 있음. 제이쿼리는 Ajax와 관련된 다양하고도 편리한 메소드를 많이 제공하고 있다. 그중에서도 $.ajax() 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드. $.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공. $.ajax() 메소드의 원형 : $.ajax([옵션]) $.ajax({ url: "/examples/media/request_ajax.php", // 클라이언트가 요청을 보낼 서버의 URL 주소 data: { name: "홍길동" },..