본문 바로가기

FrontEnd

 (437)
타입스크립트 : 모듈 확장(module augmentation)으로 서드파티 관련 타입 문제 해결하기 원문 보기 Solve any external library error in TypeScript with module augmentation When you get stuck, use module augmentation to tweak the modules that you can't access otherwise. isamatov.com 이 TypeScript 튜토리얼은 모듈 확장을 사용하여 외부 라이브러리로 작업할 때 발생할 수 있는 타입 오류를 해결하는 방법을 다룹니다. 모듈 확장을 사용하여 다른 방법으로는 액세스할 수 없는 모듈을 조정하십시오. TypeScript의 선언 병합(Declaration merging) 기능 모듈 확장에 대해 알아보기 전에, TypeScript에서 선언 병합이 모듈 확장과 ..
TypeScript의 앰비언트 모듈(Ambient Modules) - js 라이브러리에 타입 적용하기. 원문 보기 이 게시물에서는 TypeScript의 앰비언트 모듈을 살펴보겠습니다. 앰비언트 모듈이 무엇인지, 어떻게 사용하는지, 사용 시 몇 가지 주의 사항과 팁을 다룰 것입니다. 앰비언트 모듈이란 무엇입니까? Ambient 모듈은 JavaScript로 작성된 라이브러리를 가져와서 마치 TypeScript로 작성된 것처럼 원활하고 안전하게 사용할 수 있는 TypeScript 기능입니다. 앰비언트 선언 파일은 모듈의 타입을 설명하지만 구현은 포함하지 않는 파일입니다. 앰비언트 선언 파일은 JavaScript로 변환되지 않습니다. 순전히 타입 안전 및 IntelliSense를 위해 사용됩니다. d.ts 파일 포맷을 따릅니다. TypeScript 에코시스템에는 DefinitelyTyped를 통해 사용할 수 있는..
리액트 패턴 : Derived State - 파생(계산된) 상태 활용하기 원문 보기 상태 관리는 웹 애플리케이션을 구축하고 확장하는 데 있어 가장 어려운 부분입니다. 나는 개발자들이 주로 건전한 상태 관리 기계를 작성하는 일을 하며 돈을 받는다 생각합니다. 다른 모든 부분은 UI 라이브러리와 NPM 패키지를 사용하여 아웃소싱하거나 자동화할 수 있습니다. 이 포스트에서는 과소평가되고 있다고 생각되는 "파생 상태"라는 상태 관리 기술에 대해 다루고자 합니다. 많은 경우 상태 관리 논리를 단순화할 수 있습니다. 파생 상태 기술은 라이브러리에 구애받지 않으며 Redux, MobX 및 React의 built-in 훅에 적용할 수 있습니다. 파생 상태("Derived State")는 뭔가요? 이전에 정의된 상태들을 통해 계산할 수 있는 상태입니다. 이전 정보로 계산할 수 있는 정보는 상..
리액트 패턴 : 타입스크립트를 활용해 as Props 사용하기 원문 보기 React polymorphic components with TypeScript Polymorphic components is a powerful React pattern for controlling how your components render in DOM. isamatov.com 폴리모픽 컴포넌트 패턴은 매우 유명한 리액트 패턴 중 하나입니다. 컴포넌트를 as를 사용하여 button을 a, div로 사용할 수 있게 해줍니다. TypeScript와 제네릭을 사용하여 강력한 타입 체킹이 더해진 다형적 컴포넌트를 작성하는 방법을 살펴보겠습니다. Overview of polymorphic components (폴리모픽 컴포넌트 개요) API가 어떻게 사용되는지를 확인합니다. 버튼이 a 태그처럼 ..
리액트로 XState 시작하기 원문 보기 XState with React for Beginners - This Dot Labs Introduction When I started to learn XState for the first time, I found the docs somewhat difficult to interpret. Perhaps this was because the docs show a… www.thisdot.co XState는 Recoil, Jotai 등에 비해 상대적으로 잘 알려지지 않았으나, 상태 머신, 상태차트의 개념을 활용하여 이벤트 드리븐, 선언적 상태 관리를 실현하는 라이브러리 입니다. 해당 라이브러리의 개발자는 Microsoft 직원이며, 의외로 굉장히 많은 회사에서 해당 라이브러리를 사용하고 있습니다. ..
타입스크립트의 타입 시스템으로 틱택토(Tic Tac Toe) 구현하기 원문 보기 Type System Game Engines Just for fun, what if we crafted a board game purely within TypeScript's logical type system? blog.joshuakgoldberg.com 영상 버전 TSConf 2020 TSConf 2021 In its 4th year, the TSConf team is excited to organize another stellar conference (Virtually. Thanks, Covid.) that will delight and entertain even the most curmudgeonly developer! tsconf.io 템플릿 문자열 리터럴을 이용해 Tic Tac To..
타입스트립트의 타입시스템으로 산수 구현하기 원문 주소 Implementing Arithmetic Within TypeScript’s Type System Use TypeScript’s 4.x releases to implement natural numbers and basic mathematical operators. itnext.io 타입스크립트 4.x 버전 덕택에 지금까지 불가능했던 타입을 표현할 수 있게 되었다. 만약 타입만으로 코드 실행 결과의 검증이 가능하다면 1+2같은 함수의 테스트는 구현할 필요가 없을것이다. 즉 Add 타입의 결과가 8이라면, Add 타입은 8이외의 값은 허용하지 않을것이다. 타입스크립트의 타입만으로 컴파일 타임 이전에 알 수 있는 코드 실행 결과를 검증해보자. 사용하는 기능 이전부터 존재한 친숙한 기능들 조건부 타..
React Remix Framework로 알아보는 중첩 경로(nested routing) 해당 게시물을 이해하는데 React Remix 프레임워크에 대한 사전 지식은 필요하지 않습니다. 컴포넌트 정의와 프로젝트 구조는 수 많은 리액트 개발자들의 큰 고민거리 중 하나입니다. 지금까지 컴포넌트의 크기, 컴포넌트의 역할에 집중하여 아토믹 디자인, 컨테이너 / 프리젠터 패턴 등을 프로젝트에 도입해 왔습니다. 제 생각에는 중요함에도 지금까지 의식하지 못한 하나의 관점이 있다고 생각합니다. 이는 해당 컴포넌트의 렌더링을 결정하는 url 경로(route) 입니다. 예시: apollo-client 공식 예제 : odyssey-lift-off GitHub - apollographql/odyssey-lift-off-part5-client: Odyssey Lift-off V - Client - Course Co..

티스토리툴바