본문 바로가기

typescript6

(TypeScript) 조금 더 우아하게 Union Literal Types 체크 방법 👋 개요 현직장에서 프로젝트가 바쁘다는 핑계로 미루어 두었던 포스팅을 해보려고 합니다. (벌써 1년이나;;) 현재 개발 중인 FE 서비스는 NextJS와 TypeScript를 기반으로 개발 중 입니다. TypeScript에서는 특정 상수를 타입으로 정의 하는 방법이 몇가지 있고 그 중 다른 언어들과 같이 열거형(ENUM)을 지원해 주지만 저는 Literal Types Union을 사용하는 것을 선호합니다. (그 이유에 관한 글 첨부합니다. TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.) 🤨 Literal Types을 Union하여 사용하는 경우 type UserStatus = 'NORMAL' | 'WITHDRAW' | 'UNKNOWN'; // 일.. 2022. 7. 26.
Recoil SelectorFamily의 파라미터 사용 중 인덱스 시그니처 오류 발생 (with TypeScript) 🥲 문제 발생 코드 interface ListParam { page?: number; pageSize?: number; orderBy?: "DESC" | "ASC"; sortBy?: string; total?: boolean; } type Param = ListParam; export const listQuery = selectorFamily({ key: "listQuery", get: (param) => async () => { const { data } = await getList(param); return data; }, }); Data는 API 요청 후 반환되는 데이터 타입입니다. Param은 Recoil의 파라미터에 들어갈 타입 입니다. getList 함수는 api를 호출하는 함수 입니다. 🤨 .. 2021. 6. 9.
Recoil로 파라미터가 포함된 비동기 데이터 쿼리호출 (with TypeScript) 개요 Recoil로 비동기 데이터 쿼리를 호출 할 때 파라미터 유무에 따른 예제를 공유합니다. 전체적으로 코드에서 import 는 제외 하였습니다 🎃 파라미터가 필요 없는 경우 recoil의 selector를 이용해서 아래와 같이 비동기 데이터 쿼리를 호출 할 수 있습니다. 💁🏼‍♂️ 코드 예제 interface Data { data1: string; data2: number; data3: boolean; } type Response = AxiosResponse; const getData = (): Promise => axios.get('example.com/data'); const asyncDataQuery = selector({ key: 'asyncDataQuery', get: async () => .. 2021. 6. 2.
Recoil의 설치 및 기본 개념 🥸 Recoil은 왜 개발 했을까? 호환성 & 단순함 측면을 봤을때는 다른 상태 관리 라이브러리 보다 React 자체에서 제공해주는 상태 관리 기능을 사용하는 것이 좋습니다. (useState 라던지…) 하지만 React도 한계가 있습니다. (미친듯이 거대한 상태 트리라던가… 미친 랜더링을 야기할 수 있다… 무서웡…) 그럼 어떤 장점이 있을까? Native하다! (동시성 모드 같은 새로운 React 기능들과 호환 가능!… 내가 동시성 모드를 잘모른다는건 함정;;) 사용하는데 간편하다 (hooks 사용자라면 더더욱!) ⚙️ 설치/세팅 방법 1. 설치 잘쓰는게 어렵지! 설치 방법은 쉽다! 🥲 당연히 프로젝트 Root 디렉토리로 이동한 후 아래 명령어를 실행해준다 Recoil은 계속 개발 중입니다! night.. 2021. 5. 25.
[TypeScript] React outSideClick Custom Hooks 컴포넌트 밖을 클릭 했을때 callback 함수를 호출하도록 하는 custom hooks import React, { useEffect } from 'react' export function useOutSideClick( ref: React.MutableRefObject, // generic으로 바꿀 예정 handlerCallback: (event?: CustomEvent) => void, ): void { useEffect(() => { // 커스텀 이벤트 선언 const listener = (event: CustomEvent) => { // reference가 없거나 // 클릭한 element가 reference 하위에 속한 element라면 // 함수 종료 if (!ref.current || ref.. 2020. 12. 10.
[TypeScript] 재귀적인 타입 선언 (recursive type) 아래와 같은 재귀적인 데이터 구조를 원했다. const data = [ { label: '기본', value: 'basic' }, { label: '시간', sub: [ { label: '월별', value: 'month' }, { label: '주별', value: 'week' }, { label: '일별', value: 'day' }, ], }, { label: '지역', sub: [ { label: '시별', value: 'si' }, { label: '군/구별', value: 'gun-go' }, { label: '동별', value: 'dong' }, ], }, { label: '유형', value: 'kind' }, ] 이러한 재귀적인 구조에는 아래와 같이 type을 선언해주면 된다. type.. 2020. 12. 10.

티스토리툴바