전체 글 썸네일형 리스트형 [React][css] 마우스 hover 시에 svg 보이기 구현하고자 한 뷰 나는 그저 위와 같은 뷰를 만들고 싶었다. . onmouseover / onmouseout 이벤트 처음에 들었던 생각은 onmouseover 이벤트로 hover 시의 state와 onmouseout 이벤트로 hover 가 해제될 때의 state를 관리하고자 하였다 console.log("wrapper")} onMouseOver={() => handleIsMouseOver(true)} onMouseOut={() => handleIsMouseOver(false)} > {isMouseOver ? ( console.log("hover")}> ) : null} 그래서 위와 같이 isMouseOver boolean state를 관리해주었고, 2가지 문제점이 발생하였다 onmouseover / on.. 더보기 [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가 변경되지 않아야 할지 표시해 줄 수.. 더보기 이전 1 ··· 4 5 6 7 8 9 10 ··· 38 다음
