머털&보약의 기록

부모 컴포넌트 new Vue({ //element id el: '#main', //vue에서 관리할 데이터 data: { items: [], // 데이터 목록 currentPage: 1, //현재 페이지 firstPage: 0, //첫번 째 페이지 lastPage: 0, //마지막 페이지 startIdx: 0, //첫번 째 페이지 번호 endIdx: 0, //마지막 페이지 번호 empNm: '', //사원명 }, //data를 기반으로 변경할 속성(data의 변경 감지) computed: { //변경된 데이터 displayedItems() { return this.items; }, }, //vue 컴포넌트 화면에 렌더링 된 직후 실행(컴포넌트의 템플릿이 DOM에 추가/화면에 표시된 직후) mounted(..

목차 ddl(Oracle) /* 게시판 */ CREATE TABLE "BOARD_INFO" ("BOARD_NO" NUMBER NOT NULL ENABLE, "TITLE" VARCHAR2(50) NOT NULL ENABLE, "CONTENT" VARCHAR2(4000) NOT NULL ENABLE, "USER_ID" VARCHAR2(20) NOT NULL ENABLE, "USE_YN" CHAR(1) DEFAULT 'Y' NOT NULL ENABLE, "REG_DATE" DATE DEFAULT SYSDATE NOT NULL ENABLE, "MOD_DATE" DATE, CONSTRAINT "BOARD_INFO_PK" PRIMARY KEY ("BOARD_NO") ); COMMENT ON COLUMN BOARD_..

xml /* 게시글 목록 조회 */ (#{pageNum} -1) * #{amount} ]]> SELECT COUNT(*) FROM BOARD 오라클 페이지네이션 쿼리 핵심 더보기 /* 샘플 SQL */ SELECT T2.rn , T2.id , T2.name , T2.email , TO_CHAR(T2.create_date, 'YYYY-MM-DD') AS createDate /* 쿼리의 가장 바깥쪽에서 날짜 -> 문자열 변환을 해주는게 성능에 좋다고 한다. */ FROM ( SELECT ROWNUM as rn , T1.id , T1.name , T1.email , T1.create_date FROM ( /* 1차 서브쿼리에서 등록일 내림차순으로 정렬 */ * 혹은 ROW_NUMBER() OVER(ORDER ..

목차 pagination 이건 스프링에만 국한된 기술은 아니고 웹 전반적으로 쓰이는 기술임 화면에 페이지네이션 처리를 하기 위해서는 우선적으로 크게 다음과 같은 정보들이 필요함 현재 페이지 번호(page) 이전과 다음으로 이동 가능한 링크의 표시 여부(prev, next) 화면에서 보여지는 페이지의 시작 번호와 끝 번호(startPage, endPage) 오라클을 기준으로 설명 1.인라인뷰에서 rownum이 힌트를 이용해서 DESC 정렬로 1번 ~ 20번까지 데이터를 구함 2.바깥쪽 SELECT문에서 인라인뷰에서 나온 1 ~ 20번까지의 데이터 중 조건이 rn이 10보다 큰 데이터만 구함(인라인뷰의 결과중 11번부터 20번까지의 데이터만 조회됨 (BNO:10589495 ~ BNO:10589486의 데이터..

목차 페이지네이션 처리 관련해서 미래의 내가 보기 위해 기록 😃 웹개발의 기초 중 기초라고 할 수 있는 페이지네이션(페이징) 처리에 대해서 간략하게 정리 그동안은 원리를 제대로 이해하지 못하고 썼다면 이제 핵심위주로 잘 정리해 보자. 시간 상 페이징 처리는 디자인은 위처럼 하나도 안 이쁘지만 데이터가 잘 나오는지 위주로 작성함 개발환경 back-end: springBoot 2.6.13(jdk 1.8)/mybatis 3.5.9/h2 database H2 2.1.214 (2022-06-13)(mode는 mySQL로 설정) front-end: thymeleaf/javascript/jQuery 예시를 위한 테이블 CREATE TABLE t_board( board_id bigint auto_increment, t..