2022/07 (37) 썸네일형 리스트형 Valtio의 프록시 상태관리가 어떻게 동작할까? (Vanila Part) 원문 : https://blog.axlight.com/posts/how-valtio-proxy-state-works-vanilla-part/ How Valtio Proxy State Works (Vanilla Part) Introduction Valtio is a library for global state primarily for React. It’s originally modeled to match with useMutableSource API. However, it turns out it’s a novel API to add immutability to mutable state. What is immutable state? JavaScript doesn’ blog.axlight.com Introdu.. 언제 리코일을 사용하는게 좋을까? TL;DR : 캔버스나 GUI 같은 앱이 아니면 딱히 필요하지 않다. 프로젝트 초반에 리코일을 도입하기 위한 리서치를 진행하다 어쩌다보니 사용하지 않고 있는데요. 사실 생각보다 원하는대로 쓰기 어렵다는 것 외에도 (뒤에 이유를 설명합니다.) 전역 상태 관리 도구로서 에측하지 못한 하나의 단점이 있는데요. 반드시 데이터가 리액트 컴포넌트 내부에 존재해야 한다는 것입니다. 생각보다 개발하다보면 마이크로 최적화를 위해 렌더링 없이 상태 참조가 필요한 경우가 왕왕 있습니다. (useRecoilCallback을 활용할 수도 있지만, useCallback과 같은 문제가 있습니다.) https://recoiljs.org/docs/api-reference/core/useRecoilCallback/ 물론 ms단위의 미묘.. 리액트 훅의 클로저 트랩(closure trap) 이해하기 원문 주소 : https://betterprogramming.pub/understanding-the-closure-trap-of-react-hooks-6c560c408cde Understanding the Closure Trap of React Hooks Digging into the classic problem betterprogramming.pub 문제 import { useEffect, useState } from 'react'; export default function App() { const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { setCount(count + 1); }, 1500); }, []); useE.. 리액트에 SOLID 원칙 적용하기 원문 : https://konstantinlebedev.com/solid-in-react/ Applying SOLID principles in React As the software industry grows and makes mistakes, the best practices and good software design principles emerge and conceptualize to avoid repeating the same… konstantinlebedev.com 소프트웨어 산업이 성장하고 실수를 범함에 따라 모범 사례와 우수한 소프트웨어 설계 원칙이 나타나고 미래에 같은 실수를 반복하지 않도록 개념화됩니다. 특히 객체 지향 프로그래밍(OOP)의 세계는 이러한 모범 사례의 금광이며 SOLID는.. 리액트 쿼리 : FAQ(자주 묻는 질문) 원문 : https://tkdodo.eu/blog/react-query-fa-qs React Query FAQs Answering the top 3 most frequently asked React Query questions tkdodo.eu 상당히 의역한 내용이라 본문과 다를 수 있습니다. (의미가 다르진 않을껍니다... 군복무 시절에도 토익 900은 넘었습니다...) Refetch에 파라미터 넘기기 불가능합니다. 이유는? : Refetch라 생각한 경우는 대부분 Refetch가 아닙니다. const { data, refetch } = useQuery(['item'], () => fetchItem({ id: 1 })) { // 🚨 this is not how it works refetch({ id: .. 프레이머 모션[framer motion] 기초 2부 : 레이아웃 애니메이션 이번에 배울 것 여러 컴포넌트에 애니메이션 전파하기 복잡한 레이아웃 에니메이션 오케스트레이션(조정 및 통합) Propagation (애니메이션 전파) 부모 컴포넌트의 variant 변경을 자식 컴포넌트에 알림 카드와 레이블을 덮고 있는 "보이지 않는" 모션 레이어가 있습니다. 이 레이어는 "hover" variant를 설정하는 whileHover 소품을 보유합니다. "글로우" 자체도 컴포넌트이지만 정의하는 유일한 것은 호버 키가 있는 자체 variant 객체입니다. 보이지 않는 레이어가 "hover"되면 hover variant를 토글하고 hover variant가 prop에 정의되어 있는 모든 하위 모션 컴포넌트는 이 변경 사항을 감지하고 해당 동작을 토글합니다. const CardWithGlow = .. 프레이머 모션[Framer Motion] 기초 1편 : 생기초 알아보기 원문 보기 https://blog.maximeheckel.com/posts/guide-animations-spark-joy-framer-motion/ Guide to creating animations that spark joy with Framer Motion - Maxime Heckel's Blog An interactive guide introducing everything I've learned about Framer Motion through fun examples and little case studies of animations I built. blog.maximeheckel.com 아래에서 다루는 예제들 원문은 영어로 읽는데 20분 정도 걸리는 상당한 분량입니다. 내용을 거의 3분 분량.. [css] fixed를 중첩할 경우 조심해야 할 점 모바일 웹앱 프로젝트 도중 아래에서 위로 올라오는 drawer 컴포넌트를 개발할 일이 생겼다. 그런데 내부부터 만들고자 해서, 동작하지 않는 css를 냅뒀었다. 상황은 다음과 같다. 가장 외부에 css 애니메이션을 적용해야 하는것을 일단 냅뒀다. 그러다보니 내부 div에 transition css 속성을 그대로 냅뒀다. 가장 외부는 레이아웃을 덮기 위한 fixed 요소가 존재한다. 그리고 drawer 내부에는 fixed 속성을 적용한 헤더가 존재한다. 드로어 컨텍스트가 배경을 덮어야 하니 제일 외부에 fixed를 둔다 그 다음 내부에 transform을 건 div를 둔다. 그 다음 드로어 내부 헤더에 fixed를 건다. 그러면 어떻게 될까...? 아래에서 직접 확인하자. 해당 상황을 재현한 예시 Rea.. 이전 1 2 3 4 5 다음
