React

https://colorhunt.co/ Color Palettes for Designers and Artists - Color Hunt Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects. colorhunt.co https://fonts.google.com/specimen/Permanent+Marker Permanent Marker - Google Fonts Permanent Marker represents the look and feel of a favorite writing instrument. fonts.google.com https://dri..

기존 useEffect(() => { const setBoxHeight = () => { if (detailBoxRef.current) { const itemHeight = 4.5; const itemCount = groupedData.reduce((count, group) => count + group.data.length, 0); const calculatedHeight = itemHeight * itemCount + 3 * itemCount; detailBoxRef.current.style.height = `${calculatedHeight}vh`; } }; setBoxHeight(); }, [groupedData, detailBoxRef]); 수정후 useEffect(() => { if (deta..

import { useCallback } from "react"; // ... Your imports and other code ... export default function DayPage() { // ... Your state declarations ... // Function to fetch data using useCallback const handleFetchData = useCallback(() => { dayRender(userId, month, date) .then((response) => { // 데이터 처리 로직 //console.log(response.data.data); setDayConsumptionData(response.data.data.paymentResponses); //..

서버에서 데이터는 들어왔는데, 렌더링이 안되는 경우가 있다 useEffect(() => { const handleFetchData = () => { dayRender(userId, month, date) .then((response) => { // 데이터 처리 로직 console.log(response.data); console.log(response.data.data) setDayConsumptionData(response.data.data.paymentResponses); setDaySumData(response.data.data.daySummary); }) .catch((error) => { // 에러 처리 로직 console.log(error); }); }; handleFetchData(); },..

메인 프로젝트에서 템플릿을 사용할때, 왜 사용하는지 정리하는 중에 알게 된 사실이다. 왜 fetch 보다 axios를 쓰는 것이 좋을까? axios와 fetch는 모두 HTTP 요청을 보내는 데 사용되는 도구입니다. 하지만 axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공합니다. 아래 예시 코드를 통해 axios가 fetch보다 어떻게 편리한지 알아보겠습니다. 1. GET 요청 axios로 GET 요청을 보내는 예시 코드는 다음과 같습니다: axios.get('/api/users') .then(response => { // 응답 데이터 처리 console.log(response.data); }) .catch(..

이미 json server에 있는 유저정보라, 가입이 불가능한 입력값인 데도 페이지가 넘어가는 문제가 생겼다 이미 존재하는 이메일 비번 입력하면 에러메세지가 변경되어야 하는데, 변경안되고 초기 상태로 있는게 문제였다. Navigate를 안넣으면, 에러메세지는 변경되고 페이지는 안넘어간다. Navigate 를 넣으면, 에러메세지 변경 안되고 페이지는 넘어간다. 이유는 에러메세지 변경은 state로 관리하기 때문에, 비동기적으로 실행된다. 즉, Navigate보다 에러메세지 변경이 늦게 실행된다. 그래서 바로 클릭을 누르자마자 (에러메세지 변경없이) 페이지가 넘어가는 것이었다 고민을 많이 했는데 팀원분이 같이 고민해서 해결을 해주셨다 !! (짝짝) 해결 ==> 진솔님! useState훅으로 변경되는 값들은 ..

현재 useReducer로 만든 프로젝트를 중앙 집중적 전역상태 관리를 위해 RTK으로 리팩토링하는 중이다. (쓰이는 용어는 비스무리 하지만, 다른 점이 있어서 리팩토링 하면서 배우는중~) 그런데, Components에 보이는 것처럼 TodoCard(-TodoItem) , CompletedCard(-CompletedItem) 각각 컴포넌트를 만들었음에도 불구하고, 문제가 생겼다. TodoCard의 모달창을 열어서 정보를 입력하면, CompletedCard 아래에 메모가 누적된다는 점이다. 타겟이 잘못되었나 싶어 import와 export 등을 확인했지만, 경로 문제는 없었고, 오타의 문제도 아니었다... 데브툴을 봐도, 자꾸 modalCompletedItem이 업데이트 되는 상황이다... const He..

리액트로 코딩을 하던중, useReducer와 Redux를 헷갈리고 말았다. 분명 겉보기엔 비슷한데 (둘다 리듀서랑 디스패치를 쓰니깐) 다르다는 제로초님의 답변.... useReducer와 Redux는 다르다. 그리고 어떠한 하나가 다른 하나를 대체할수도 없다. 한국어로 찾으니 명쾌한 답변이 없어서 영어로 찾아보니... 이런 귀중한 정보가! https://www.frontendmag.com/tutorials/usereducer-vs-redux/ useReducer vs Redux: A Detailed Comparison for State Management in React - Frontend Mag Get a comprehensive comparison of useReducer vs Redux and d..