상태 관리를 리덕스,리덕스툴킷 라이브러리만 사용해서 관리했는데 리액트에도 상태를 전역으로 관리하는 훅이 있어서 가끔 굳이 라이브러리를 설치하면서 전역으로 관리를 해야할까 생각 했던곳에 적용해야겠다 싶어 공부하고자 한다 React Hook인 useContext()는 Context를 좀 더 편하게 사용할 수 있게한다 =>Context는 전역 상태 관리를 할 수 있는 수단일 뿐이고, 상태 관리 라이브러리는 상태 관리를 더욱 편하고, 효율적으로 할 수 있게 해주는 기능들을 제공해주는 도구이다(상태 관리 라이브러리와 Context 완전히 별개의 개념이다),Context를 쓴다면, 각기 다른 상태마다 새롭게 Context를 만들어주어야 한다 Context API란? 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해..

플젝 하면서 멘토님이 Interceptor를 사용하는 방법이 있다고 플젝 끝날 때즘 알려주셨고.. 이미 짠코드를 걷어내기가 힘들것 같아서 플젝 끝나고 코드를 걷어내볼려고 공부하려고 한다 Axios는 HTTP 요청과 응답을 가로채는 Interceptor를 지원한다 Axios 인스턴스는 요청과 응답에 대해 각각 Interceptor 관리자를 가지고 있고, 이 관리자들은 요청이나 응답을 가로챌 때 실행할 핸들러를 관리한다 => Axios 인스턴스가 ‘요청을 보내기 직전’과 ‘응답을 받은 직후’에 미리 등록한 핸들러들을 차례로 실행한다 언제 사용할까? API 요청마다 해줘야 하는 반복적인 작업이 있을 때(예: 헤더에 토큰 싣기) 에러 관리를 한 곳에서 하고 싶을 때 Request Interceptor 요청에 대..

폼 제출시 연속으로 클릭하면 여러번 호출되어 중복으로 등록되는 경우가생겨 Lodash 라이브러리를 사용하기로 했다 Lodash 모듈화, 성능 및 기타 기능을 제공하는 자바스크립트 유틸리티 라이브러리 https://lodash.com/ Throttle와 Debounce Throttle throttle(func, [wait=0], [options={}]) =>throttle은 콜백 함수(func)를 일정 주기(wait) 내에 한 번만 호출한다. 특히 scroll, mousemove 이벤트와 같이 짧은 시간에 굉장히 많이 실행되는 이벤트에 사용한다. 스로틀링(Throttling)은 함수가 지정된 시간 동안 최대 한 번 호출되도록 하는 프로그래밍 방법이다 스로틀링은 함수를 호출할 수 있는 최대 횟수를 조절한다 ..

let pageCount = 5; if (lastNum > total) { pageCount = total % 5; }​ let pageCount = 5; if (lastNum > total) { pageCount = total % 5; } 5개씩 보여지는 Pagination Pagination의 맨앞에 들어가는 버튼이다. 5개씩 잘라서 만든다 첫 번째 Page 1번 두 번째 Page 6번 세 번째 Page 11번 네 번째 Page 16번 첫 번째 페이지 = 현재 페이지 - (현재페이지 % 5) + 1 마지막 페이지 = 현재 페이지 - (현재페이지 % 5) + 5 공식을 같게된다 만약 마지막 페이지인 5 번을 누르면 onClick함수로 인해 바로 6으로 되어 버리는 현상이 발생하고 화살표만으로 다음페이지..