본문 바로가기

FrontEnd

 (437)
타입스크립트 : 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:..
[짤막글] 언제 context API를 사용하고 언제 zustand나 redux를 사용할까요? TLDR : (!트리_아래_업데이트 && context) || zustand 긴말 필요없이 아래 트윗을 인용합니다. (Tanner Linsley === 리액트 쿼리 메인테이너, 창시자) https://twitter.com/tannerlinsley/status/1293640999533568000?lang=en 트위터에서 즐기는 Tanner Linsley “I'm using #ReactQuery with Zustand and really liking the pairing. It's a super tiny, very flexible, no-nonsense client-state solution for React. If I were to write a client-state solution from scratc..
리액트 테스트 : 브라우저 API와 서드파티 모듈 mocking 배경 mocking을 이용하면 software가 어떻게 사용되는지(how)를 명시적으로 테스트 할 수 있습니다. 이전 시간에 HTTP 요청을 모킹해 보았는데요, 때로는 모킹해야 하는 전체 브라우저 API 또는 모듈이 있습니다. 코드의 가짜 버전을 만들 때마다 "현실에 구멍을 뚫고" 결과적으로 자신감을 잃게 됩니다(이것이 E2E 테스트가 중요한 이유입니다). 테스트 더블은 실제 현실의 코드와 차이가 있고, 이는 테스트 용이성과 안정성의 tradeoff입니다. 모킹의 장점? 테스트가 소프트웨어 사용 방식과 유사할수록 더 많은 자신감을 얻을 수 있습니다. - 나 The Merits of Mocking The Merits of Mocking What are you doing when you mock someth..
리액트 테스트 : MSW를 사용하여 HTTP Requests 모킹하기 TLDR : MSW를 이용하여, 개발 서버와 테스트 서버를 동일하게 사용하자. Mock Service Worker Seamless API mocking library for browser and Node. mswjs.io 백엔드 상호작용 테스트는 중요합니다. 사용자가 앱을 사용하는 방식이기 때문입니다 e2e 테스트는 cypress와 같은 도구로 대체 Unit Component Test, (server) Integration Test는 windows.fetch를 모킹하는 것부터 시작 MSW – Seamless API mocking library for browser and Node | Mock Service Worker (mswjs.io) window.fetch는 JSDOM/Node에서 지원되지 않기 때문..
타입스크립트 : typescript with JSON (JSON에 타입 지원) 최근에 react-i18next(react-i18next)의 translation.json을 타이핑 한 경험이 있습니다. 물론 공식문서에 방법이 상세하게 잘 적혀있는데요, 다른 JSON 타이핑에도 응용할 수 있지 않을까 해서 비슷한 예제를 찾아봤습니다. 원문 : https://dev.to/nickytonline/strongly-typed-json-in-typescript-5gb2 Strongly Typed JSON in TypeScript Someone in one of the Slack communities I'm a part of asked today how to type JSON in TypeScript,... dev.to 1. 타입스크립트 옵션을 켭니다. json을 임포트할 수 있도록 합니다. {..
타입스크립트 : 파라미터 타입(Parameters)과 리턴 타입(ReturnType) TLDR : 좋은 사용 사례 파라미터 유틸리티 타입은, 인자로 사용할 데이터와 함수 파라미터 시그니처의 변경을 동기화 리턴타입 유틸리티 타입은, 다른 함수의 출력을 다른 함수의 입력 파라미터의 시그니처와 동기화 원문 : https://fjolt.com/article/typescript-parameters-utility-type#:~:text=The%20TypeScript%20Parameters%20Type%20is,we%20want%20to%20replicate%20that. How the TypeScript Parameters Type Works The Parameters type is a utility type in TypeScript that lets us take the arguments of a..
디자인 시스템 만들기 시리즈 1편 : 디자인 토큰 소개 원문 : https://www.michaelmang.dev/blog/introduction-to-design-tokens Introduction to Design Tokens Design tokens are being used by companies like Amazon and Adobe to solve the pitfalls of coding a design system. I provide an introduction to design tokens. www.michaelmang.dev TLDR: CSS는 스타일 시트 스펙의 원자가 아닙니다. 원자는 바로 딕셔너리의 필드 : 밸류 한 쌍입니다. css 클래스는 스펙(사양)이 아닙니다. color : 'black' 한 쌍입니다. 코드에서 사용할 수 있는 사..

티스토리툴바