2022/07 (37) 썸네일형 리스트형 리액트 테스트 : 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' 한 쌍입니다. 코드에서 사용할 수 있는 사.. 리액트 국제화(i18n, internationalization) translation key 설계 TL:DR 컴포넌트 / 디자인 기반으로 translation key를 설계하자 개요 : 최근에 국제화가 필요한 프로젝트를 진행하면서, translation key 설계를 잘못해서 곤란한 경우가 있었습니다. 애초에 translation key를 파라미터를 이용해 동적으로 사용할 수 있도록 디자인 했으면 좋았을 것이란 생각이 들었는데요, 처음에는 의미론적으로 키 디자인을 접근헀는데, 좀 더 키에 컴포넌트의 컨텍스트를 담았으면 좋지 않았을까 생각해서, 다른 사람들의 접근법을 리서치해보다 괜찮은 아이디어가 있는 것 같아 공유해봅니다. 원문 : 힘들게 배운 프로젝트 국제화 적용 경험의 교훈들 Web internationalisation (i18n) lessons I’ve learned the hard way W.. 리액트를 직접 만들며 알아보는 렌더/커밋/조정 알고리즘 원문 보기 : https://pomb.us/build-your-own-react/ Rodrigo Pombo An overengineer building tools for better code reading comprehension pomb.us 0단계 : 리뷰 리액트 코드를 바닐라 js로 바꿔봅시다. 리액트 const element = Hello const container = document.getElementById("root") ReactDOM.render(element, container) 바닐라 JS const element = { type: "h1", props: { title: "foo", children: "Hello", }, } const container = document.getEle.. 리액트 디자인 패턴 : 선언적 컴포넌트 설계 (declarative component design) 어떤 컴포넌트가 선언적인가? 어떻게(how) 보여줄까가 아닌 무엇을(what) 보여줄까 아래 글의 도입부에서 명령형 컴포넌트와 선언형 컴포넌트를 다룹니다. https://tech.kakaopay.com/post/react-query-2/ React Query와 함께 Concurrent UI Pattern을 도입하는 방법 | 카카오페이 기술 블로그 카카오페이에서 React Query를 활용하여 Concurrent UI Pattern을 도입한 사례에 대해 소개합니다. 이 글은 연작 중 2편에 해당합니다. 1편: 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유, 2 tech.kakaopay.com 아래는 명령형 컴포넌트입니다. import { useState, useEffect } from.. Valtio의 프록시 상태관리가 어떻게 동작할까? (React Part) 원문 : https://blog.axlight.com/posts/how-valtio-proxy-state-works-react-part/ How Valtio Proxy State Works (React Part) Introduction In the previous article, we explained how Valtio proxy state works. It tracks mutations of state and create immutable snapshot. Let’s recap the API in vanilla part of Valtio. // Create a new proxy state to detect mutations const state = prox blog.axlight.com 1편 링크 :.. 이전 1 2 3 4 5 다음
