매일 공부한거 기록하기

react-hook-form을 간단하게 알아보자 왜냐면.. 그냥 궁금하니까.. 0. 기존 form의 유효성 검사 기존 form에서 유효성 검사에서 이름, 비밀번호, 주소, 휴대폰번호 등을 검사하게 된다. name만 관리한다고 해도 name이 변경되는 값을 관리해야하는 1. input값이 변경될때마다 Handler에서 state들을 setState를 해줘야하고, 2. submit 버튼에서 validate함수를 실행시켜야하고 3. validate 에서 name.length ===0일때 등의 유효성검사를 해야함 만약에 관리해야할 state들이 늘어나게 된다면? 로직의 길이가 매우 늘어나고, 복잡해진다 const [data, setData] = useState({ testName: "", email: "", }..

공식문서 보고 정리해보깅~ https://ko.reactjs.org/docs/hooks-reference.html#usereducer Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 1. useReducer란? useState의 대체 함수이다. 다수의 하위값을 포함해 복잡한 정적로직을 만들때 다음 state가 이전 state에 의존적인 경우에 선호한다. 2. 싫어요 버튼을 만들어보자 //초기값 설정 const initialHate = { count: 0 }; // const [state,dispatch] = useReducer(reducer,initialState); const [hate..

2023.02.02 - [Frontend/React] - React에서 setInterval() 과 useInterval()무엇을 써야할까 React에서 setInterval() 과 useInterval()무엇을 써야할까 setInterval()을 사용해서 자동으로 이미지가 넘어가는 carousel을 만들려고 했다^^... imgIndex를 하나씩 넘겨주고 마지막 인덱스라면 다시 0으로 보내는 간단한 기능이다. const autoSlide = () => { setImgIndex(im diary-of-lemon.tistory.com 위의 글 처럼 예상되로 동작하지 않는 상황이었다. useEffect에서 함수를 실행시켜주고, 실행이 끝날때마다 setInterval함수의 ID를 clear해줬다. setInte..

setInterval()을 사용해서 자동으로 이미지가 넘어가는 carousel을 만들려고 했다^^... imgIndex를 하나씩 넘겨주고 마지막 인덱스라면 다시 0으로 보내는 간단한 기능이다. const autoSlide = () => { setImgIndex(imgIndex + 1); if (imgIndex === imgData?.length - 1) { setImgIndex(0); } }; delay도 만들고 setInterval()로 하면 되지 않을까 생각했다^^.. const [delay, setDelay] = useState(1000); setInterval(autoSlide, delay); 근데 이게 어떻게 되냐면 1초 간격으로 잘 넘어가다가 1,2 -> 1,2 -> 1,2 -> 1,2 -> ..

최근에 React-Redux 말고 React-Query를 써봤다. 처음 써봤는데 편리하고 좋아서 제대로 정리하면서 공부해보려고 한답. 그냥 번역해보면서 읽은거니까.. 틀리면 말해주세욤 ↓공식문서↓ https://react-query-v3.tanstack.com/overview React Query : 서버스테이트를 fetching, 캐싱, 동기화 ,업데이트 해주는 React 라이브러리이다. React Query는 왜 만들었을까? : 기존 상태관리 라이브러리는 클라이언트 상태를 관리하기 좋았지만 비동기와 서버스테이트 관리에는 좋지 않았다. React Query를 쓰는 이유 : 많은 로직들을 없애줄것임 : 서버 스테이트들을 쉽고 안정적으로 유지시켜줄것임 : 최종사용자들에게 애플리케이션을 예전보다 좀 더 빠르..

이거 할때마다 왜 자꾸 안되는건지? 지금 걍 정리하면서 시작해보려고 한다 1 . typeScript와 next설치 npx create-next-app --typescript 2. project이름은 위 명령어 입력 후 입력한다 ✔ What is your project named? test 3. npm run dev 입력 후 실행한다. 4. styled-components설치하기 npm install styled-components 5. styled-components type설치하기 npm install -D @types/styled-components babel-plugin-styled-components 6. styled-components babel preset설치 npm i --save-dev b..

디자인 후다닥 넣어서 완성 ~ .. today로 가는 버튼은 클릭시 setCurrentMonth를 현재 month로 set 해줬고, setSelected를 현재 날짜로 set해줬당 화면은 currentMonth가 바뀔때마다 렌더링되므로 화면도 당연히 이동된당 현재 날짜 선택은 렌더링된 현재 날짜를 setSelected에 set해줬다. 삼항연산자를 이용해 className에 selected ? "selected" : "" 를 추가해줘서 css를 변경할 수 있게 했답~~~~~~~~

처음엔 단순하게 1일부터 마지막날짜까지 for문을 돌려 배열에 넣어줬었다. 근데 오늘날짜 표시를 하기 위해선 단순하게 증가한 i가 아니라 object타입으로 받아 today를 비교하게 해야했음.. dayjs()에 isToday()가 있으므로ㅎㅎ //해당월 날짜 배열 for (let i = 1; i ( {item.isToday() ? ( {item.format(dayFormat)} ) : ( item.format(dayFormat) )} 그리고 배열을 map으로 돌려서 item.isToday() 삼항연산자를 사용해 오늘일 경우 Today컴포넌트를 렌더링 하게 해줬다 평일과 주말 컬러 구분도 해줬다. for문을 돌려 date배열에 요일들을 넣어준다. 그리고 date배열을 map으로 돌려 index별로 구분해..

첫번째 시도는 해당 월의 날짜들만 받아왔었고 이번에는 이전 달, 다음 달의 날짜들도 받아오려고 한다. 저번달의 날짜 배열을 만들었다 현재 달의 요일을 숫자로 받아와 일곱칸중에 몇번째 칸까지 for문을 반복할지 정해준다. 그리고 이전달의 마지막 숫자에서 하나씩 빼준다. 이때 배열은 거꾸로 넣어줘야하므로 unshift해준다. 왜냐면 lastDayofPrev는 31-0, 31-1, 31-2..이런식으로 들어가기때문 31,30,29 배열을 unshift해주는것 해당월은 첫번째 달력에서 만든것과 같다 다음달역시 1부터 시작해 마지막 요일을 일곱칸중에서 빼준다 그럼 일주일중에 몇칸이 비어있는지 알 수 있으니까 1부터 증가시켜 넣어준다 그리고서 map으로 해당 배열들을 컴포넌트로 리턴시켜준다 //저번달 날짜 배열 i..

내가 생각한 방법은... 해당 월의 시작요일을 찾고 해당 월의 마지막 날짜를 찾아서 배열에 push를 해주는것 이었다! 0부터 시작요일까지는 "" 빈값을 넣어주고 시작부터 마지막까지는 for문을 돌려 날짜를 넣어준다 그리고 마지막날짜부터 달력의 마지막 칸까지 또 ""빈값을 넣어주는 그런 방법이였다 const getDays = () => { const startDate = currentMonth.startOf("month").format("d"); const endDate = currentMonth.endOf("month").format("D"); const endDateIndex = currentMonth.endOf("month").format("d"); const dateRow = []; for (le..