[LoL info App] 0314 트러블슈팅

25.01.01 Today I Learned💡

1. 인덱스 시그니처 VS Record<key, value>

2. 정규표현식

---

인덱스 시그니처 VS Record<key, value>

 

• 인덱스 시그니처
  • 아이템의 동적 숫자들을 key로 사용하기 위해 동적 타입을 따로 지정
  • Item의 value에 접근할 때 key가 인식이 되지 않아 곤란한 상황

export type Item = {
  name: string;
  plaintext: string;
  image: { full: string };
  gold: { total: number };
  stats: { FlatMovementSpeedMod: number };
};

// 동적 key (1001, 1002...)
export type ItemResponse = {
  data: { [key: string]: Item };
};


// 아래와 같이 작동함
export type Item = {
  data: {
    [key: string]: {
      name: string;
      plaintext: string;
      image: { full: string };
      gold: { total: number };
      stats: { FlatMovementSpeedMod: number };
    };
  };
};

 

• Record<key, value>
  • key 를 문자열 리터럴로 인식
  • 객체 key값에 접근할 때 data. name에 바로 접근 가능
    참고 문서

export type ItemResponse = Record<string, Item>;

export type Item = {
  name: string;
  plaintext: string;
  image: { full: string };
  gold: { total: number };
  stats: { FlatMovementSpeedMod: number };
};

 

 

 

정규표현식

 

• 아이템 목록 중 이름과 설명에 태그 및 @ 포함됨
• 정규표현식 .replace를 페이지에서 직접 적용
  
  • .replace(/<[^>]+>|@\w+@/g, "")
    
    

👇🏻

// Card.tsx

...
<h2 className="title text-[25px]">
              {name.replace(/<[^>]+>|@\w+@/g, "")}
            </h2>
            <p className="text-emerald-50">
              {title.replace(/<[^>]+>|@\w+@/g, "")}
            </p>
            ...