240612

1. 등록, 조회, 수정, 삭제 기본로직 (mapper → service → controller 순으로 작업 메소드 마다 테스트 코드 점검)
2. Oracle과 MySQL Index활용의 차이가 있음
   • Index Hint 문법은 아예 다른 수준
   • MySQL INDEX_DESC 지원 안함
   • MySQL은 데이터를 미리 올려두지 않음( 24.3월 미니프로젝트 때 프로시저 vs JPA 비교하면서 확인)
   • 결론 데이터 검색 시 Index를 활용하지 않으면 조회시 엄청 느려짐(data 250만개로 확인해봄)
   • 연산까지 있다면 끔찍해짐
   • 다만 수정, 삭제가 많은 환경에서는 Index도 정렬을 해야하므로 성능이 안좋아 질수 있음
3. 리다이렉트(redirect) 할 때
   • addFlashAttribute : 1회용 session
   • addAttribute : get방식(URL에 전달, 즉 parameter로 활용)
4. 초간단 모달

   • <style>
     .modal {
     	position: absolute;
     	display: none;
     	justify-content: center;
     	top: 0;
     	left: 0;
     	width: 100%;
     	height: 100%;
     	background-color: rgba(0, 0, 0, 0.4);
     }
     
     .modal_body {
     	position: absolute;
     	top: 50%; /*모달을 화면가운데 놓기위함.*/
     	width: 400px; /*모달의 가로크기*/
     	height: 600px; /*모달의 세로크기 */
     	padding: 40px;
     	text-align: center;
     	background-color: rgb(255, 255, 255); /*모달창 배경색 흰색*/
     	border-radius: 10px; /*테두리*/
     	box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); /*테두리 그림자*/
     	transform: translateY(-50%); /*모듈창열었을때 위치설정 가운데로*/
     }
     </style>

     
     
     

   • 	<div class="modal">
     		<div class="modal_body">
     			<h2 class="modal_title">모달창 제목</h2>
     			<p class="modal_content">모달창 내용</p>
     			<input type="button" value="close" class="modal_close">
     		</div>
     	</div>
         <button id="modalBtn">Open Modal</button>

   • 	<script type="text/javascript">
     	document.addEventListener("DOMContentLoaded", () => {
         
         	// 실행
             checkModal(result);
             function closeModal();
             
             // 함수 선언        
             const result = 'Test Result';
     
     		function checkModal(result) {
     			
     		    const modal = document.querySelector('.modal');
     		    const modalContent = document.querySelector('.modal_content');
     		    const btnOpenModal=document.querySelector('#modalBtn');
     		    
     		    if(!result) { return; }
     		   btnOpenModal.addEventListener("click", () => {
     		        modal.style.display="flex";
     		        modalContent.innerText="결과: " + result;
     		    });
     		}    
     		
     		function closeModal() {
     		    const modal = document.querySelector('.modal');
     			const modalClose = document.querySelector(".modal_close");
     			modalClose.addEventListener("click", ()=>{
     		        modal.style.display="none";
     			})
     		}
     	});
     </script>

     
     
     
5. 페이징
   • mapper.xml not support overload
     • getList 인자만 다르게 해서 메소드 구현하려다가 런타임 에러를 맞이함
     • 페이지 번호, 페이지 당 출력할 데이터 수, 역정렬
   • 10개마다 페이지 하나를 구성 화면의 10개의 페이지 번호를 출력
     • 끝번호 = 올림(현재페이지 번호 / 총 출력 페이지 수) * 총 출력 페이지 수
     • 시작 번호 = 끝번호 - 총 출력 페이지 수 + 1 // 전부 빼면 0이니까 
     • 총 데이터 기준 끝번호 = 올림(데이터 총량 / 페이지 당 출력 데이터 수)
     • 끝번호 = 총 데이터 기준 끝번호 < 끝번호 ? 총 데이터 기준 끝번호 : 끝번호
     • 이전 = 시작번호 > 1
     • 다음 = 끝번호 < 총 데이터 기준 끝번호
6. ancor tag(a tag)의 href의 값을 페이지 번호 || 데이터 ID로 변경하고 그 값을 JS로 form 안에 넣어 이동
   • URL을 길게 사용할 수도 있지만 많은 데이터가 필요하거나 관리가 필요한 경우 유용함
7. 동적 SQL
   • if
   • choose, when, otherwise
   • where, set
   • trim
     • perfix, suffix, profixOverrides, suffixOverrides
8. 검색

   • [MySQL]
     title like CONCAT('%',#{keyword},'%')
     
     
     [Oracle]
     title like '%' ||  #{keyword} || '%'

9. 데이터 유지(Get)
   • 리다이렉트는 컨트롤러에서 추가(데이터가 이동하면서 사라짐)
   • 포워드(forward)는 jsp에서 form 조작하여 추가
10. UriComponentsBuilder.fromPath("")
    .queryParam("pageNum", pageNum)
    .queryParam("amount", amount)
    .queryParam("type", type)
    .queryParam("keyword", keyword)
    .toUriString();
    Get 방식 사용시 파라미터를 링크 형태로 바꿀수 있음, redirect 사용시 유용
    

    return "redirect:/board/list" + cri.getListLink();