Frontend/Javascript

🐣 변수 유형 JavaScript에는 크게 세 가지 유형의 변수가 존재한다. var, let, const가 있다. let과 const는 ES6부터 사용되기 시작한 변수 타입으로, 기존의 var와는 성격을 달리한다. var ES5까지 변수를 선언할 때 사용하는 키워드로, 중복된 이름의 변수를 정의할 수 있으며, 함수 스코프(Function-level scope)를 가진다. let ES6부터 사용되기 시작한 키워드이다. let으로 변수를 선언할 경우 중복된 이름의 변수를 정의할 수 없으며, let 변수는 블록 스코프(Block-level Scope)를 가진다. const let과 함께 ES6부터 사용되기 시작한 키워드이다. 그 값이 변하지 않는 상수를 선언할 때 사용되어 중복된 이름의 변수를 선언할 수 없으..

Synchronous, Asynchronous JavaScript는 기본적으로는 Synchronous(동기)적이다. 즉, 호이스팅이 된 이후부터 작성된 코드가 동작된다. 하지만 Asynchronous하게 코드를 작성하는 방식들이 존재한다. 가장 익숙하고 대표적인 예로는 setTimeout(브라우저가 제공하는 api로, callback 함수를 전달해 특정 시간이 지난 후 callback 함수를 호출하는 형태)이 있다. Hoisting이란? var, function 정의가 자동으로 가장 최상단으로 올라가는 현상을 말한다. CallBack 함수 Callback 함수에는 Synchronous callback과 Asynchronous callback이 존재한다. function printImmediately(pr..

SPA Application인 회사 프로그램을 개발하면서 JqGrid를 통해 그리드를 생성하는 일이 다수 있었다. JqGrid는 jQuery에서 제공하는 라이브러리로 페이저, 셀 수정, 멀티 체크 등의 기능을 위해 주로 사용하게 되었다. 내 경우에는 주로 서버에서 가져온 데이터를 여러 방향으로 사용하면서 가공한 데이터로 그리드를 초기화하다보니 ajax로 바로 가져온 JSON 형태의 데이터를 사용하는 것이 아니라 가져온 로컬 데이터를 사용했다. 기본 구조 pager 그리드를 pagination하고자할 때 pager로 사용할 해당 element를 줄 수 있다. div를 전달하면 된다. colModel 각 컬럼의 속성을 정의한다. const colModel = [ { name: '컬럼명', index: '보여..

1. 이미지 캡쳐할 영역 지정 첫 번째 인자로는 캡쳐할 영역의 element를, 두번째 인자로는 옵션을 전달할 수 있다. 아래와 같이 제이쿼리 선택자를 이용할 경우에는 '[0]'을 붙여주어야 한다. 또한, 캡쳐되는 영역에서 일부 요소들은 제외하고 싶다면 ignoreElements 옵션을 사용하여 특정 조건에 맞으면 return true(참이면 제외) 하여 제외시킬 수 있다. html2canvas($("#imgDiv")[0], { ignoreElements: (element) => { if (element.className === "ignoreElemId") { return true; } }, }).then(function (canvas) { var img = canvas.toDataURL("image/p..

아래 예제에서는 obj2가 빈 객체와 obj를 합친 것으로, 실상은 obj 객체를 복사한 것으로 볼 수 있다. let obj = { name: "이름", age: 22, company: "회사명" } let obj2 = $.extend({}, obj);

화살표 함수는 ES6의 문법에서 함수를 표현하는 새로운 방식이다. 하지만 화살표 함수는 완전히 기존의 function을 대체하는 것은 아니니 유의하자. 사용 용도가 다른데, 일반적으로 화살표 함수는 파라미터로 함수를 전달할 때 유용하게 사용된다. 형태적으로는 일반 함수는 'function 함수명( ) { ... }'의 형태를 지니지만 화살표 함수는 'const 함수명( ) { ... }'의 형태를 가진다. 일반 함수는 자기 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다고 한다. Javascript에서의 객체가 Java에서의 인스턴스, Javascript에서의 인스턴스가 Java에서의 클래스의 느낌으로 다가오는데 이 부분에 대해서는 다시 확인해봐야 겠다.

jQuery 에서 라이브러리 형태로 제공되는 다이얼로그를 사용하면 보다 간단하게 세련된 디자인의 다이얼로그를 사용할 수 있게 된다. 아래 링크에서 해당 라이브러리를 받을 수 있다. 이 때 반드시 필요한 파일은 jquery-ui.js와 jquery-ui.css 두 가지이다. https://jqueryui.com/download/ Download Builder | jQuery UI Download Builder jqueryui.com jQuery Dialog 호출 방식 먼저 다이얼로그를 호출할 Element가 필요하다. 그 다음, 해당 Element에 다이얼로그를 호출하는 코드는 아래와 같다. 주로 사용해본 옵션과 함수들을 나열했다. $('#dialogSample').dialog({ dialogClass: ..

requirejs.undef([js 모듈 경로]); 제이쿼리 다이얼로그를 이용해 같은 화면을 여러 번 띄울 때, html파일은 하나지만 계속해서 다른 데이터를 보여줘야 하게 되었다. 이 때 RequireJS를 통해 모듈 관리를 하고 있는 상태에서, 이미 모듈이 한 번 로드되고나면 이후에 다른 데이터를 보여줘야할 때에도 이전 값이 나오게 되어 방법을 강구하게 되었다...! requirejs의 글로벌 함수 undef을 사용하면 정의되지 않은 모듈을 허용하며, 모듈 내부 상태를 리셋하기 때문에, 내 경우에는 다이얼로그를 닫을 때(정확히는 beforeClose 함수 호출 시에) 모듈을 리셋하도록 하였다.

일반적으로 jQuery를 사용해 요소에 이벤트를 걸고자 할 때, 아래와 같이 걸게 된다. $().on("event", function(e) { ... }); 이렇게 이벤트를 걸던 중, 해당 이벤트를 바인딩할 때 존재하는 데이터를 함께 전달해야하는 상황이 있었다. 나는 단순히 아래와 같이 했지만.. 해당 이벤트가 바인딩되기 보다는 해당 이벤트의 콜백함수가 바로 실행되는 문제가 생겼다. $().on("event", function(e, data) { ... }); 제이쿼리 공식 API 문서를 보면 데이터를 함께 전달하고자 할 때에는 아래와 같이 보내야 한다고 명시하고 있다. $().on("event", {dataName: data}, function(e) { ... });

$.each() 특정 요소의 하위 요소를 하나씩 꺼내기를 반복한다. Javascript의 Array.forEach와 같은 기능을 한다. + $.each()에서는 일반적인 for문처럼 break, continue가 되지 않는지 의문이었으나 아래와 같이 대체하여 사용할 수 있다. $.each(list, function(idx, item) { if(expression) { return false; // break; return true; // continue; } });