I T H

- react-datepicker는 버튼 클릭시 아래와 같이 달력을 화면에 보이게 하고, 날짜를 선택하면 적용시킬 수 있도록 도와주는 라이브러리다. - 달력을 쉽게 커스텀해서 사용할 수 있는 장점이 있다. [ react-datepicker 참고사이트 ] https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com [ react-datepicker 설치 ] - typescript를 사용한다면 "@types"를 넣어서 설치해준다. npm install react-datepicker npm install --save-dev @types/react-datepicker [ import / 적용하기 ] - 설치한 reac..

- Calender 작업중 데이터를 useState의 배열로 담아 파라미터로 백앤드에 보내야 되는데, 전달이 제대로 되지 않았다. - newEvent는 정상적으로 뜨고있음. - 하지만 밑에 스케줄 데이터를 state값에 넣어서 전달될 때에는 값이 뜨지 않았다. - 당연히 백앤드 로직에서도 파라미터를 제대로 받지 못하고 있음. [ 해결방법 ] - 이전 코드는 파라미터를 백앤드에 전달할 dateInsert함수를 캘린더 클릭 이벤트시에 호출하게 하였지만, useEffect에서 전달할 데이터(파라미터)의 값이 변할 때에 호출되게 수정하였다. // 데이터 입력 start useEffect(() => { dataInsert(); }, [newDateInsert]); [ 결과화면 ] - 배열 데이터가 잘 뜨고있고, ..

.env는 외부 노출이 되면 안되는 코드, 즉 보안이 필요한 코드를 불러올 때 사용한다. [ .env 사용법 ] 1. ".env" 파일은 최상위 루트 파일에 위치함. 2. react 환경에서 환경변수의 보안때문에 아래와 같이 'REACT_APP'으로 시작해야 환경변수의 데이터를 불러올 수 있다. // REACT_APP_변수명= "값" REACT_APP_SERVER_URL=http://localhost:4003 - 만약 VITE를 사용한다면 VITE_변수명="값" 으로 사용하면 된다. // VITE_변수명= "값" VITE_SERVER_URL=http://localhost:4002 3. 만들어 놓은 환경변수를 불러올때는 "process.env"를 사용한다. - process.env. REACT_APP_변수..

보통의 웹 프로젝트에서 프론트의 ui 작업과 이벤트 처리작업이 끝나면 axios를 사용해서 백앤드의 Spring or Node.js등을 이용해서 DB와 연결시키면 된다. 이번챕터는 간단하게 locaStorage를 사용해서 페이지 새로고침(refresh)시 데이터가 없어지지 않고 유지되도록만 해보겠다. - 아래와 같이 todoData가 변경되는 부분들 아래에 다 넣어준다. localStorage.setItem("todoData", JSON.stringify(newTodoData)); [App.js] import React, { useCallback } from "react"; import "./App.css"; import { useState } from "react"; import Lists from "..

[전체 리스트 삭제] - App.js의 return 안에 리스트 전체지우기 버튼생성 후 클릭이벤트 시 호출되는 함수를 만들어준다. DeleteList const handleRemoveClick = () => { setTodoData([]); }; [결과화면] - DeleteList 버튼 클릭시 오늘계획리스트가 모두 삭제된다. [리스트 수정] [List.js] 내용 변경 - List.js에서 State - isEditing, updateTitle 생성 - update onClick이벤트 및 함수추가 - 조건문으로 isEditing이 true일때 업데이트 기능 실행 import React, { useState } from "react"; const List = React.memo( ({ id, title, ..