2022/06 (64) 썸네일형 리스트형 CSS 애니메이션 : Transforms Translation in flow 위치에서의 이동. 해당 요소의 이동이 grid, flex 타 요소 배치에 영향주지 않음. 픽셀 transform: translate(0px, 20px); % : 원래 자신의 크기 transform과 left의 차이점 Scale 배수를 나타내는 단위없는 값 좌우따로 너비나 높이 수정 시 모든 요소들의 위치를 계산해서 다 변경해야함. transform은 대상만 움직이고 확대하기에 성능에 좋음 Rotate 시계 방향으로 돌림 degree : 회전 각도 turn : 회전 수 Skew 거의 안씀. 대각선 레이아웃 만들 때나 씀 : https://9elements.com/blog/pure-css-diagonal-layouts/ 디폴트 X축. Y축 가능 Transform or.. Styled-Components(CSS-in-js) 잘 활용하기 원문 보기 :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 a lot about how to use it effectively. This article shares my personal “best practices”. www.joshwcomeau.com CSS Variables Backdrop 컴포넌트에 불투명도와 색상 props가 필요하다고 가정해 보겠습니다. function Backdrop({ opacity, colo.. The Difference Between VAC(View Asset Component) Pattern and Container/Presenter Pattern https://www.patterns.dev/posts/presentational-container-pattern/ Container/Presentational Pattern Enforce separation of concerns by separating the view from the application logic www.patterns.dev https://wit.nts-corp.com/2021/08/react에서-view의-렌더링-관심사-분리를-위한-vac-패턴-소개/ React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개 | WIT블로그 React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개 시작하며 FE개발에서 View는 정보의 시각화 뿐만 아니라 사용자와 상호작용.. 리액트 개발자를 위한 CSS Variable 원문 : https://www.joshwcomeau.com/css/css-variables-for-react-devs/ CSS Variables for React Devs CSS Variables are *really* cool, and they're incredibly powerful when it comes to React! This tutorial shows how we can use them with React to create dynamic themes. We'll see how to get the most out of CSS-in-JS tools like styled-components, and how our m www.joshwcomeau.com CSS 변수 정의 / 사용 일반 CSS 변수와.. React Portal과 타입스크립트로 모달 만들기 원문 : https://blog.logrocket.com/build-modal-with-react-portals/ Using React Portals to build a modal | LogRocket Blog Learn how to build a modal or overlay component in React with React Portals. Our demo is applicable for all top level components. blog.logrocket.com 해당 연구 : https://sumo.com/stories/pop-up-statistics 에 따르면 모달은 사용자의 이목을 끄는데 효과적입니다. 하지만 모달은 만들기 어렵습니다. z-index, 레이어, 돔 계층 추적은 쉽지 않습니다.. Intersection Observer와 React.lazy로 성능 개선하기 원문 : https://itnext.io/infinite-component-scrolling-with-react-lazy-and-intersectionobserver-7774c03b08f2 Infinite component scrolling with React.lazy and IntersectionObserver In a previous post, I wrote briefly about how the IntersectionObserver API could be used for things such as analytics and dynamic module… itnext.io 서론 오늘날의 프론트엔드에는 성능이 필요합니다. 그러나 성능은 다양한 영역을 포괄합니다. 이 기사에서는 React와 컴포넌트 렌더링의.. 리액트 쿼리 : 폼 원문 : https://tkdodo.eu/blog/react-query-and-forms form은 서버 상태와 클라이언트 상태의 경계가 모호지는 영역입니다. 해당 게시물에선 react-hook-form 과 React Query를 함께 사용하는 방법을 알아봅니다. Server State vs. Client State 서버 상태 대부분 비동기 대부분 스냅샷에만 접근 가능 대부분 우리가 소유하지 않은 상태 클라이언트 상태 완전히 제어할 수 있음 대부분 동기적 항상 정확한 값을 알 고 있음 간단한 접근 방법 저는 상태를 props에 넣거나, 다른 상태관리 도구로 상태를 복사하는 방법을 좋아하지 않습니다만, form은 예외가 될 수 있다고 생각합니다. 서버 상태를 초기값으로만 사용할 가능성이 높기 때문입니다. .. 리액트 쿼리 : 뮤테이션 원문 : https://tkdodo.eu/blog/mastering-mutations-in-react-query 리액트 쿼리 라이브러리 작업 대부분은 useQuery hook을 통한 데이터 검색에 관련한 것입니다. 그러나 데이터 작업에 두 번째로 필수적인 부분이 있습니다. 바로 업데이트입니다. 이 사용 사례의 경우 React Query는 useMutation hook을 제공합니다. 뮤테이션은 변형 > (서버 데이터 형태의 변경)으로 번역함. 4글자 다 적기도 귀찮고 의미도 애매한것 같아서... 변형(mutations)이 무엇인가요? 일반적으로 변형은 부작용이 있는 함수입니다. 예를 들어 Arrays의 push 메서드를 살펴보십시오. 값을 푸시하는 위치에서 배열을 변경하는 부작용이 있습니다. const m.. 이전 1 2 3 4 5 6 ··· 8 다음
