project_0418

• DB에는 경기년도가 없어서 DATE형식으로 변환하려면 문제가 된다!
  그래서 일단은 임의로 1,2,3월 경기에 대해서만 2024년을 주기로...ㅠ
  -> getYear(): 메서드가 1900년을 뺀 연도를 반환
  -> getFullYear(): 전체 연도(예: 2024)를 반환

//경기날짜 담은 배열
	const gameDates = [ 
	    // gamedate 배열의 각 요소를 JavaScript 배열에 추가
	    <c:forEach var="date" items="${gamedate}">
	    	"${date.substring(0, 5)}", // 각 날짜를 따옴표로 묶어서 배열에 추가
	    </c:forEach>
	];
	
	// 년도 포함한 경기날짜 배열(2023-10-17)
	const modifiedGameDates = gameDates.map(date => {
	    const [month, day] = date.split(".");
	    const year = (month === "01" || month === "02" || month === "03") ? "2024" : "2023";
	    const modifiedGameDate = year + "-" + month + "-" + day;
	    return modifiedGameDate;
	});
	
	const gamelist = []; // game Date형 배열
	const gameMinuslist = []; // game5일전 Date형 배열
	
	// 년도 포함한 경기 5일전 날짜 배열(2023-10-13)
	const modifiedGameMinusDates = modifiedGameDates.map(date => {
		const [yearStr, monthStr, dayStr] = date.split('-'); 
	     
		const year = parseInt(yearStr, 10); //parseInt(string, radix(진수)) 문자열 분석하고 정수로 변환
	    const month = parseInt(monthStr, 10);
	    const day = parseInt(dayStr, 10);

		  for(let i = 0; i < modifiedGameDates.length; i++){
			  
	          const [yearStr, monthStr, dayStr] = modifiedGameDates[i].split('-');
	          
	          const year = parseInt(yearStr, 10);
	          const month = parseInt(monthStr, 10);
	          const day = parseInt(dayStr, 10);
	          //console.log("year: " + year);
	          const gamelistDate = new Date(year, month - 1, day);
	          gamelist.push(gamelistDate);
	          console.log("gamelistDate: " + gamelistDate);
	          
	          const gameMinusDate = new Date(gamelistDate.getFullYear(), gamelistDate.getMonth(), (gamelistDate.getDate()-3));     
		  
	          const formattedDate = gameMinusDate.toISOString().split('T')[0]; //날짜 개체를 ISO 문자열로 변환한 다음 "YYYY-MM-DD 형식의 날짜 부분을 추출
	          gameMinuslist.push(formattedDate);
		  }
		
		  return gameMinuslist;	  
	});

• 경기 일정 클릭하면 일정에 대한 정보나 예매링크를 주려고 했다

  • 일단 alert을 띄우면 나오긴하는데 너무 못생겼다

  • modal을 띄우려는데 아래처럼 bootstrap를 추가해야한다는데 내가 쓰는 head랑 충돌나는지 글씨색이 파란색으로 변하고 모달도 안뜨고 이상하다...1시간 넘게 했는데 모르겠다...

     <!-- bootstrap 4 -->
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  • https://e-7-e.tistory.com/70,
    https://velog.io/@chloeun/FullCalendar,
    https://blog.naver.com/PostView.naver?blogId=iiwvii&logNo=222368096146&parentCategoryNo=&categoryNo=1&viewDate=&isShowPopularPosts=true&from=search
    여기저기 찾아보긴 했는데 일단 첫번째분의 코드 그대로 복사하고 붙여넣고 검증했더니 된다!!! 그래서 여기서 모달 부분만 꺼내서 쓰기로 했다!!!

  • 원래는 $("#Modal").modal("show"); 이 방식으로 하려했는데 .modal이 문제였던거라
    Modal.style.display = "block"; 이 방식을 사용해서 bootstrap 같은건 필요가 없다~