Web.d 썸네일형 리스트형 [React][Javascript] 뒤로 가기 막기 / 창 닫기 막기 / 새로고침 막기 서비스의 필요성 북스테어즈(https://book-stairs.com/) 서비스 작업을 하다가 진짜 독서가들의 독서법 - 북스테어즈 뇌 과학 기반의 차별화 된 독서법을 제안합니다. book-stairs.com 뒤로 가기 막기 / 창 닫기 막기 / 새로고침 막기의 기능이 요구되었다 우리가 글 작성 등의 작업을 하며 실수로 뒤로 가기, 새로고침, 창 닫기를 한다고 생각해보자 정말 끔찍하다! 이에 대해 네이버 블로그같은 경우에는, 아래 사진과 같이 경고창을 띄우며 막는다 우리 서비스에도 독서를 하며 질문과 답변을 직접 작성하는 기능이 주이기 때문에, 위와 같은 기능이 꼭 필요할 것 같다 하나씩 해보도록 하자 창 닫기 및 새로고침 막기 창이 닫히거나, 새로고침을 할 경우에 window 객체는 beforeunlo.. 더보기 [React][비교] SWR vs React Query vs Recoil selector ? 고민의 시작점 북스테어즈(https://book-stairs.com/) 서비스 작업을 하다가 진짜 독서가들의 독서법 - 북스테어즈 뇌 과학 기반의 차별화 된 독서법을 제안합니다. book-stairs.com 여러 API에 대한 비동기 처리를 관리하는 라이브러리의 필요성을 느끼게 되었다 반복되는 API 요청으로 불필요한 통신이 지속되었기 때문이다 그래서 캐싱에 필요한 라이브러리를 찾아보니, 대표적으로 3가지가 있었다 Recoil selector (https://recoiljs.org/ko/docs/api-reference/core/selector/) SWR (https://swr.vercel.app/ko) React Query (https://react-query.tanstack.com/) 적합성 / 대중.. 더보기 [React][framer-motion] framer-motion Animation Library 연습 페이지 링크 (https://sad-wing-00b0bb.netlify.app) Framer Motion sad-wing-00b0bb.netlify.app 페이지 깃허브 (https://github.com/joohaem/prt-framer-motion) 공식 문서 (https://www.framer.com/docs/introduction/) 공식 깃허브 (https://github.com/framer/motion) 목차 . ├── Props │ ├── initial │ ├── animate │ ├── transition │ ├── variants │ ├── custom │ ├── style │ ├── whielHover / whileTap │ ├── drag / dragContraints │ └──.. 더보기 [React] map 함수에 key 값이 필요한 이유 (재조정; Reconciliation) 우리는 React app을 개발하면서 한 번쯤 map 함수를 사용하였을 것이다, 그 때마다 key 값을 넣어야 함도 알고 있다 그 이유에 대해서 한 번 알아보자 React에서 state나 props가 갱신되면 render() 함수는 새로운 Render Tree를 반환하며 reflow/repainting 과정을 거친다. 이를 리렌더링이라고 하는데, 그 중 Render Phase에서 재조정이 일어난다. 이에 대해 React는 최소한의 연산 수를 구하는 O(n) 복잡도의 휴리스틱 알고리즘을 구현하였다 다음 두 가정을 하며 말이다 서로 다른 타입의 두 Element는 서로 다른 트리를 만들어낸다 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 Element가 변경되지 않아야 할지 표시해 줄 수.. 더보기 [React][lodash/debounce] debounce 와 throttling 구현하기 디바운스(debounce)란? 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것 첫 함수를 호출하고 일정한 시간 후까지 연이어 호출되는 함수를 무시되는 것이 아니라, 가장 마지막 함수를 호출하고 일정한 시간 후까지 호출이 안 되면 그 함수를 실행시킨다 vs 쓰로틀링(throttling) 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 몇 밀리초에 한 번씩만 실행되게 제한을 두는 것 이는 아래에서 소개하는 debounce의 leading 옵션 기능과 같고, 스크롤이 바닥에 닿을 때마다 실행하는 함수 등에 사용할 수 있다 사용 문법 **_.debounce(func, [wait=0], [options={}])** // Avoid costly calculations w.. 더보기 이전 1 2 3 4 5 6 7 ··· 10 다음
