[알고리즘/자바스크립트] 페이지네이션 헬퍼 (Pagination Helper)

[문제] 

여러분은 PaginationHelper 생성자 함수를 완성해서 Rhaegal의 페이지 세는 작업을 도와주어야 합니다.

이 PaginationHelper는 글자들이 들어있는 배열(collection)과, 한 페이지에 얼마나 많은 글자를 가질 수 있는지 알려주는 숫자(itemsPerPage)을 가질 수 있게 설계되었습니다.

 

다음의 예를 통해 이 class를 어떻게 사용할 수 있는지 알아봅시다.

var helper = new PaginationHelper(['a','b','c','d','e','f'], 4);
// PraginationHelper를 사용하기 위해 helper 객체를 생성합니다.

// helper instance는 다음과 같이 사용할 수 있습니다.
helper.pageCount(); // should == 2, 총 페이지 수를 셀 수 있습니다.
helper.itemCount(); //should == 6, 총 글자 수를 알려줍니다.
helper.pageItemCount(0); //should == 4, 0 page에는 4개의 글자가 있다고 알려줍니다.
helper.pageItemCount(1); // should == 2, 1 page에는 2개의 글자가 있다고 알려줍니다. 이 예에서는 1page가 곧 마지막 페이지가 됩니다.
helper.pageItemCount(2); // should == -1, 2 page는 없으므로 invalid한 입력입니다. 그래서 -1을 반환해줍니다.

// pageIndex method는 글자의 index를 입력으로 받아 해당 글자가 속한 페이지를 알려줍니다.
helper.pageIndex(5); //should == 1 (0 page에서부터 시작하므로)
helper.pageIndex(2); //should == 0
helper.pageIndex(20); //should == -1
helper.pageIndex(-10); //should == -1

 

* TODO: 아래의 함수 내용들을 완성해주세요.

// The constructor function
function PaginationHelper(collection, itemsPerPage){

}

// What is prototype?
// this function returns the number of items within the entire collection
PaginationHelper.prototype.itemCount = function() {

};

// this function returns the number of pages
PaginationHelper.prototype.pageCount = function() {

};

// this function returns the number of items on the current page. page_index is zero based.
// this method should return -1 for pageIndex values that are out of range
PaginationHelper.prototype.pageItemCount = function(pageIndex) {

};

// this function determines what page an item is on. Zero based indexes
// this method should return -1 for itemIndex values that are out of range
PaginationHelper.prototype.pageIndex = function(itemIndex) {
    
};

 

 

---

 

★ 참고 사이트: 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function

Using a Constructor Function

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

상속과 프로토타입

 

 

function PaginationHelper(collection, itemsPerPage) {
    this.collection = collection;
    this.itemsPerPage = itemsPerPage;
    this.itemLen = collection.length;
}

자바스크립트에서 생성자(constructor) 함수를 작성하여 객체를 정의하였다.

파라미터(collection, itemsPerPage)로 전달받은 값을 객체의 속성으로 할당하기 위해 this라는 키워드를 사용한다.

 

function PaginationHelper(collection, itemsPerPage) {
    this.collection = collection;
    this.itemsPerPage = itemsPerPage;
    this.itemLen = collection.length;
}

var helper = new PaginationHelper([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 6);

console.log(helper.collection); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
console.log(helper.itemsPerPage);   // 6
console.log(helper.itemLen);    // 14

new 키워드를 사용하여 객체의 인스턴스를 생성한다.

helper라는 새로운 객체 인스턴스에 [1, 2, 3, ... , 14]와 6과 같은 속성들을 할당하였다.

이제 helper.collection은 [1, 2, 3, ... , 14]을, helper.itemsPerPage는 6이란 값을 가진다.

helper.itemLen은 14를 가진다.

 

 

★ 190531 :

위 코드에서 this.itemLen를 만들지 않는 것이 좋다고 피드백 받았다. 그 이유는 이미 this.collection이라는 속성을 통해서 collection을 참조할 수 있도록 만들었기 때문이다. 해당 정보의 length는 언제든지 접근할 수 있다. 하나의 자료를 굳이 2개의 속성으로 나눠서 관리하면 추후에 collection의 값이 바뀔 수 있어 매우 복잡해질 수 있다.

 

 

---

// this function returns the number of items within the entire collection
PaginationHelper.prototype.itemCount = function() {
    return this.itemLen;
};

총 글자수를 return하는 함수이므로 아까 미리 만들어둔 this.itemLen을 return한다.

 

---

PaginationHelper.prototype.pageCount = function() {
    this.pageDivide = this.itemLen / this.itemsPerPage
    return Math.ceil(this.pageDivide);
};

총 페이지 수를 세는 함수이다.

 

총 글자 수가 만약에 14개이고, 한 페이지에 6개의 글자가 들어갈 수 있다면

만들어질 수 있는 페이지 수는 14 / 6으로 나눈 값을 올림한 값이 된다.

 

(1페이지 - 6글자 | 2페이지 - 6글자 | 3페이지 - 2글자)

 

---

PaginationHelper.prototype.pageItemCount = function(pageIndex) {
    this.fullPages = Math.floor(this.pageDivide);
    this.lastPageItems = this.itemLen % this.itemsPerPage;
    
    if (pageIndex > -1 && pageIndex < this.fullPages) {
        return this.itemsPerPage;
    } else if (pageIndex === this.fullPages) {
        return this.lastPageItems;
    } else {
        return -1;
    }
};

페이지 번호가 0부터 시작한다고 했을 때,

특정한 페이지 번호가 전달되면 그 페이지의 총 글자수를 구하는 함수이다.

 

위 예시에서 만약에 2라는 값이 전달되면 6이 return되어야한다.

 

1) 먼저 글자가 풀로 가득차 있는 페이지 수(fullPages)는 14 / 6을 내림한 값이다.

만약 전달된 pageIndex가 -1보다 크고 fullPages보다 작다면 글자가 가득 차있다는 뜻이므로

this.itemsPerPage를 return한다.

 

2) pageIndex가 만약 fullPages와 같다면 마지막 페이지라는 뜻이다.

14와 6을 나누고 남은 나머지 값을 구하여 return한다.

 

3) 위에 해당하지 않는 값이 index로 주어진다면 -1을 return한다.

 

---

PaginationHelper.prototype.pageIndex = function(itemIndex) {
    if(itemIndex < this.itemLen) {
        return Math.floor(itemIndex / this.itemsPerPage);
    } else {
        return -1;
    }
};

글자의 index를 받아서 해당 글자가 속한 페이지 인덱스를 구하는 함수이다.

 

만약에 13이라고 한다면 13번째 index의 글자는 마지막 페이지에 속하므로 

마지막 페이지 번호인 2를 출력해야한다. (페이지 번호는 0부터 시작)

 

일단 주어진 item의 번호가 collection배열의 전체 길이보다 작은지 판별해야 한다.

만약에 collection배열의 전체 길이보다 크거나 같아지면

해당 collection에 속한 글자가 아니라는 뜻이므로 -1을 return한다.

 

item번호가 배열의 전체 길이보다 작다면 이렇게 구한다.

 

      0 페이지             1페이지          2페이지

(1, 2, 3, 4, 5, 6)  (7, 8, 9, 10, 11, 12)  (13, 14)

 

위와 같은 페이지들 중에서 itemIndex가 13이고 한 페이지에 총 6개가 들어갈 수 있다면,

13을 6으로 나눈다. 2.166666...이 나온다.

 

즉, 첫 번째 페이지에서 6개, 두 번째 페이지에서 6개, 3번째 페이지에서 드디어 13번 째 수(14)가 나온다는 말이다.

페이지수는 0부터 시작하므로 위 값에 소숫점 내림을 해준다. -> 2

 

만약 itemIndex가 12라면 12번 째 글자인 13이 있는 페이지 번호를 구해야 한다.

12 / 6 = 2 이므로 2를 출력한다.

 

itemIndex가 11이라면 11번 째 글자인 12가 있는 페이지 번호를 구해야 하므로

11 / 6 = 1.8333... 이므로 소숫점 내림으로 1이 된다.