Algoroot's space

안녕하세요, 오늘은 리액트네이티브에서 navigation, route를 사용할 때 유용한 제네릭타입을 만든 과정을 소개해보고자 합니다. 제네릭 타입을 사용하여 다양한 내비게이션 관련 속성과 타입을 정의하는 방법에 대해 알아보겠습니다. 제네릭 타입은 TypeScript에서 매우 유용한 기능으로, 타입 안정성을 유지하면서 여러 유형의 값을 다룰 수 있습니다. 이를 활용하여 내비게이션 관련 코드를 더 유연하고 재사용 가능하게 만들 수 있습니다. 기존 사용법 기존에는 어떻게 사용하고 있었을까요? import React from 'react'; import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs'; import { CompositeNavi..

안녕하세요. 오늘은 Node.js를 활용한 SVG 파일 자동 모듈화 방법에 대해서 작성해 보고자 합니다. Background 회사 내부에는 개발에 사용하는 tokript라는 스크립트가 있습니다. 해당 스크립트는 commit 규칙뿐만 아니라 Api, Image, svg, page 등을 생성해 주는 아주 간편하고 유용한 스크립트입니다. 문제는 React-native에서 svg파일의 아이콘을 사용할 때 선언하는 방식이 tokript의 아이콘을 생성하는 방식과는 달라서 tokript에서 gen:icon을 사용할 수 없었습니다. 수정 요청을 할까하다가 직접 만들고 싶은 호기심에 작성해 보게 되었습니다. 폴더 안의 폴더가 있어 재귀함수를 적용시켜 탐색하였습니다. 1. 원하는 모듈의 형태와 추출할 경로 들어가기 앞서..

안녕하세요 이번에는 React-date-picker을 타입스크립트 + SCSS로 완전히 새로운 UI를 구현해본 경험을 소개하고자 합니다. 거의 전체를 SCSS와 조합하여 스타일링을 새로 한 것으로 모든 영역에서 커스텀하는 것이 필요한 분들께 도움이 많이 될 것이라고 확신합니다. ** 구체적인 스타일링은 삭제하였습니다. 궁금하신게 있다면 댓글 달아주세요 :) 좌측은 React date picker에서 제공하는 기본 UI이고 우측은 제공하는 기능들을 통해 직접 커스텀한 date picker입니다. 라이브러리에서 제공하는 Demo 사이트를 통해서 필요한 옵션들을 끌어와 사용하였습니다. React-date-picker 라이브러리에서는 커스텀을 위한 여러 props를 제공합니다. 제공해주는 Props에 맞게 컴포..