import { useNavigate } from 'react-router-dom'; // 검색창에서 검색 const getDataList = () => { if (search.trim().length != 0){ navigate(`/list/${search}`); } } //엔터키 이벤트 const handleKeyPress = (e: KeyboardEvent) => { if(e.key === 'Enter') { getDataList(); } } input text 에서 EnterKey 를 누르면 작동하는 이벤트를 만들다보니 Navigate를 써야하는 경우와 안써도 되는 경우가 발생하는 것을 깨달았다. 나처럼 해당페이지가 가지고 있는 정보를 가지고 오려고 하는 경우에는 useNavigate써서 경로를 ..

메인 페이지 검색기능을 구현할때 서치창 버튼이 아닌 EnterKey를 누르면 작동이 되게 하려고 한다. useHistory 기능은 더이상 지원 하지 않기 때문에 useNavigate로 대체해야 한다. // 검색창에서 검색 const getDataList = () => { if (search.trim().length != 0){ history.push(`/list/${search}`); } } history를 사용한다면 push 까지 작성해야 하겠으나 Navigate 는 push가 없어도 되는듯 하다. // 검색창에서 검색 const getDataList = () => { if (search.trim().length != 0){ navigate(`/list/${search}`); } } import { u..

// 별점보기 평균 읽어오기 function ReadOnly(grade: any) { console.log(grade) const [value] = React.useState(parseInt(grade)); return( ) }

데이터베이스에서 자료를 연결해서 화면에 출력하는데 제목이 다 노출 될때에는 말줄임표가 필요하다. .course_title4 { width: 100%; height: 45px; font-weight: 600; } 기존의 css를 수정해야한다. .course_title4 { width: 100%; height: 45px; font-weight: 600; /* 말줄임표 */ overflow: hidden; /*숨겨줘*/ text-overflow: ellipsis; /*말 줄임표로 잘린 텍스트가 있다고 표시*/ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

상세페이지 이동 Carousel list 를 클릭해서 해당하는 idClass 페이지로 이동하게 하기 //상세페이지 이동 const gotopage = (idClass:number) => { axios.post(`http://localhost:4040/main5/${idClass}`); window.location.href = `http://localhost:3000/main5/${idClass}`; } 하이퍼링크 onClick 추가 gotopage(item.idClass)}> Dto 의 idClass를 통해서 이동하기

function ReadOnly() { const [value] = React.useState(4); return( ) } return 추가