REACT (187) 썸네일형 리스트형 React 18의 useSyncExternalStore, Tearing 현상은 무엇인가? React18의 Tearing현상과 이를 해결하기 위한 useSyncExternalStore에 대해 알아봅시다. 원문 : https://blog.saeloun.com/2021/12/30/react-18-usesyncexternalstore-api Meet the new hook useSyncExternalStore, introduced in React 18 for external stores Ruby on Rails and ReactJS consulting company. We also build mobile applications using React Native blog.saeloun.com useSyncExternalStore API에 대해 알아보기 전에 이 새로운 훅을 이해하기에 유용한 용어에 익.. 리액트의 의존성 주입 with Context API (dependency injection) 중간에 useContext훅을 끼워넣으면 Consumer가 사라지고, 컴포넌트는 Context의 존재에 대해 몰라도 됨. 같이 보면 좋을 글 https://itchallenger.tistory.com/646 리액트 프로젝트의 결합도를 관리하는 방법 원문 : https://betterprogramming.pub/coupling-cohesion-552b022492b2 Organizing Modules in React Project — Low Coupling and High Cohesion Design robust applications betterprogramming.pub 서로 분리되.. itchallenger.tistory.com https://itchallenger.tistory.com/644 리액트 .. 리액트 프로젝트의 결합도를 관리하는 방법 리액트 프로젝트의 결합도와 응집도를 관리하는 방법에 대해 알아봅니다. 결합도 분석 단위는 모듈(폴더, 패키지)이라 볼 수 있습니다. 응집도 분석 단위는 라인 입니다. 같이 보면 좋은 글 ! https://itchallenger.tistory.com/644 리액트 컴포넌트의 응집도를 관리하는 방법 같이 보면 좋은 글! : https://itchallenger.tistory.com/646 리액트 프로젝트의 결합도를 관리하는 방법 원문 : https://betterprogramming.pub/coupling-cohesion-552b022492b2 Organizing Modules in React Pro.. itchallenger.tistory.com https://ui.toast.com/weekly-pick/.. 리액트 컴포넌트의 응집도를 관리하는 방법 리액트 컴포넌트의 응집도를 관리하는 방법을 알아봅니다. 같이 보면 좋은 글! : https://itchallenger.tistory.com/646 리액트 프로젝트의 결합도를 관리하는 방법 원문 : https://betterprogramming.pub/coupling-cohesion-552b022492b2 Organizing Modules in React Project — Low Coupling and High Cohesion Design robust applications betterprogramming.pub 서로 분리되.. itchallenger.tistory.com 해당 강연의 스크립트 정리 노트입니다 : https://youtu.be/aSAGOH2u2rs TLDR 응집도는 변화를 유발하는 원인이.. 리액트 Concurrent UI Pattern - Scheduling in React 원문 : https://philippspiess.com/scheduling-in-react/ Scheduling in React In modern applications, user interfaces often have to juggle multiple tasks at the same time. For example, a search component might need to respond to user… philippspiess.com 현재는 아래 방법과 다르게 suspense / useTransition을 사용하는 방법으로 변경되었습니다만, 개념을 이해하는데는 아주 좋은 리소스라 생각해서 번역 및 정리하였습니다. 아래의 컨셉을 실제로 프로젝트에 적용하는 방식에 대해서는 아래 두 게시물을 참고해 주세요.. 리액트 점진적으로(일부만) 도입하기 (제이쿼리와 함께 쓸수 있을까?): ReactDOMServer TLDR : ReactDOMServer을 사용하면 리액트를 일부분만 string으로 변환하여 도입, 사용할 수 있다. 현재 프로젝트에서 해당 라이브러리를 사용하고 있습니다. https://nhn.github.io/tui.calendar/latest/ https://nhn.github.io/tui.calendar/latest/ A JavaScript calendar that is full featured. Now your service just got the customizable calendar. 🚩 Table of Contents 📙 Documents Collect statistics on the use of open source TOAST UI Calendar applies Google Analyti.. 타입스크립트 : React.FC는 그만! children 타이핑 올바르게 하기 참고자료 : https://stackoverflow.com/questions/65548388/react-propswithchildren-with-no-props-other-than-children React.PropsWithChildren with no props other than `children`? I have a component with no props other than children, i.e.: function Foo({ children }: React.PropsWithChildren) {} React.PropsWithChildren requires an argument. If I do React.PropsWithChil... stackoverflow.com 리액트에는 React.Props.. 리액트 테스트 : Context API 테스트와 커스텀 렌더 함수 사용하기 TLDR : UI 사용자가 관심 없는 건 구현 상세입니다. 컨텍스트를 사용하는 컴포넌트를 테스트하려면 wrapper가 필요합니다. (ThemeProvider, Router, Authentication) 우리가 UI를 테스트 하는 이유는, bad ux(사용자 관점 버그)를 막기 위함입니다. 따라서 테스트 코드는 UI적인 관점만 드러나면 좋습니다. 코드가 아닌 사용자의 행동으로 UI가 변해야 하는 경우 act 함수를 통해 명시한 것도 비슷한 맥락입니다. 따라서, render 관련한 함수도, 유틸로 분리합니다. 테마를 테스트 하는 코드 얼핏 보면 렌더가 뭔가 이상합니다. 이는 컨텍스트를 테스트의 관심사에서 제외해 버렸기 때문입니다. 대신 테스트 자체에 좀 더 집중할 수 있습니다. (테마의 변경) https:.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 24 다음
