채동규의 블로그

javascript ES6에서는 세개의 점 (...) 으로 이루어진 스프레드 연산자를 제공한다. 스프레드 연산자를 사용하면 배열이나 객체를 원하는 만큼 빠르게 복사, 병합, 분해할 수 있다. 1. 복사 (Copy) 값에 의한 복사로, 기존 배열이나 객체의 값은 바뀌지 않는다. /* 배열복사 */ const numbers = [1, 2, 3, 4, 5]; const copy = [...numbers]; console.log(copy); // [1, 2, 3, 4, 5] /* 값에 의한 복사 확인 */ numbers[0] = 9; console.log(numbers); // [9, 2, 3, 4, 5] console.log(copy); // [1, 2, 3, 4, 5] /* 객체복사 */ const user..

객체 비구조화 할당 const ironMan = { alias: '아이언맨', name: '토니 스타크', actor: '로버트 다우니 주니어' }; const captainAmerica = { alias: '캡틴 아메리카', name: '스티븐 로저스', actor: '크리스 에반스' }; function print(hero) { const { alias, name, actor } = hero; const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`; console.log(text); } print(ironMan); // 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다. print(captainAmerica); // 캡틴 아메리카(..

Falsy는 null, undefined, 0, '', NaN 이 다섯가지를 뜻한다. Truthy는 Falsy가 아닌 것이니 !Falsy다. console.log(!null); // true console.log(!undefined); // true console.log(!0); // true console.log(!''); // true console.log(!NaN); // true 아래와 같이 truthy, falsy에 대한 검증을 할 수 있다. let value = "트루티한 abc"; console.log(value || "출력값은 falsy 입니다."); // "트루티한 abc" value = null; console.log(value || "출력값은 falsy 입니다."); // "출력값은 ..

jQuery로 ajax호출시, 타입이 "jsonp"라면 콜백함수를 적어주는건 위험합니다. 이 버그를 발견하고나서 서비스에 존재하는 모든 "jsonpCallback : ~ " 소스라인을 지워버렸네요. [jQuery에서는 jsonp를 이렇게 호출합니다] $.ajax({ type: "GET", data: { "testParam":"123" } url: "https://www.myservice.com/getUserInfoJsonp.do", dataType: "jsonp", jsonpCallback: "jsonCallbackForAlert" }); 1. jsonp는 응답이후 실행될 콜백함수를 지정할 수 있습니다. jsonpCallback: "jsonCallbackForAlert" 같은 식으로 지정하는데요 func..

JSON은 키-값 쌍으로 이루어진 데이터 양식입니다. var json = { key_title_1 : "alpha", key_title_2 : "bravo", key_title_3 : "charlie", //... key_title_25 : "yankee", key_title_26 : "zulu" }; console.log(json.key_title_1); // "alpha" console.log(json.key_title_2); // "bravo" console.log(json.key_title_3); // "charlie" //... console.log(json.key_title_25); // "yankee" console.log(json.key_title_26); // "zulu" 대부분 값을 출..

시작전에 세가지만 알아두세요. 자바스크립트는 (1) 소스가 모두에게 노출된다 (2) 조작 가능하다 (3) 한줄씩 실행된다 ---------------------------------------------------------------- 이번에는 쿠팡 모바일웹에서 스크립트를 조작해보겠습니다. B상품페이지에서 장바구니 담기를 눌렸을때 A상품이 담기게 해보려고합니다. 쿠팡에서 A상품을 팔고있네요. 장바구니 담기 버튼 클릭시 어떤일이 일어나는지 궁금한데요 onclick 이벤트를 HTML에 친절하게 걸어놓지는 않았네요. 그러나 Event Listeners를 봤더니 BuyAreaCartApi.js에 클릭이벤트가 걸려있다고 합니다. 왠만한 버튼들은 클릭이벤트가 없을수 없죠! 당장 이동해봅시다. 57라인에 클릭이벤트..

시작전에 세가지만 알아두세요. 자바스크립트는 (1) 소스가 모두에게 노출된다 (2) 조작 가능하다 (3) 한줄씩 실행된다 ---------------------------------------------------------------- 다들 아시는 개발자도구(F12)로 스크립트를 조작하는 방법에 대해서 알아보겠습니다. 여기 구글 모바일웹 페이지가 있습니다. 소스를 한번 까볼까요? Google 이미지가 박힌 img 태그를 아래처럼 수정하고 클릭해봅시다. (HTML 수정 단축키는 F2) 로고 src를 바꿨습니다. 클릭시 넷플릭스로 가게하려고 onclick 이벤트도 추가해봤어요. 그러나 클릭시 goNetflix 함수가 정의되어있지 않아 콘솔에러가 뜨네요.. 콘솔창에 goNetflix 함수까지 선언해줍니다! ..