[KH국비지원 웹개발자 과정] Day_44 키워드 페이징기능, 자바스크립트 기초, DOM의 개념.

해당 포스팅은 강의 복기용으로 키워드를 기록하는 용도의 포스팅입니다.
--------------------------------------------------------------------------------------------------

-회원 관리프로그램에서 유효성 검사나 부가적인 기능은 자바스크립트나 라이브러리로 처리한다.

-공지사항 게시판의 페이징 기능 실습)
페이징 기능은 게시판의 페이지를 구현하는 것.
한 페이지에 몇 개의 게시물을 출력할 지,
페이지 네비게이터는 어떻게 출력할 지에 대한 것.

한 페이지에 5개의 게시물을 출력하고
페이지 네비게이터는
1 2 3 4 5 [다음]
[이전] 6 7 8 9 10 [다음]
[이전] 11 12 13
처럼 만드는 식으로 실습을 진행.

전체 101개의 게시물이 있고
한 페이지에 5개의 게시물을 출력하고
페이지네비게이터는 5페이지 단위로 화면에 표시되도록 한다면,

전체페이지 수 : 21
-> 101을 5로 나눈 몫 20, 나머지가 있으므로 +1 하여 21

게시물 넘버는
1페이지의 게시물 넘버 : 1~5, 시작값은 1 끝 값은 5
2페이지의 게시물 넘버 : 6~10 시작값은 6 끝 값은 10
3페이지의 게시물 넘버 : 11~15 시작값은 11 끝 값은 15
4페이지의 게시물 넘버 : 16~20 시작값은 16 끝 값은 20
...
21페이지의 게시물 넘버: 101 시작값은 101 끝 값은 101
-> 시작값: (현재페이지 * 5) - (5 - 1) , 끝 값: 현재페이지 * 5
-> 시작값과 끝 값을 쿼리문 BETWEEN 함수에 위치홀더로 적용
-> IF문을 이용하여 시작값과  끝 값에 대한 값 범위초과 제한


페이지 네비게이터는
현재 페이지가 1~5사이의 값일 때, 시작값은 1 끝 값은 5
현재 페이지가 6~10사이의 값일 때, 시작값은 6 끝 값은 10
...
현재 페이지가 101일 때 시작값은 101, 끝 값은 101
-> 시작값: ((현재페이지값-1) / 5) + 1
->끝 값: 시작값 + 4
-> IF문을 이용하여 시작값과  끝 값에 대한 값 범위초과 제한

1.현재 페이지에 따라 출력할 게시문의 시작넘버와 끝 넘버를 구하고 쿼리문을 통하여 조회한다.
2.최초 조회 시 현재 페이지는 1이며 이후 DAO에서 화면단으로 넘겨줄 문자열( 화면에서 서블릿으로 현재 페이지 값을 넘겨주는 태그를 생성하는 문자열) 에 의하여 현재 페이지 값이 갱신되며 이를 토대로 출력할 게시물의 시작넘버와 끝넘버, 출력할 네비게이터의 시작넘버와 끝넘버를 구한다.

페이징 기능을 위한 새로운 쿼리문)
SELECT ROW_NUMBER() OVER(ORDER BY NOTICE_NO DESC) AS NUM, NOTICE_TBL.* FROM NOTICE_TBL;
이 쿼리문을 인라인 뷰로 이용하고 WHERE절에 BETWEEN을 사용하여 게시물을 잘라서 조회한다.

-> ROW_NUMBER() OVER(ORDER BY 절)  
 : 윈도우 함수이다. 랭크를 구하는데 사용하며 동일한 값에 대해서도 랭크를 구분한다. (DENCE_RANK()함수는 동일 값은 동일 랭크)
 : 함수와 같이 해당 테이블의 모든 컬럼을 출력하고 싶은 경우 컬럼 자리에 '테이블명.*' 로 기재한다.

DB를 넘버링 하는 두가지 방법
1. ROWNUM 기능을 이용하는 방법
  : ORDER BY 절과 함께 사용할 경우 넘버링 후 정렬이 되기 때문에 넘버링의 의미가 없어져버림.
2. ROW_NUMBER() OVER(ORDER BY 절)
  : 서브쿼리를 이용하여 정렬된 테이블을 구하고 넘버링을 하는 것보다 효율적인 방식이다.

ArrayList객체와 String객체를 전달하는 두가지 방법
1. Map컬렉션프레임워크를 사용한다.
2. VO클래스를 새로 만들어 사용한다.

이후 실습할 것
댓글기능, 파일업로드 다운로드 기능.

스프링으로 프로젝트를 할 때는 jdbc를 사용하지 않음. 

지금까지의 진도 및 로드맵
1.java
2.oracle
3.jdbc - 콘솔 출력
4.html&css - 콘솔 출력을 브라우저로
5.jsp/servlet - form태그 (jsp는뷰, servlet은 컨트롤러) -> mvc2패턴
6.JS, jQuery
7.Mybatis - JDBC 대체 실무에서 JDBC 안씀
8.Spring - Framework사용, Servlet 대체
9. Ajax, API, 라이브러리, Editor, ... (Final에서 사용)

 

VSCODE를 이용한 자바스크립트 기초 실습
자바스크립트는 html의 <script></script> 태그 사이에 작성한다.
개발자 도구의 console 탭에서 확인할 수 있다.

JS는  문법 체크가 관대하고 자바와 문법이 비슷하여 기본기는 쉽지만
DOM에서 어렵다고 함.

JS 기초
변수, 숫자, 문자열, 형변환, 함수, 연산자

JS와 HTML은 섞일 수 없다. 이 둘을 연결해주는 인터페이스 역할을 하는 것이
DOM(Document Object Model): 문서 객체 모델이다.