배워가는블로거

● dataTables - 2 오늘은 지난 포스팅에 이어 dataTables의 server-side processing에 대해서 정리하겠습니다. 너무 많은 데이터 행을 처리할 때는 너무 느리고 모든 데이터를 다루기가 힘듭니다. 이를 해결하기 위해서 제공해주는 방법이 바로 server-side processing입니다. ● Server-side processing paramter server-side processing은 데이터를 그리기 위해 javascript에서 서버측으로 ajax 요청을 합니다. 서버에서는 이 ajax요청을 받아 해당하는 데이터만 다시 리턴해주게 됩니다. 그럼 먼저 서버로 보내는 파라미터 종류를 살펴보겠습니다. - draw count. ajax요청에 의해 그려질 때 dataTable이..

● DataTables? dataTables란 데이터를 테이블로 쉽게 표현하고 다양한 기능을 제공하는 라이브러리입니다. 아래 그림과 같은 다양한 기능을 제공하고 있습니다. (https://datatables.net/) ● DataTables 사용 방법 먼저 DataTables를 사용하기 위해서는 css와 js파일을 추가해야 합니다. 각 url은 아래와 같습니다. https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js 이제 아래 테이블과 같은 간단한 테이블을 만드는 예제를 살펴보겠습니다. 뭔가 기능도 많고 복잡할 것 같지만 구현 방법은..

■ Validate 정리 (중복, 필수값 체크) validate.js를 이용한 validate check 방법에 대해 정리하겠습니다. https://validatejs.org/#validate-js ● validate.js 추가 먼저 validate 라이브러리를 사용하기 위해 js파일을 추가해야 합니다. 해당 CDN주소를 직접 참고하거나 다운로드 후 경로를 추가하면 됩니다. 아래와 같이 추가해주시면 라이브러리 준비는 끝납니다. ● validate check code 간단한 예제와 함께 사용법을 정리하겠습니다. 먼저 아래와 같이 간단한 html의 회원가입 form을 먼저 작성합니다. ID Password Password Check JOIN 위와 같이 간단하게 form을 만들면 아래와 같은 모습이 나올거에요..

■ JSON Property name 다루기 Json의 property name을 원활하게 다루고, 그 성질에 대해 정리해보자 합니다. Json의 형태는 object형태와 보통 동일하게 이루어져 있습니다. 기본적인 형태는 아래와 같아요. 예를 들어 object를 하나 만들어보겠습니다. var testObj = { "name":"John", "age":13, "city":"Seoul", "grade":"A" }; 보통 이렇게 property name : value 형태로 구성되어 있습니다. 그리고 property name은 보통 String 형태로 되어 있죠. 그렇기에 object에서 값을 가져올 때는 다음과 같이 사용이 가능합니다. 쉬운 예제를 위해 alert을 사용하겠습니다. alert(testObj...

■ 클래스 (Class) 오늘은 클래스라는 개념을 정리해보겠습니다. ES6에서는 클래스 선언이 추가가 되었습니다. 클래스 타입으로 클래스를 정의하고 new키워드를 통해 해당 클래스의 인스턴스를 만들 수 있습니다. 그리고 이를 사용할 수 있습니다. 먼저 어떻게 클래스 타입을 사용하는지 예제를 보겠습니다. Class Info { constructor(name, age) { this.name = name this.age = age } print() { console.log('이름 : ${this.name} , 나이 : ${this.age}') }} 위와 같이 Info라는 클래스를 정의했습니다. Info클래스는 이름과 나이 정보를 가지고 있고, 이를 출력하는 메소드가 있습니다. 이를 사용하기 위해서는 위에 말한..

■ 프라미스 (Promise)오늘 정리할 개념은 프라미스입니다. 프라미스는 비동기 처리를 위한 방법 중 하나입니다. 프라미스가 성공한 경우에는 정상적으로 명령이 실행되며, 실패할 경우는 에러가 발생해요 간단한 예시와 함께 정리해보겠습니다. const get = () => new Promise((resolve, reject) => { var req = new XMLHttpRequest() req.open('GET', url) req.onload = () => (req.status == 200) ? resolve(req.response) : reject(Error(req.statusText)) req.onerror = (error) => reject(error) req.send()}) 위와 같이 특정 url..

■ ES6의 객체와 배열 ES6의 객체와 배열을 다루기 위한 다양한 방법이 있습니다. 그 중에서 구조 분해, 객체 리터럴 개선, 스프레드 연산자 사용법을 정리하겠습니다. ● 구조 분해 (Destructuring) 구조 분해를 통해 객체 안의 필드 값을 사용할 수 있고, 원하는 변수에 대입할 수 있어요 먼저 객체의 구조 분해를 살펴보겠습니다. 예시로 객체를 하나 만들어 볼게요 var car = { color: "black", engine: "turbo", type: "SUV"} 위와 같이 3개의 필드를 가지는 car 객체가 있다고 가정하겠습니다. 여기서 color 필드의 값을 가져와 변수로 사용하고자 합니다. 방법은 아래와 같이 간단하며, 변수의 값을 변경해도 원래 필드의 값은 변경되지 않습니다. car ..

■ 화살표 함수 (arrow function) ES6에서 유용하게 사용되는 화살표 함수에 대해서 보겠습니다. 화살표 함수를 사용하면 함수 키워드 없이도 함수를 만들고, return 없이도 계산 결과가 자동으로 반환이 됩니다. 위 모습이 화살표 함수의 기본 모습이라고 할 수 있습니다. 다만, 파라미터가 단 하나인 경우는 괄호를 생략해도 됩니다. ● 비교 기존 사용하는 함수 형태와 화살표 함수의 형태를 비교해보겠습니다. var printText = function(txt) { return '입력 : ${txt}'}var printText = txt => '입력 : ${txt}' 한 줄로 간략하게 줄어든 것이 보이나요? 파라미터가 2개의 경우도 보겠습니다. var printText = function(txt1..

■ ES6 변수 선언 기존 ES6 이전에서는 var를 통해 변수를 선언하여 사용했습니다. 하지만 최신 자바스크립트라 불리는 ES6부터는 다양한 방법이 추가되었는데요. 그 추가된 방법에 대해서 간단하게 정리해보겠습니다. ● const const는 값을 변경할 수 없는 변수입니다. ES6에서는 const를 도입하여 값을 재설정하는 것이 불가능하도록 하였습니다. 만약 이를 아래와 같이 시도한다면 콘솔오류가 발생합니다. const isChecked = true;isChecked = false; ● let let을 통해 함수 레벨과 블록 레벨의 렉시컬 스코프 규칙을 지원합니다. 즉 if문과 같은 {} 블록 안에서 let은 변수 영역을 그 블록 안으로 한정시킵니다. 즉 블록 밖의 값에 영향을 끼치지 않아 글로벌 변..

■ jQuery 셀렉터 jQuery의 셀렉터에 대해 정리하겠습니다. 셀렉터 가장 기본적이고 중요한 개념입니다. 셀렉터 문자는 문서 내에서 어떠한 것을 선택하여 사용할지 정하는 것인데요. 수 많은 종류가 있지만, 가장 중요하고 빈번하게 사용되는 셀렉터 위주로 정리하겠습니다. ● 태그 셀렉터html 문서 내 태그를 선택합니다. 예를들어, ... 태그를 선택할 경우 사용되는데, 아래와 같습니다. 모든 예는 해당 셀렉터를 사용하여 클릭 이벤트를 발생하는 모습으로 하겠습니다. $("p").click(function(){ ... }); ● ID 셀렉터html 태그 중 id 값을 가진 요소를 선택하는데요. 그중 특정 id값을 직접 입력하여 선택할 수 있습니다. #문자를 사용하는데요. ... 인 경우 해당 셀렉터 사용..