카카오테크캠퍼스 2기 | STEP2 | 20일차(24-07-19) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 20일차(24-07-19) 회고

📝 type, interface

• 타입스크립트를 사용하면서 type과 interface 둘 다 객체의 형태를 정의하는 데 사용된다는 것을 알게 되었다. 그러나 왜 두 가지 방식이 모두 필요한지에 대해 명확하게 이해하기 어려웠다. 인터넷에서 type과 interface의 차이에 대해 찾아보았지만, 명확한 답을 얻기 쉽지 않았다. 어떤 글에서는 둘의 차이가 거의 없다고 하고, 어떤 글에서는 특정 상황에서만 interface를 사용해야 한다고 주장했다. 공식 문서를 읽어봐도 그 내용이 쉽게 다가오지 않았다.
• ThemeData, RankingFilterOption, ProductOptionData와 같은 데이터 구조를 정의하면서 type과 interface 중 어떤 것을 사용할지 고민했다. 다음은 내가 정리한 기준이다.

---

type

• 유니온 타입(|)을 활용하여 특정 값들만 허용하는 제한적인 타입을 정의할 때 유용했다. 예를 들어, RankingFilterOption의 targetType과 rankType과 같이 특정 값만을 허용하는 경우 사용했다.

type TargetType = 'user' | 'product';
type RankType = 'daily' | 'weekly' | 'monthly';

type RankingFilterOption = {
  targetType: TargetType;
  rankType: RankType;
};

• 복잡한 중첩 구조를 표현할 때도 type을 사용했다.

type NestedOption = {
  key: string;
  value: string;
  options?: NestedOption[]; // 하위 옵션이 있을 수도 있고 없을 수도 있음
};

type ProductOptionData = {
  options: NestedOption[];
};

---

interface

• 단순한 객체 형태를 정의할 때 더 직관적이고 가독성이 좋았다. 예를 들어, ProductOption과 같이 단순한 객체 형태를 정의할 때 사용했다.

interface ProductOption {
  key: string;
  value: string;
  level: number;
}

• GoodsData를 확장하여 새로운 속성을 추가하는 경우에도 interface의 선언적 확장 기능이 유용했다.

interface GoodsData {
  id: string;
  name: string;
  price: number;
}

interface ProductDetailData extends GoodsData {
  isAccessibleProductPage: boolean;
  // ...(기타 속성들)
}

 

📝 Daily Scrum

• 과제 제출 및 4주차 회고

 

😋 Today 회고

• 주로 type을 사용했다. 하지만 interface를 사용하는 것도 쉬웠다. 그럼에도 여전히 type이 익숙하다. 앞으로도 상황에 맞게 type과 interface를 적절히 사용해야겠다.

 

➡️ 참고 링크

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#interfaces

Documentation - Everyday Types