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

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

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

 

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

 

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

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

fastcampus.co.kr

https://fastcampus.info/4n8ztzq

 

 

이제는 습관이 되어버려 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

 

18일차 공부 시작!

 

오늘 공부 시작 시간 (07.18 16:55)

 

오늘의 강의 주제는 '함수의 규격 작성하기'이다.

학습 인증샷 - 1

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

 

오늘의 학습 내용

 

- 함수의 규격 작성하기 -


* REST Client 익스텐션 활용하기


REST Client 익스텐션을 활용하면 API 호출 결과를 브라우저 개발자 도구 대신 IDE 환경에서 바로 확인할 수 있다. 이 덕분에 별도의 화면 전환 없이 JSON 형태의 응답도 에디터에서 손쉽게 살펴볼 수 있다. 다양한 API를 빠르게 실험하거나 결과를 쉽게 검증하려

면 REST Client 같은 도구가 반드시 필요하다. 실무에서 반복되는 API 테스트와 검증 과정을 훨씬 생산적으로 만들어준다.

 

* 타입스크립트의 타입 인터섹션 이해하기


타입스크립트에서는 인터섹션 타입, 즉 '&' 기호를 사용하는 타입 alias 문법을 제공한다. 인터섹션 타입을 사용하면 여러 타입의 성질을 한 번에 조합해서 새로운 타입을 만들 수 있다. 이를 통해 반복적으로 선언해야 했던 중복 코드를 한 번에 줄일 수 있다. 예를 들어 두 개 이상의 인터페이스나 타입을 합쳐 확장성이 좋고, 유지 보수가 용이한 코드를 작성할 수 있다. 특히 복잡한 데이터 구조를 다룰 때 타입 간의 결합이 자연스러워진다.


* 제네릭의 핵심과 활용 방법


제네릭은 타입스크립트에서 난이도가 높은 기능에 속한다. 하지만 그만큼 유연성과 재사용성을 크게 높여주는 특징이 있다. 제네릭을 사용하면 함수나 클래스에 다양한 타입을 적용할 수 있으므, 코드의 일반화와 타입 안정성을 동시에 챙길 수 있다. 예를 들어 데이터 요청 함수에서 반환값의 타입을 호출하는 순간에 지정하도록 설계할 수 있다.

제네릭은 입력이 여러 유형일 때, 출력 역시 그에 따라 다른 타입이 될 수 있음을 의미한다. 이를 통해 API 데이터 처리에서 반복적인 타입 선언을 줄이고 실제 사용 상황에 따라 동적으로 타입을 지정할 수 있다. 함수 선언부에서 제네릭 T를 받고 함수가 결과값을 이 T로 반환하게 하면 동일한 로직을 다양한 데이터 구조에 적용할 수 있다.

실전에서 제네릭을 적용하면 타입 안전성을 잃지 않으면서도 다양한 데이터 구조를 하나의 함수에 대응시킬 수 있다. 특히 API 요청과 데이터 변환 작업을 진행할 때, 매번 새로운 함수를 만들지 않고도 다양한 상황에 대응하는 코드를 작성할 수 있다는 점에서 큰 장점이 있다. 제네릭을 처음 접하면 진입 장벽이 높지만, 활용법에 익숙해지면 복잡한 코드를 단순화시켜준다.


* 설계와 타입 시스템


함수의 규격을 명확히 설계하고 타입을 엄밀하게 정의하는 습관은 개발자의 생산성에 큰 영향을 미친다. 명확하게 정의된 함수 시그니처와 타입 시스템은 코드의 오류를 사전에 예방하고 디버깅 과정에서도 큰 도움이 된다. IDE의 자동완성 기능을 적극 활용하면 복잡한 타입 선언에서도 생산성을 높일 수 있다. 또한 코드의 문서화에도 효과적으로 작용한다.

추가적으로, 제네릭을 사용할 때 타입 변수의 제한을 두는 방법도 있다. 예를 들면 extends 키워드를 활용해 특정 속성을 가진 타입만 허용하거나, API 요청에 쓰이는 파라미터 타입을 유연하게 제한할 수 있다. 이런 제한을 두면 코드의 안정성과 예측가능성이 더욱 향상된다.


20강 수강 완료

 

오늘 공부 종료 시간 (07.18 17:13)

 

20강 강의 내용 정리 필기
학습 인증샷 - 2

마치며

 

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

 

이번 강의에서는 타입스크립트의 인터섹션 활용과 제네릭에 대한 내용과 REST Client extension에 관한 내용이 나왔다. 실제로 활용도가 높은 요소들만 알려주셔서 좋았다.

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

패스트캠퍼스 환급챌린지 20일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기  (0) 2025.07.20
패스트캠퍼스 환급챌린지 19일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기  (1) 2025.07.19
패스트캠퍼스 환급챌린지 17일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기  (0) 2025.07.17
패스트캠퍼스 환급챌린지 16일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기  (2) 2025.07.16
패스트캠퍼스 환급챌린지 15일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기  (0) 2025.07.15
'패스트캠퍼스/김민태의 프론트엔드 아카데미: 제1강' 카테고리의 다른 글
  • 패스트캠퍼스 환급챌린지 20일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기
  • 패스트캠퍼스 환급챌린지 19일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기
  • 패스트캠퍼스 환급챌린지 17일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기
  • 패스트캠퍼스 환급챌린지 16일차: '김민태의 프론트엔드 아카데미 - 제 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
패스트캠퍼스 환급챌린지 18일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기
상단으로

티스토리툴바