본문 바로가기

react57

React 리액트 이미지 수정 하는 법 마이페이지를 내가 구현했는데, 프로필 이미지 수정을 하는 기능을 추가했다! 생각보다 이미지 수정은 간단했다. 🔷 일단 전체 코드는 이렇게 생겼다! //프로필 이미지 PATCH 기능 const [imageUrl, setImageUrl] = useState(''); const imgRef = useRef(); const onChangeImage = async (e) => { const reader = new FileReader(); const file = imgRef.current.files[0]; reader.readAsDataURL(file); reader.onloadend = () => { setImageUrl(reader.result); }; if (e.target.files[0]) { const u.. 2022. 10. 9.
React 리액트 최신순, 인기순(조회수)별로 게시글 조회하는 법 우리 팀이 만든 Homecoming Day 모양이다! 저렇게 최신순, 인기순으로 select 조회를 해주고 싶을 때 코드를 정리해보려고 한다. 구글링에 아직 미숙한 건지, 필요한 자료를 찾는 시간이 오래 걸릴 때가 있다 ㅠㅠ 완성했던 코드 잘 기록해보기! 🔷 일단 전체 코드를 기록하고 아래에 순서를 차근차근 정리했다. const Calendar = () => { const dispatch = useDispatch(); const { calendars } = useSelector((state) => state.calendars); const { calendarPopular } = useSelector((state) => state.calendars); const [select, setSelect] = us.. 2022. 10. 8.
Form submission canceled because the form is not connected 구글링을 해 보면 버튼이 두 개 이니까, 버튼의 type값을 따로 주라고 하는데, 나는 버튼이 한 개뿐이었다//...ㅎㅎ 그러다 발견한 해결방법! 1️⃣ 버튼의 type 변경 (대부분 가지고 있는 문제점) 이건 내 해결 방법은 아니지만, 대부분 이 문제라서 공유하자면 버튼이 두 개 일때 이런 식으로 버튼의 값을 다르게 주면 된다. type = "submit" type ="button" 2️⃣ e.preventDefault() => 내 해결 방법! 이벤트 핸들러를 사용했을 경우, 이벤트 핸들러 함수에 걸어주면 된다. 나는 버튼이 아니라 전체 폼에 이벤트 핸들러를 걸었기 때문에, 이 해결 방법으로 바로 해결이 가능했다. 2022. 8. 10.
[React] .env(환경 변수 관리) 정리 * 퉁이리 자료 출처 하단 기재, 좋은 자료가 많다! ✅ env env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다. 1️⃣ env 주의사항 👌 root 폴더에 생성해야 한다. root 폴더에 env 파일이 위치하지 않으면 정상적으로 작동하지 않는다. 👌 변수명은 반드시 "REACT_APP_"으로 시작해야 한다. REACT_APP_변수명 = ㅇㅇㅇ "REACT_APP_변수명" 형식이 아닐 시, React가 인식하지 못하여 정상적으로 작동하지 않는다. 🔹process.env.REACT_APP_ : 예약어 👌 .gitignore 에 env를 등록해야 한다. .gitignore에 등록해주어야 git에 등록할 때 파일이 올라가지 않는다. * 기본적으로 세팅은 되어 있으나.. 2022. 8. 6.
[리액트 React] 심화 학습 자료 정리 🔹 Redux-Toolkit-Todolist 최종 완료 깃헙 주소 : https://github.com/jennywoon/Redux-Toolkit-Todolist.git ✅ Redux Toolkit 1️⃣ 리덕스툴킷이란? 👌 리덕스툴킷 리덕스툴킷은 이전에 배운 리덕스를 개량한 것으로 생각하면 된다. 리덕스럴 사용하기 위해 작성했던 duck 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스 툴킷이다. 줄여서 RTK 라고도 한다. 👌 새로운 것이 아니다 리덕스 툴킷은 배웠던 리덕스의 구조나 패러다임이 모두 똑같다. 즉, 새로운 것이 아니다. 리덕스의 전체.. 2022. 8. 5.
항해99 26일차 TIL - (리액트) 투두리스트 심화 과제 와이어프레임 설정 & 오늘 배운 것 ✅ 와이어프레임 구성 세 번째 진행하는,,, 그리고 심화 주차인 투두리스트의 와이어 프레임을 구성했다! 기능만 봐도 너무 많아서 페이지를 여러 개 구성해야 하는데,, 할 수 있다..ㅠㅠ 일단 오늘은 심화 학습자료 공부를 시작했는데 컨디션이 너무 좋지 않다. 아픈 것은 아닌데 졸림을 아예 참을 수 없는 정도인 것 같다 오늘은 일찍 자고 내일 잘 해보기!! 컨디션 관리 중요해 ㅠㅠ ✅ 오늘 배운 것 1️⃣ 리액트 심화자료 공부 : 리덕스 툴킷 ~ jason server 지금 너무 피곤해서 그런지 다른 팀원들에 비해 속도가 느렸다. 그래도 놓치는 부분 없이 집중해서 진행하자! 🔹 내 블로그 정리해둔 곳 : https://jenny0520.tistory.com/84 2️⃣ 자바스크립트 🔹 내 블로그 정리해둔 곳.. 2022. 8. 5.

티스토리툴바