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( ) }

header 의 목록 버튼을 누르면 해당하는 목록 페이지를 보여주게 하려고 한다. //상세페이지 이동 const gotolist = (getcategory:any) => { // axios.post(`http://localhost:4040/${getcategory}`); window.location.href = `http://localhost:3000/list/${getcategory}`; } list 주소의 category를 통해서 이동한다. 기존의 ClassListController 에서 @RestController @RequestMapping("list/") public class ClassListController { @Autowired ClassService classService; @GetMa..

import Course1 from '../../asset/images/exwebfront.png' 임의로 사진을 지정해서 import 하였음. src만 경로를 바꿔주면 데이터베이스에 있는 것을 가져온다.

데이터베이스에서 자료를 연결해서 화면에 출력하는데 제목이 다 노출 될때에는 말줄임표가 필요하다. .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; }