자바스크립트 프론트엔드 프로젝트 가이드 (심준식, 이창욱 지음) 정오표 (1판1쇄)

첨부파일도 동일한 내용입니다. 필요하시다면 첨부파일을 다운로드해 주세요. 

1. [282~283p 코드 영역] 페이징 요소에 대한 CSS

> 283p의 마지막에 이어서 다음과 같은 CSS가 추가되었습니다.

.paging {

    text-align: center;

    margin-top: 23px;

}

.paging a {

    text-decoration: none;

    margin-right: 8px;

    color: #bd5a00;

}

.paging a.current {

    font-weight: bold;

    color: #ffb500;

}

.paging a.prev {

    margin-right: 15px;

}

.paging a.next {

    margin-left: 7px;

}

2. [295p] focus() 함수 추가 (코드 12~15행 사이)

> 295p의 원 코드에서, 빈 행을 포함하여 12행부터 15행 영역은 다음과 같습니다.

         $('.btn-search').trigger('click');

      }

   });

});

> 이 중 14행과 15행 사이에 코드를 추가하여 페이지 로드 시에 '검색창'으로 포커스를 옮기도록 합니다.

         $('.btn-search').trigger('click');

      }

   });

   // 페이지 로드 시 검색창을 포커스한다

   $('#txt-search').focus();

});

3. [295p] 리스트 갱신 시 기존 항목들을 지우기 위한 empty() 추가

> 295p 코드 중 맨 하단에서 2번째 행은 다음과 같습니다.

var $list = $('.list');

> 뒤쪽의 $('.list') 뒤에 focus() 함수를 추가하여 목록 엘리먼트를 찾아 내용을 비웁니다.

// 목록 엘리먼트를 찾은 후 내용을 비워준다

var $list = $('.list').empty();

4. [296p] search() 함수의 항목 번호 계산식 추가/대체

> 296p 코드 중 아래로부터 7번째 행은 다음과 같습니다.

$elem.find('.item-no').html(i + 1);

> 여기서 html(괄호) 안에서 'i+1'로 정의된 항목 번호를 좀 더 정확히 계산하기 위해 변수 'no'을 추가하여 대체합니다.

// 각 항목의 번호를 계산한다

var no = (page - 1) * perPage + i + 1;

$elem.find('.item-no').html(no);

5. [299p] search() 인자 부분에서 perPage의 디폴트값 유도

> 299p의 2번째 코드 박스 내용 중 3번째 행의 코드는 다음과 같습니다.

search(1, 10, searchKeyword);

> 여기서 search() 함수의 2번째 인자값인 '10'은 책에서 설명되었듯 'perPage' 인자의 디폴트값이므로, 디폴트값을 유도하기 위해 다음과 같이 'null'로 바꾸는 게 좋을 것 같습니다.

search(1, null, searchKeyword);

6. [310p] 첫 번째 행 오류 - 코드 삭제됨

> 310p 코드 박스의 불완전한 첫 번째 행의 코드는 308p에서 구현되었듯 다음과 같아야 합니다.

var $nextElem = $('<a href="javascript:search(' + nextPage + ',' + perPage + ','' + searchKeyword + '')">다음</a>');