하리하링웹

아래의 코드를 봐보자 class Programmer { name:string; constructor(name:string) { } } class Manager { name:string; constructor(name:string) { } } let employee:Programmer = new Manager('Jongsik') Programmer와 Manager는 같은 구조의 클래스이다. 타입스크립트에서는 이러한 상황에 Programmer 타입과 Manager 타입은 같은 타입이라고 판단하여 에러를 발생시키지 않는다. 아래 이미지와 같은 예시에서도 마찬가지이다 분명 Manager타입에 Programmer 타입을 넣었는데 에러가 발생하지 않는것을 확인할 수 있다. 이로써 알 수 있는것이 하나 있다. 타입스..

제네릭은 타입스크립트에서 재사용이 가능한 컴포넌트를 생성하는것을 도와주는 역할을 한다 문법 type A = (a:T[]) => T const a:A = (arr) => { return arr[0] } const result= a([1,2,3]) const result2 = a(['1','2']) // 함수형 function A(arg:SomeGeneric) {} A A A // 클래스형 // !Static과 같은 정적변수는 제네릭으로 관리할 수 없다. class A { constructor(a:T){} } new A(1) new A('a') // 타입스크립트 인터페이스 interface GenericIdentityFn { (arg: Type): Type; } 주의점 Static과 같은 정적변수는 제네릭으..

현재 다니고있는 회사에서는 약 100명 정도의 개발자가 단일 저장소에서 코딩을 진행하고 있다. 이러한 복잡한 작업 환경에서는 개발자에 의해 발생할 수 있는 실수나 예측할 수 없는 에러를 방지하는 것이 매우 중요하다. 이에 따라, 객체의 모든 레벨에서 객체의 변경을 방지할 수 있는 방안이 필요했고, TypeScript를 활용하여 DeepReadonly 유틸리티 타입을 만들게 되었다. DeepReadonly 타입은 객체의 모든 프로퍼티를 재귀적으로 읽기 전용으로 만들어, 객체의 불변성을 보장해준다. 프로젝트의 규모가 커질수록 코드의 안정성을 유지하는 것이 중요하며, DeepReadonly 타입은 객체의 중첩된 구조까지 보호함으로써 개발자들이 실수로 객체를 변경하는 것을 방지할 수 있다. 구현 코드 type ..

useTransition useTransition은 React 18버전에서 추가된 동시성을 다를 수 있는 새로운 훅입니다. React의 모든 렌더링은 동기적으로 작동하여 오래걸리는 렌더링 작업이 있으면 유저에게 안좋은 경험을 줄 수 있었지만 useTransition같은 훅을 사용하면 오래걸리는 렌더링 작업에 대해 로딩 화면을 출력하거나 지금 진행중인 렌더링을 버리고 다른 렌더링 과정을 실행하게하는 등 이를 잘 응용한다면 유저 경험을 향상시킬 수 있도록 만들어주는 역할을 할 수 있습니다. [사용법] import { useTransition } from 'react'; function TabContainer() { const [isPending, startTransition] = useTransition()..

최근 회사에서 특정 파일 경로를 입력받아, 그 경로와 관련된 파일들의 경로를 의존성에 따라 배열로 반환하는 코드를 개발하는 Job을 받았다. 이 과정에서 Input 값으로 2가지의 정보를 받을 수 있었는데 이는 아래와 같다. 1. 파일 경로 2. parse 옵션(isProduction, isForce) 그리고 회사 repo의 각 project안에는 project의 의존성 관계를 인터페이스화하여 알려주는 .json파일이 platform 별로 @개 만큼 있는 구조였으며 이를 옵션, 의존성, project의 구조별로 잘 조합하여 효과적으로 그리고 문제가 없도록 파싱하는것이 가장 중요한 목표였다. 처음에는 경로를 받아 절차지향형 방식으로 개발을 진행하였다. 어찌저찌 문제없이 돌아가도록 완성은 시켰지만 앞으로의 ..

얼마전에 회사에서 비동기 작업의 시간에 따라 자동으로 로딩 표시를 보여주는 기능을 개발해달라는 요청을 받아 이를 개발하게 되었다. 물론 간단하게 구현할수도 있겠지만 회사 내부의 코딩 룰, 어디서 보기 힘들정도로 큰 저장소 크기, 여러번 요청할수도 있는 비동기 작업 등으로 인해 간단하게 구현하는 방식은 불가능하게 되었다. 이러한 제약조건을 딛고 이를 구현하기 위해, 비동기 작업이 지정된 시간 이상 걸릴 경우 사용자에게 로딩 상태를 알려주는 간단하면서도 효과적인 방법을 고안했다. 이 기능의 핵심은 Promise.race를 사용하여 비동기 작업과 타임아웃을 결합시키는 것이다. 핵심 개념: Promise.race Promise.race는 여러 프로미스 중 가장 먼저 완료되거나 실패하는 프로미스의 결과를 반환한다..

React.memo개요 유저들은 반응이 빠른 UI를 선호한다. 100ms 미만의 UI 응답 지연은 유저들이 즉시 느낄 수 있고, 100ms에서 300ms가 지연되면 이미 유저들은 상당한 지연으로 느낀다. UI 성능을 증가시키기 위해, React는 고차 컴퍼넌트 개념인 memo를 제공하며 이는 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛸수있게 해준다. 컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다. 공식문서에서의 정의 memo(Component, arePropsEqual?) • Co..

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 잘 응용하면 대부분의 경우 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. React의 memo에 대해 작성할 예정이다. 먼저 아래에 간단한 예시가 있다. import { useState } from 'react'; import { Button } from '@/components/ui'; function LargeComponent() ..

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 3.컴포넌트의 Props값이 변경되었을 때 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. import { Button } from '@/components/ui'; import { memo, useCallback, useState } from 'react'; function ButtonComponent({ onClick }: { onC..

javascript에서 Code splitting을 해서 Dynamic하게 import를 진행할 때에 주의해야 할 점이 있다. 이 글에서는 Next.JS의 dynamic을 사용하여 예를들어 설명해보겠다. import dynamic from 'next/dynamic'; import { useState } from 'react'; import { Button } from '@/components/ui'; const DynamicComponent = dynamic(() => import('@/components/test/DynamicComponent')); export default function TestPage() { const [isRender, setIsRender] = useState(false); ..