noticeList.jsp

for(int i=nowPage*numPerPage;i<(nowPage*numPerPage)+numPerPage;i++){
		if(i == size) break;
		Map<String,Object> rmap = nList.get(i);​

    int size = 0;//전체 레코드를 저장하기 위해 초기화 
	List<Map<String,Object>> nList = (List)request.getAttribute("nList");
	if(nList !=null){
	size = nList.size();//size는 nList의 크기로 설정됨- size에는 전체 레코드 수가 저장

 

function searchEnter() {
    console.log('searchEnter'); // 콘솔에 'searchEnter'를 출력

    console.log(window.event.keyCode); // 현재 키 이벤트의 키 코드를 콘솔에 출력

    // 만약 현재 키 이벤트의 키 코드가 13(Enter 키)이라면
    if (window.event.keyCode == 13) {
        noticeSearch(); // noticeSearch 함수를 호출
    }
}

 📢   사용자가 텍스트 입력 필드에서 Enter 키를 누를 때 검색 동작이 수행되도록 하는 것

noticeSearch 함수는 실제 검색을 수행하는 함수

 

 

 

function noticeSearch(){
			console.log('noticeSearch');
        //n_title을 선택시 value값은 n_title 이고 const gubun에 n_title 담김
			const gubun = document.querySelector("#gubun").value;
        //주차 검색클릭, 엔터시 value값은 주차로 동시에 반영되고 const keyword도 주차 담김
			const keyword = document.querySelector("#keyword").value;
			console.log(`${gubun} , ${keyword}`);
      
      //location.href 설정, 새 URL로 리다이렉트
    //검색버튼 누르는 순간 주소창이 바뀌기 때문에 컨트롤러에 전달해주기위한 코드 -> 컨트롤러 이동
			location.href="/notice/noticeList?gubun="+gubun+"&keyword="+keyword;
			
            //검색 후에 검색창은 다시 초기화됨 
            document.querySelector("#gubun").value = '분류선택';
    		document.querySelector("#keyword").value = '';
		}

 

 

 

const noticeDetail = (n_no) =>{
			location.href = "/notice/noticeDetail?n_no="+n_no;

 📢   const noticeDetail =는 noticeDetail이라는 상수 변수 선언함  

(n_no) =>는 화살표 함수 문법으로, noticeDetail 함수는 n_no라는 하나의 매개변수를 받는다.

매개변수는 함수에 전달되는 값으로, 여기선 n_no라는 이름으로 사용

 

 

 

//현재 페이지와 페이지당 아이템 수(numPerPage)로 데이터의 일정 범위를 반복
for(int i=nowPage*numPerPage;i<(nowPage*numPerPage)+numPerPage;i++){
		if(i == size) break;
    
    //인덱스 i에 해당하는(nList 리스트에서 i번째 위치에 있는 원소) 
    //데이터 리스트(nList)의 항목을 가져와 rmap이라는 Map 객체에 할당
		Map<String,Object> rmap = nList.get(i);

 

 

<div class="row">
	<div class="col-3">
	   	<select id="gubun" class="form-select" aria-label="분류선택">
    		<option value="none">분류선택</option>
     		<option value="n_title">제목</option>
       		<option value="n_writer">작성자</option>
	        <option value="n_content">내용</option>
	   	</select>			
	</div>
		<div class="col-6">
			<input type="text" id="keyword" class="form-control" placeholder="검색어를 입력하세요" 
      aria-label="검색어를 입력하세요" aria-describedby="btn_search" onkeyup="searchEnter()"/>
		</div>
		<div class="col-3">
	 		<button id="btn_search" class="btn btn-danger" onClick="noticeSearch()">검색</button>		 	
            </div>
		</div>