typeScript (46) 썸네일형 리스트형 타입스크립트 : 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.. 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, 레이어, 돔 계층 추적은 쉽지 않습니다.. 리액트 쿼리 : 타입스크립트 원문 보기 : https://tkdodo.eu/blog/react-query-and-type-script React Query and TypeScript Combine two of the most powerful tools for React Apps to produce great user experience, developer experience and type safety. tkdodo.eu 리액트 쿼리의 동적이며 unopinated인 특성 때문에 ts와 사용하기 어려운 부분들이 존재합니다. 좀 더 알아봅시다. Generics React Query는 Generics를 많이 사용합니다. 라이브러리가 실제로 데이터를 가져오지 않고 API가 반환하는 데이터의 타입을 알 수 없기 때문에 필요합니다. 공식 문서.. 리액트 디자인패턴 : Render Props(렌더 프롭스 패턴) TLDR : 렌더 프롭 패턴 = 컴포넌트 내 비즈니스 로직(캡슐화) + 비즈니스 로직 결과물을 이용한 렌더링 hook과 함께 렌더 프롭스 패턴은 죽었다는 의견이 많다. 하지만 아직 활용처가 남아있다는 사람이 있다. 특정 조건에서는 Render Props Pattern이 hooks보다 낫다는 것이다. 바로 선택적 렌더링이다. 렌더 프롭은 선택적으로 렌더 체인을 단락하고 다른 view로 일찍 반환할 수 있다. 즉 렌더 로직을 바이패스하는 서킷 브레이커와 같은 역할을 하는 컴포넌트들의 체인을 만들 수 있다. either monad와 비슷하다고 보면 될 것이다. DIY : 토큰을 통해 유저 정보 가져오기 사용자 id를 통해 토큰의 존재 여부를 판단한다. type Token = string; type Id = n.. React children with typescript. 리액트 children 컴포넌트 타이핑 원문 : https://isamatov.com/react-typescript-children-prop/ Using React children prop with TypeScript I'll cover each of the types used for children prop and discuss the trade-offs so you can pick the right one for your use case. isamatov.com 추가 : PropsWithChildren라는 리액트 자체제공 타입이 있습니다. 이걸 활용합시다. https://itchallenger.tistory.com/641 타입스크립트의 타입 추론과 힌들리 밀러 타입 시스템 https://mostly-adequate.gitbook.io/mostly-adequate-guide/ch07 Chapter 07: Hindley-Milner and Me - mostly-adequate-guide Looking at head, we see that it takes [a] to a. Besides the concrete type array, it has no other information available and, therefore, its functionality is limited to working on the array alone. What could it possibly do with the variable a if it knows not mostly-adequate.gitbo.. 제어의 역전을 활용해 타입 친화적인 컨텍스트를 디자인하는 방법 원문 보기 : https://saul-mirone.github.io/how-to-design-a-type-friendly-context/ How to Design a Type Friendly Context IoC is the key. saul-mirone.github.io 자바스크립트 세계에서, Koa는 하나의 이정표와 같은 역할을 하였습니다. Koa는 애플리케이션의 핵심은 플러그인을 load하기 위한 코어로서 동작하며, 여러 기능을 제공하기 위해 다양한 플러그인을 번들할 수 있는 역할임을 되새기게 합니다. (ex, 스프링, express) vscode의 확장 프로그램, 웹팩의 플러그인과 같은 비슷한 사례들을 발견할 수 있습니다. 자바스크립트의 컨텍스트 Koa의 세계에서 ctx는 마법의 상자입니다. 사용.. 이전 1 2 3 4 5 6 다음
