아폴로 클라이언트를 사용하면서 가장 많이 사용하는 훅은 useQuery일 것이다.선언한 graphql 규격에 맞춰, ApolloClient는 어떻게 데이터를 요청할까? 소스코드 흐름을 보며 따라가보자.useQuery.tshttps://github.com/apollographql/apollo-client/blob/v3.11.8/src/react/hooks/useQuery.ts https://github.com/apollographql/apollo-client/blob/v3.11.8/src/react/hooks/useQuery.ts#L155function _useQuery( query: DocumentNode | TypedDocumentNode, options: QueryHookOptions, NoInf..

리액트의 모달 컴포넌트는 다양한 방식으로 사용된다. 모달 렌더링에 대한 책임을 버튼 컴포넌트에 넘기는 방식. 모달의 열림/닫힘 상태를 버튼에서 관리하여 보일러 플레이트 코드를 줄이기 좋다. Props에 대한 타입 전달이 자연스러럽게 되는 장점도 있다.Share! 모달의 열림/닫힘 상태를 제어하면서 모달 컴포넌트를 렌더링하는 방식. 가장 일반적인 방식이고 러닝커브가 없다.const modal = useModal();//...Share! 모달을 함수 호출 시점에 렌더링하는 방식. 호출부와 렌더링 코드가 붙어있어 응집도가 높은 편이다.const { openModal } = useModal();const handleClick = () => openModal(ShareModal, { url });//...Shar..

컴포넌트의 Props를 일부 오버라이드하면서 인터페이스를 바꾸고, 컴포넌트가 동일한 ref를 갖게(re-render 가능하게) 해주는 훅을 만들어보자. Implementation export default function useInjectedProps(_Component: C, injectedProps: I) { // 훅의 인자로 받은 컴포넌트를 저장합니다. const Component = useRef(_Component); // 상태 변경이 일어나면서 컴포넌트 호출이 일어날 경우 injectedProps가 컴포넌트로 자연스럽게 주입 될 수 있게 합니다. Component.current = (props: Omit) => { ret..

https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024 React Labs: What We've Been Working On – February 2024 – React The library for web and native user interfaces react.dev RSC에서 실험적으로 테스트중인 cache https://react.dev/reference/react/cache cache – React The library for web and native user interfaces react.dev https://youtu.be/LL4V8CcEhIo - 메타 친구들은 자사 서비스에서 테스트 후 s..

배경 최근 ChatGPT 열풍이 거세다. 연구 영역에 있던 생성 AI의 위치를 대중에 가깝게 옮기면서 대중들로 하여금 급격한 기술 발달이 이뤄지고 특이점이 왔다(?)는 생각을 하게 만드는 것 같다. 기존에 ChatGPT에게 회사 면접 질문을 몇 개 해봤다는 글도 올린 적이 있는데, ChatGPT의 이슈몰이와 함께 조회수가 꾸준히 올라가고 있다. https://nookpi.tistory.com/156 ChatGPT에게 회사의 면접 질문 몇 개를 던져보았다 질문과 답변을 번역기로 돌려서 어색한 부분이 다소 존재합니다 Q: 유지보수 가능한 코드란? A: 유지 관리 가능한 코드는 이해하고 수정하기 쉬운 코드입니다. 여기에는 일반적으로 깨끗하고 잘 nookpi.tistory.com 개인적으로는 ChatGPT를 위..

테스트 환경은 다음과 같습니다. - jest (27.0.6 -> 28.1.3) - jsdom (16.6.0 -> 19.0.0) - @testing-library/react (12.0.0) - @testing-library/user-event (13.5.0) 1. JSDOM 환경에서 innerText 감지 불가 Select 컴포넌트를 확장한 DropdownSelect 컴포넌트의 테스트를 하던 중, 선택된 값을 감지할 수 없는 이슈가 발생했습니다. (Select 컴포넌트는 여러 옵션 중 하나를 선택할 수 있도록 해주는 UI 컴포넌트로, Renderer 컴포넌트를 동적으로 받아 다양한 요구사항에 대응할 수 있는 컴포넌트입니다) 문제가 발생한 테스트는 DropdownSelect에서 특정 값을 선택하는 과정이 포..