본문 바로가기

sto-salepurchase4

[React] Date picker 사용하기 ( + default 값으로 오늘 날짜) 날짜 new Date(); 로 오늘 날짜 현재 시간을 구한 후 문자열로 변환해 날짜에 해당하는 부분만 슬라이싱 해 오늘 날짜를 defaultValue로 한다. saleStartDate 역시 default 값을 오늘 날짜로 한다. src/pages/SalesRegistrationPage.js const dateNow = new Date(); const today = dateNow.toISOString().slice(0, 10); const [saleStartDate, setSaleStartDate] = useState(today); Date picker src/pages/SalesRegistrationPage.js return() setSaleStartDate(e.target.value)} inputPro.. 2022. 9. 8.
[React] 버튼 클릭 이벤트 새로운 페이지로 이동하기 (button click to new page) 새로운 페이지 만들기 src/pages/PurchasePage.js import React from "react"; const PurchasePage = () => { return PurchasePage; }; export default PurchasePage; useNavigate() 사용하기 참고 : 2022.07.20 - [javascript/React] - [React] React app - 시작 로고 페이지 만들기 (useNavigate, setTimeout()) navigateToPurchase 에서 navigate 함수를 호출해 주소를 전달한다. navigate 함수에 인자로 주소를 넣어준다. src/pages/ListProductsSalePage.js const navigate = useN.. 2022. 9. 6.
[Spring + React] react input 데이터 springboot Controller 로 전달하기 React src/pages/SalesRegistrationPage.js TextField 에 input으로 입력받을 numberOfToken 을 useState TextField input 에 입력 후 버튼 클릭 시 이벤트 함수 handleClickRegister (axios로 전달) const [numberOfToken, setNumberOfToken] = useState(); const handleClickRegister = (event, id) => { alert("save"); axios .get("/product/insert", { params: { numberOfToken: numberOfToken }, }) .catch(function () { console.log("실패"); }); co.. 2022. 9. 5.
[Spring] SpringBoot + AWS RDS + React 연동하기 SpringBoot 2022.09.01 - [aws] - [RDS] SpringBoot 와 RDS 연동하기 React App.js > App const [member, setMember] = useState([]); useEffect(() => { fetch("/member/select") .then((res) => { return res.json(); }) .then((data) => { setMember(data); }); }, []); App.js > App > return {member.map((v, idx) => ( id: {v.id}, name : {v.name}, password : {v.password} ))} spring 프로젝트 실행, npm start 후 localhost:3000 확인 2022. 9. 2.