공부하자

usestate 남발 코드를 react-hook-form로 리팩토링 하기로 하였다현재 코드는 비밀번호 재설정 기능을 구현하고 있는 상태 기존 코드import { EMAIL_DOMAIN } from '@/constants/email.constant';import { BoxButton, SuffixTextField } from '@yourssu/design-system-react';import { StyledEmailContainer, StyledSubTitleText, StyledTitleText } from './EmailInput.style';import { useState } from 'react';import { postAuthVerificationEmail } from '@/home/apis/au..

종강을 했다 3-1이 끝이 났다!!! 네프 플젝은 아직도 안 했다 핳 내일의 내가 하겠지 뭐...이제 블로그 보는 사람들이 많아져서 부끄럽지만 그냥 쓸거다 ㅎㅎ 2024 상반기 회고올 해도 절반이나 지났다 말이 안 돼 시간이 왜이렇게 빠르지일단 월 별로 정리하고 활동 별로 정리를 해보자면1월 : 봉00씨에게 반 협박받아서 나간 해커톤 -> 첫 리액트 공부 시작 / 코어자바스크립트 스터디2월 : 현근이한테 만들어준 ㅋ n년째 놀림받는 웹 페이지이자 내 첫 프로젝트3월 : 동아리 지원 / 솦프 react native로 개발 시작4월 : 과제 지옥 / 새 알바 적응5월 : 모든게 합쳐짐 -> 과제 / 알바 / 솦프 / 동아리 / 수업 ㄹㅈㄷ6월 : 근데 다 적응됨 그렇다면 이제 기말고사를 보자... 기말이 5..

const observer = useRef();...const lastMovieElementRef = useCallback( (node) => { if (observer.current) observer.current.disconnect(); observer.current = new IntersectionObserver((entries) => { if (entries[0].isIntersecting && hasMore) { setPage((prevPage) => prevPage + 1); } }); if (node) observer.current.observe(node); }, [hasMore]);동작 과정useCallback 설정: lastMovi..

umc 6주차 과제중 Debounce와 Throttling이라는 개념을 배웠다! Debounce : 연속된 이벤트 호출을 제한하여 마지막 이벤트만 처리하도록 하는 기술→ 연속된 이벤트가 발생할 때마다 타이머를 리셋하고, 일정 시간이 지난 후에 이벤트를 처리Debounce는 주로 어디에 사용하나요?ex) 검색어 자동 완성 기능에서 사용자가 입력을 멈춘 후에만 서버에 요청을 보냄사용자 입력 필드에서 입력이 끝난 후 일정 시간 동안 입력이 없을 때만 서버에 요청을 보내는 경우적용 과정1. debounce hook 만들기2. 적용하기 1. useDebounce.js hook 구현import { useState, useEffect } from "react";export const useDebounce = (val..

유어슈 pr 리뷰 중에 좋은 걸 배워서 기록해봄 쭌 감사링 나중에 보여줘야징 ㅎㅎ 이전 상태에 기반하여 상태를 업데이트 해야할 때 update function 사용이 더 낫다는 의견이 있었다! 그의 리뷰,,지금은 코드가 문제없이 동작하지만 추후에 비동기 로직등이 handleCheckAgree() 함수에 추가되면 상태 업데이트가 예상치 못하게 이루어질 수 있을 것 같아요!handleCheckAgree()와 같이 이전 상태에 기반하여 상태를 업데이트 해야할 때는 update function을 쓰는게 좋은 습관인 것 같습니다.   기존 코드const [agreed, setAgreed] = useState(false);...const handleCheckAgree = () => { setAgreed(!ag..

react native로 열심히 개발을 하던 도중에 난관에 부딪혔ㄷ ㅏ 리액트에서는 페이지 라우터가 있어서 렌더링 할 때 조건부로 렌더링이 가능했는데 리액트 네이티브에서는 스택으로 쌓이는 형태라 스택을 다시 나오는 방법을 모르겠어서 (내가 못 찾은 걸 수도...) 조건부 렌더링이 쉽지 않았다! 내가 원하는 건 토스 처럼 매끄러운 화면 전환 + 하단 네비게이션 바가 고정된 채 컴포넌트들만 렌더링 되는 거! 하지만 스택으로는 새로운 페이지가 자꾸 옆에서 튀어나오고... 네비게이션 바를 가리고... 그런 상황이 발생했다 해결 방법 -> home네비게이션에서는 home.js만 두고 그 안에서 렌더링에 조건을 달아 조건부 렌더링을 하자! 조건부 렌더링 하는 방법 1. retuen 안에서 삼항 연산자 쓰기 retu..