본문 바로가기

분류 전체보기

 (989)
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..
리액트 쿼리 : 네트워크 오프라인 시 동작 원문 : https://tkdodo.eu/blog/offline-react-query 오타가 너무 많았어서 수정하였습니다. TL;DR : fetchStatus - 네트워크 연결 상태를 나타내는 횡단관심사 React Query는 비동기 상태 관리 도구 입니다. queryFn의 리턴값이 프로미스인 이상, 라이브러리는 동작합니다. 데이터가 어디에서 왔는지는 중요하지 않습니다. fetchStatus는 loading, sucess,error와 직교하는 또 다른 상태입니다. fetching: 쿼리가 실행중입니다 - 요청이 실행중입니다. paused: 쿼리가 실행되고 있지 않습니다 네트워크가 다시 연결될 때까지 쿼리가 일시 중지됩니다. idle: 쿼리가 현재 실행중이지 않습니다. v4의 기본 모드에서는 네트워크 연..
리액트 쿼리 : 에러 처리 https://tkdodo.eu/blog/react-query-error-handling React Query Error Handling After covering the sunshine cases of data fetching, it's time to look at situations where things don't go as planned and "Something went wrong..." tkdodo.eu 서론 리액트 쿼리는 비동기 상태 관리 라이브러리입니다. 오류 처리는 비동기적 데이터 가져오기 작업의 필수적인 부분입니다. 모든 요청이 성공하는 것은 아니며 모든 프로미스가 fullfilled되는 것도 아닙니다. 우리는 보통 처음에 성공을 가정하고 구현합니다. 그러나 에러를 처리하는 방법에 대해..

티스토리툴바