데이터바인딩이란?
화면에보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다.
- 1. 사용자가 입력한 정보를 얻어옴
- 2. 찾아온 데이터를 갱신
클라이언트 사이드 랜더링 이란?
웹서비스 개발방식은 두가지가 있습니다 서버사이드 랜더링, 클라이언트 사이드 랜더링
서버사이드 랜더링
1. 서버에서 HTML 파일을 미리 다 완성해서 보내주는 방법
클라이언트사이드 랜더링
2. 서버에서 텅빈 HTML 파일 + 중요데이터만 보내고 HTML에 데이터바인딩을 한뒤 완성하는건 클라이언스 사이드에서 자바스크립트로 하는 방법
오늘날은 서버사이드에서 모든 데이터를 처리하면 무겁고 처리 속도또한 느려지기 때문에 반드시 서버사이드에서 처리해야할 중요하고 보안성이 필요한 데이터를 제외하고는 클라이언트 사이드 랜더링으로 처리하는 추세입니다.
[HTML]
<h1>Data binding</h1>
<div class="card-group container">
<!-- 카드생성 부분 -->
<!-- 카드생성 부분 -->
<!-- 카드생성 부분 -->
<!-- 카드생성 부분 -->
</div>
<div class="container my-5">
<button class="btn btn-primary" type="button" id="sortprice">
가격순 정렬
</button>
<button class="btn btn-primary" type="button" id="abc">
가나다순 정렬
</button>
<button class="btn btn-primary" type="button" id="cba">
다나가순 정렬
</button>
<button class="btn btn-primary" type="button" id="filterprice">
6만원 이하 가격 필터
</button>
<button class="btn btn-success" type="button" id="reset">
초기화 버튼
</button>
</div>- 카드 생성부분에 서버에서 받아온 데이터에 맞게 아이템 리스트를 생성합니다.
[데이터 바인딩]
//서버로부터 받아왔다 가정한 데이터
var products = [
{ id: 0, price: 70000, title: "Blossom Dress" },
{ id: 1, price: 50000, title: "Springfield Shirt" },
{ id: 2, price: 60000, title: "Black Monastery" },
];
// 기존의 products를 cloneproducts에 새롭게 담는다.
// 데이터를 정렬하기 위해 조작하는 과정에서 기존의 배열 순서가 흐트러지기때문에 원본을 보호하기 위함
var cloneproducts = [...products];- products는 서버로부터 받아온 아이템 데이터라고 가정합니다.
- 우선적으로 데이터 조작을하며 데이터가 변질될 우려가 있기 때문에 cloneproducts 라는 변수에 데이터를 넣어 사본 을 만듭니다.
* 주의: " var cloneproducts = products " -> 이 방법으로 선언하는것은 사본이 생기는게 아니라 cloneproducts 와 products가 서로 같은 값을 공유하게 되어버린다 즉 cloneproducts는 주소값을 저장하는 변수가 되버리는 것!!
// 데이터 바인딩 함수는 파라메터로 list라는 변수로 선언된 배열들을 받는다.
// 인자로 받은 배열의 데이터를을 추출후 템플릿에 담아 화면에 뿌려준다.
function 데이터바인딩(list) {
list.forEach(function (a) {
var template = `<div class="card">
<img src="https://via.placeholder.com/600" />
<div class="card-body">
<h5>${a.title}</h5>
<p>가격 : ${a.price}</p>
</div>
<button class="btn btn-danger">주문하기</button>
</div>`;
//반복될때 마다 붙어야 되고 template은 반복문 내부에 있기 때문에 반복문 내부에서 append
// $(".card-group").eq(i).append(template); -> eq()때문에 해당 인덱스에 template를 넣게 된다.
$(".card-group").append(template);
});
}
데이터바인딩(cloneproducts);- function 데이터 바인딩()은 데이터 cloneproducts을 동적으로 HTML에 바인딩하기위한 함수
- cloneproducts의 값을 받아와 template을 만든뒤 append() 함수를 활용해 card-group에 붙혀줍니다.
- forEach반복문을 통해 cloneproducts 배열 내부값의 수 만큼 card 가 생성됩니다.
[배열 정렬 함수 sort()]
sort()인수에 함수를 지정하면 아래의 값중 하나가 반환된다.
- a 인수가 b 인수보다 작을경우 : -, 음수
- 두 인수가 같을 경우 0
- a 인수가 b 인수보가 클 경우: + , 양수
음수(-) 일 경우 b가 a 보다 앞쪽으로 이동한다.
양수(+) 일 경우 두 인수 그자리 그대로 있는다.
sort()함수는 문자, 숫자, object 를 정렬하기 위해서는 각각 따로 명령어를 프로그래밍 해야한다.
EX)
// sort()는 문자 정렬 함수
var 어레이 = ["가", "라", "마", "다", "나"];
어레이.sort();
console.log(어레이);
var 어레이 = ["a", "d", "b", "e", "c"];
어레이.sort();
console.log(어레이);
//======================================================================================
// sort()는 숫자는 앞의자리 숫자를 기준으로 정렬이되버린다. 함수
//때문에 a,b 두 인자를 직접 비교하는 식을 작성해야한다.
var 어레이 = ["1", "3", "4", "21", "5"];
어레이.sort(function(a,b){
// a-b 이후 음수가 나오는지 양수가 나오는지를 확인하기 위함
return a-b;
});
console.log(어레이);
//======================================================================================
var products = [
{ id: 0, price: 70000, title: "Blossom Dress" },
{ id: 1, price: 50000, title: "Springfield Shirt" },
{ id: 2, price: 60000, title: "Black Monastery" },
];
cloneproducts.sort(function (a, b) {
//문자열 빼기 문자열 은 0 이다.
// 문자열 자체로는 음수,양수를 구분할 수 없기때문에 관계연산자로 부울값을 얻는다.
// 얻게된 부울값을 조건문 if()를 통해 음수,양수 값을 return할수 있도록 한다.
if (a.title < b.title == true) {
return -1;
} else {
return 1;
}
[배열 복사 함수 filter()함수]
filter()함수는 배열의 사본을 만드는 함수입니다.
사본을 만들 배열에서 특정 조건에 맞는 함수에 맞는 데이터만 뽑아 만드는 함수이며 ,
sort()와의 가장큰 차이점은 sort()는 원본 배열을 조작하는 함수 이지만 filter()는 반드시 새로운 변수를 만들어 조건에 맞는 데이터만 사본으로 만듭니다.
EX)
var array = [7,3,5,2,40];
var newarray = array.filter(function(a){
return a < 4
})
[sort(),filter()함수를 이용한 데이터 조작]
위에서 살펴본 sort(), filter() 함수를 사용해 데이터를 조작할 수 있다.
예시에서는 버튼을 만들어 조작했다.
- 가격순정렬 버튼 => 숫자정렬 (price 별로 정렬)
- 가나다순정렬 버튼 => 문자정렬 (title 별로 정렬 )
- 다나가순정렬 버튼 => 문자역순정렬 (title 역순 별로 정렬 )
- 6만원 이하 가격 버튼 => filter함수 사용 (price < 60000 )
- 초기화 버튼 => 초기에 가만히 놔둔 products 배열 호출
// [바인딩 된 데이터 값을 가격순 으로 정렬]
$("#sortprice").on("click", function () {
//card-body내부의 값들을 계속해서 초기화 한다.
$(".card-group").html("");
//정렬을 위한 함수 sort()
// sort()자체는 문자열 정렬을 위한 함수이기 때문에 추가적인 조작이 필요하다.
// sort()를 하면 원래 데이터가 변형되서 저장됨
cloneproducts.sort(function (a, b) {
// a-b가 양수 이면 b를 왼쪽으로 넘기고 , a-b가 음수이면 둘다 그자리 그대로있는다.
return a.price - b.price;
});
// 정렬된 데이터를 다시 html에서도 표현하기위한 재 바인딩
데이터바인딩(cloneproducts);
});
// =====================================================================================
$("#abc").on("click", function () {
$(".card-group").html("");
cloneproducts.sort(function (a, b) {
//문자열은 빼기 값이 안나오고, 비교를 했을때 부울 타입으로 나온다.
//크기를 비교해서 b가 더 크다는 결론이 나오면 부울타입 true가 나온다
// if()문을써서 맞을 시에 음수를 return해 두 글자 그자리 그대로있게 한다.
if (a.title < b.title == true) {
return -1;
} else {
return 1;
}
});
// 정렬된 데이터를 다시 html에서도 표현하기위한 재 바인딩
데이터바인딩(cloneproducts);
});
// =====================================================================================
// [바인딩 된 데이터 값을 다나가순 이름 정렬]
$("#cba").on("click", function () {
$(".card-group").html("");
cloneproducts.sort(function (a, b) {
if (a.title < b.title == false) {
return -1;
} else {
return 1;
}
});
// 정렬된 데이터를 다시 html에서도 표현하기위한 재 바인딩
데이터바인딩(cloneproducts);
});
// =====================================================================================
// [filter 함수 를 사용해 조건에 충족하는 가격만 출력]
$("#filterprice").on("click", function () {
$(".card-group").html("");
//filter 함수는 배열에서 일부를 복사한뒤 다른 배열에 넣는다. -> 반드시 새로생성할 변수 지정
var filterproducts = products.filter(function (a) {
return a.price <= 60000;
});
//a는 당연히 filterproducts 내부로 복사된 object 값이다.
데이터바인딩(filterproducts);
});
// =====================================================================================
// [보호된 원본 배열을 통한 초기화 버튼 구현]
$("#reset").on("click", function () {
$(".card-group").html("");
데이터바인딩(products);
});
출처:
https://codingapple.com/course/javascript-jquery-ui/
'JavaScript > javascript UI' 카테고리의 다른 글
| UI: Scroll animation (0) | 2021.09.20 |
|---|---|
| UI: 상품 업데이트(AJAX) (0) | 2021.09.18 |
| UI: Select option (하드코딩 & forEach함수) (0) | 2021.09.16 |