본문 바로가기

FrontEnd

 (437)
리액트 쿼리 : 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..
리액트 성능 최적화 : children props를 이용하여 리렌더링 방지 재미있는 글을 봤습니다. https://kentcdodds.com/blog/optimize-react-re-renders One simple trick to optimize React re-renders Without using React.memo, PureComponent, or shouldComponentUpdate kentcdodds.com 부모 컴포넌트가 리렌더링되면 자식들은 다 리렌더링 되는거 아닌가요? 그런데 children들이 리렌더링 되지 않는 경우가 있다고요? React는 리렌더링 시 전달된 children 객체에 대하여 얕은 비교를 수행합니다. 즉, 전달된 children이 동일한 객체이면 리렌더링을 수행하지 않습니다. (React.memo는 1단계 깊이 비교를 수행하는 것으로 알고 있..
개인적으로 생각해본 컴포넌트 설계론 + 카카오 FE 기술블로그 염탐 보호되어 있는 글입니다.
Styled-Components의 비밀 파헤치기 styled-components의 내부 구현을 살펴봅니다. 원문 링크 : https://www.joshwcomeau.com/react/demystifying-styled-components/ Demystifying styled-components For so many React devs, styled-components seems kinda magical. It isn't at all clear how it uses traditional CSS features under-the-hood, and that lack of clarity can cause real problems when things go awry. In this post, we'll learn exactly how styled-com ww..
Tailwind CSS와 CSS-in-JS 무엇을 사용할까? 언제 어떤 도구를 쓰는게 맞는지 생각해보자. TLDR : 생산성 : Css-in-js 유지보수성, 확장성 : tailwind CSS Styled-Components 베스트 프랙티스(모범 사례) 원문 보기 :https://www.joshwcomeau.com/css/styled-components/ The styled-components Happy Path styled-components is a wonderfully powerful styling library for React, and over the years I've learned.. itchallenger.tistory.com Styled-Components의 비밀 파헤치기 7원문 링크 : https://www.joshwcomeau.com/react..

티스토리툴바