패스트캠퍼스 환급챌린지 19일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

2025. 7. 19. 23:39·패스트캠퍼스/김민태의 프론트엔드 아카데미: 제1강

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

 

패스트캠퍼스 환급챌린지란?

 

(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스

초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!

fastcampus.co.kr

https://fastcampus.info/4n8ztzq

 

언제나 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

 

19일차 공부 시작!

오늘 공부 시작 시간 (07.19 23:16)

 

오늘의 강의 주제는 '타입과 인터페이스'이다.

학습 인증샷 - 1

 

(오늘도 마찬가지로 모자이크 처리..)

 

오늘의 학습 내용

* 타입과 인터페이스의 차이와 활용


이번 강의에서는 타입스크립트에서 타입을 정의하는 다양한 방법 특히 타입 알리아스(type alias)와 인터페이스(interface)의 차이점과 용도에 대해 다뤘다. 타입 시스템은 코드의 안전성과 가독성을 확보하는 데 중요한 역할을 하며 이를 위해 타입스크립트는 다양한 방식의 타입 정의 문법을 제공한다. 이러한 개념들을 정확히 이해하고 상황에 맞게 적용하는 것이 중요하다.


* 타입 정의의 두 가지 방식


타입스크립트에서는 타입을 정의하는 주요한 방식으로 타입 알리아스와 인터페이스를 제공한다. 타입 알리아스는 type 키워드를 사용해 생성하고, 인터페이스는 interface 키워드로 정의한다. 아래 예시처럼 구조는 거의 같아 보이지만, 문법과 사용 목적에서 차이가 존재한다.

type Score = {
  currentPage: number;
  feeds: NewsFeed[];
};

interface Store {
  currentPage: number;
  feeds: NewsFeed[];
}

 


* 일관성의 중요성


현업에서는 개발자마다 타입 정의 방식에 대한 선호가 다를 수 있다. 어떤 사람은 타입 알리아스만을 사용하고, 어떤 사람은 인터페이스만 이용해 코드를 작성하기도 한다. 물론 단순한 구조에서는 두 방식 모두 동일한 결과를 낼 수 있다. 그러나 다양한 문법이 혼용되기 시작하면 코드의 통일성이 떨어지고, 협업 중 가독성 저하로 이어질 수 있다. 따라서 팀 내에서 어떤 방식으로 타입을 정의할지 정해두고 일관성을 지키는 것이 중요하다.


* 확장 가능한 타입 정의


두 방식 모두 타입 확장이 가능하지만, 방식에 차이가 있다. 타입 알리아스는 인터섹션 타입(&)을 사용하여 확장하고, 인터페이스는 extends 키워드를 사용한다. 구조적으로는 비슷하지만 semantics 측면에서 인터페이스의 extends는 더 명시적이고 직관적이다. 그래서 다른 객체의 형태를 기반으로 타입을 확장할 때는 인터페이스를 사용하는 것이 더 적절한 경우가 많다.

interface Store extends Score {
  updatedAt: Date;
}

 


* 유니언 타입과 계층 구조


타입 알리아스가 인터페이스보다 우위를 가지는 점 중 하나는 유니언 타입이다. 유니언 타입을 활용하면 여러 타입 중 하나를 가질 수 있는 구조를 쉽게 표현할 수 있고, 이 기능은 인터페이스로는 구현 불가능하다.

type Status = 'success' | 'error' | 'loading';



이러한 경우에는 타입 알리아스를 사용해야 하며 복잡한 조건 타입이나 유니언 구조가 요구되는 지점에서는 인터페이스보다 유리하다.


* 불변성을 위한 readonly


인터페이스는 키워드와 지시어를 통해 타입을 더 풍부하게 표현할 수 있다. 그중에서도 readonly는 중요한 역할을 한다. 객체 내부 속성이 외부에서 수정되지 않도록 막아주기 때문에 실수를 방지할 수 있고, 더욱 안전한 코드를 작성할 수 있다.

interface Store {
  readonly currentPage: number;
  readonly feeds: NewsFeed[];
}



readonly는 불필요한 상태 변경을 방지하고 의도치 않은 Side Effect를 차단하는 데 유용하다. 특히 규모가 커질수록 이러한 불변성 확보는 코드 품질 유지에 큰 도움이 된다.

타입 알리아스와 인터페이스는 기본적으로 같은 목적을 가지지만, 사용하는 방식과 함의에 따라 적절한 선택이 필요하다. 복잡한 유니언 타입이나 확장성이 없는 단순한 구조에는 타입 알리아스, 명확한 계층 구조나 확장이 필요한 구조에는 인터페이스를 사용하는 것이 좋다. 중요한 것은 일관성이다.

21강 수강 완료

 

오늘 공부 종료 시간 (07.19 23:26)

 

21강 강의 내용 정리 필기

 

학습 인증샷 - 2

 

마치며

오늘도 환급 챌린지 21강 공부 완료!!

 

이번 강의에서는 타입과 인터페이스 그리고 일관성이라는 부분에 대한 내용을 들을 수 있었다. 타입과 인터페이스는 겉으로 보기에는 비슷하지만 실제로 어느정도 차이가 있기 때문에 별도로 한 번 정리를 하고자 한다. 그리고 '일관성' 부분은 강사님께서도 강조를 하셨지만 스스로도 계속 생각하고 개선을 해야하는 중요한 부분 중 하나라고 생각한다. 좋은 강의!!

'패스트캠퍼스 > 김민태의 프론트엔드 아카데미: 제1강' 카테고리의 다른 글

패스트캠퍼스 환급챌린지 21일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기  (2) 2025.07.21
패스트캠퍼스 환급챌린지 20일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기  (0) 2025.07.20
패스트캠퍼스 환급챌린지 18일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기  (0) 2025.07.18
패스트캠퍼스 환급챌린지 17일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기  (0) 2025.07.17
패스트캠퍼스 환급챌린지 16일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기  (2) 2025.07.16
'패스트캠퍼스/김민태의 프론트엔드 아카데미: 제1강' 카테고리의 다른 글
  • 패스트캠퍼스 환급챌린지 21일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기
  • 패스트캠퍼스 환급챌린지 20일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기
  • 패스트캠퍼스 환급챌린지 18일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기
  • 패스트캠퍼스 환급챌린지 17일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기
hangyeoldora
hangyeoldora
hangyeoldora 님의 블로그 입니다.
  • hangyeoldora
    한결의 개발로그
    hangyeoldora
  • 글쓰기 관리자
  • 전체
    오늘
    어제
    • 분류 전체보기 (65)
      • Azure (2)
      • NestJS (1)
      • Python (1)
        • 자연어 처리 (0)
        • 머신러닝 (0)
      • Java (1)
      • Javascript (1)
      • LLM (1)
        • 벡터 DB (1)
      • Electron (0)
      • Nsis (0)
      • 자격증 (0)
      • 패스트캠퍼스 (51)
        • 김민태의 프론트엔드 아카데미: 제1강 (51)
      • 혼공단 (7)
        • 혼자 공부하는 머신러닝 (7)
      • 목표 (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 최근 댓글

  • 최근 글

  • 태그

    습관형성
    환급챌린지
    혼공단
    직장인자기계발
    혼공학습단
    오공완
    패스트캠퍼스후기
    패스트캠퍼스
    혼공머신
    딥러닝
  • hELLO· Designed By정상우.v4.10.3
hangyeoldora
패스트캠퍼스 환급챌린지 19일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기
상단으로

티스토리툴바