개발 · 프로그래밍 프로그래밍 언어

실전 연습으로 익히는 고급 타입스크립트 기술 대시보드

(5) 18개의 수강평 ∙ 185명의 수강생

애프터캠프

TypeScript

38,500원

지식공유자: 애프터캠프

총 165개 수업 (2시간 57분)

수강기한:

수료증: 발급

난이도: --

지식공유자 답변이 제공되는 강의입니다

폴더에 추가 76

중급자를 위해 준비한
[웹 개발] 강의입니다.

타입스크립트의 기능들을 제대로 활용해보세요!

✍️
이런 걸
배워요!

기존 타입을 변형해서 새로운 타입을 만들어 내는 방법

template literals

object indexing

discriminated union type

utility types

generics

advanced pattern in typescript

책에서 알려주지 않는 TS 실전 테크닉!

실전 연습으로 익히는 고급 타입스크립트 기술 ✅

타입스크립트에서 interface, type만 사용해 온 당신 👊

타입 변형으로 재사용 가능한 타입을 만들어보세요!

Case #1
두번째 makeUrl 함수 호출에서 타입 에러가 발생할 수 있도록 Path를 작성할 수 있으신가요?

Case #2
Routes 타입에서 DynamicRoutes를 만들 수 있으신가요?

모르시겠다면... 👉👈
타입스크립트로 다양한 것을 할 수 있다는 걸 알려드릴게요!

🤔 채용공고 [우대 사항]에 Utility type 사용 여부를 물어보는데 사용해본 적이 없으신가요?

👍 채용 담당자도 사용해보지 않은 Utility type들을 알려드릴게요!

🤔 타입스크립트는 interface, type이 전부인 걸로 알고 계셨나요?

😆 그것들이 전부가 아니라는 걸 보여드릴게요!

🤔 중복되는 타입들을 한 곳에서 관리해서 재사용성을 높이고 싶으신가요?

✌️ 재사용 가능한 타입 만드는 법을 알려드립니다

강의 특징 ✨

강의에 나온 문제들을 Stackblitz에서 풀어볼 수 있습니다.
개념을 끝까지 이해시킬 수 있도록 다양한 응용 문제들을 제공합니다.
시중에 나와있는 책들에서 배울 수 없는 테크닉들입니다.
코딩하다 배운 내용들을 빠르게 참조할 수 있는 나무위키 비슷한 사이트를 제공합니다. (링크)

여러분의 성공적인 완강을 응원합니다! 🎉

각 챕터의 끝에 주어지는 연습문제를 풀고 커피 쿠폰을 받을 수 있는 행운을 누려보세요!

이 강의를 만든 애프터캠프는

부트캠프 수료한 분들을 위한 커뮤니티를 운영하고 있습니다.
단순 개발자 공급만 늘리는 정책에 반대하며, 양질의 후학들을 양성하고자 하는 꿈을 갖고 있습니다.

Q&A 💬

Q. 강의 난이도는 어느 정도인가요?

중급 이상 강의입니다. 타입스크립트를 어느 정도 사용한 분들을 위한 강의이고, 재사용 가능한 타입 만드는 것을 배우고 싶은 분들을 위한 강의입니다.

Q. 다른 강의들과 다른 점은 무엇인가요?

강의 문제들을 직접 풀어볼 수 있는 환경을 제공하고 모르는 부분은 제공하는 문서를 통해 빠르게 리마인드 할 수 있습니다.

애프터캠프의 다른 강의가 궁금하다면?

🎓
학습 대상은
누구일까요?

타입스크립트를 실무에서 활용해보신 분

그동안 type, interface만 사용해오시던 분

귀찮은 타입 작성 시간을 줄이고 싶으신 분

📚
선수 지식,
필요할까요?

타입스크립트

고등학교 1학년 집합론

## 이력서, 포폴 첨삭 등 강의 외 문의사항이 있으시면 이곳으로 문의 주세요

👉 morishjs@gmail.com

강사 깃헙: https://github.com/morishjs

지식저장소: https://wiki.after-camp.com/Home

🎨 포트폴리오: https://morish.dev

📜 이력: https://shorturl.at/gKU68

부트캠프 수료했는데 앞으로 뭘 공부해야 할지 막막하시죠?

👊 부트캠프에서는 취업률 90%라고 하는데... 전 취업이 잘 안돼요! 😢

👊 취업은 했는데 사수가 없어서 너무 불안해요! 🤑

👊 작성한 코드가 동작은 하는데 이렇게 작성하는지 모르겠어요! 🤯

애프터캠프에서는 다음이 가능합니다!

👌 CTO 2번 경험, 다수의 프로젝트를 경험한 풀스택 개발자가 직접 코칭합니다.

👌 코드 리뷰, 커리어 방향성 고민을 같이 해드립니다.

👌 애프터캠프에는 한국, 미국 실리콘밸리 예비 개발자, 현직자가 모인 곳입니다.

이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. 이 강의를 위한 가장 기초적인 지식 1 강 ∙ 3분

Type space, Value space 미리보기 03:27

섹션 1. 함수 타입 변형 2 강 ∙ 5분

함수 리턴 타입, 파라미터, Awaited의 활용 03:54

함수 리턴 타입, 파라미터, Awaited의 활용 - 해답 01:16

섹션 2. Union, Discriminated Union 타입 변형 5 강 ∙ 6분

Union 소개 04:29

Extract 문제 풀어보기

Type utility의 활용 - Extract 00:59

Exclude 문제 풀어보기

Type utility의 활용 - Exclude 01:27

섹션 3. Object indexing 14 강 ∙ 9분

Object indexing의 기초 미리보기 02:06

Discriminated object의 indexing 문제

Discriminated object의 indexing 01:02

enum을 대체하는 as const의 활용 - 문제

enum을 대체하는 as const의 활용 02:18

as const indexing - 문제

as const indexing 01:14

Object value들의 타입을 Union으로 변형 - 문제

Object value들의 타입을 Union으로 변형 01:29

Array indexing - 문제

Array indexing 01:49

연습문제 풀고 행운 테스트 하기 🍀

연습문제 답

🌴 쉬어가는 곳

섹션 4. Template literals 11 강 ∙ 7분

Template literals 기초 미리보기 01:23

Template literals와 extract - 문제

Template literals와 extract 01:39

Combination (조합) - 문제

Combination (조합) 01:37

패턴을 갖고 있는 Object를 손쉽게 만들기 - 문제

패턴을 갖고 있는 Object를 손쉽게 만들기 02:21

Type utility (Uppercase) - 문제

Type utility (Uppercase) 00:49

연습문제 풀고 행운 테스트 하기 🍀

연습문제 답

섹션 5. Object 타입 변형 16 강 ∙ 14분

Union 을 Object로 변형 - 문제

Union 을 Object로 변형 미리보기 01:33

Object value의 타입 변형 - 문제

Object value의 타입 변형 01:53

Object key의 타입 변형 - 문제

Object key의 타입 변형 01:11

Object union type을 object로 타입 변형 - 문제

Object union type을 object로 타입 변형 02:58

Object를 Tuple로 변형 - 문제

Object를 Tuple로 변형 02:23

Object key, value를 string union으로 변형 - 문제

Object key, value를 string union으로 변형 01:17

Object union을 string union 으로 변형 - 문제

Object union을 string union 으로 변형 03:24

연습문제 풀고 행운 테스트 하기 🍀

연습문제 답

섹션 6. 제네릭 기본 23 강 ∙ 16분

제네릭 소개 미리보기 02:32

제네릭 기초 문제 풀어보기

제네릭 기초 01:05

제네릭 타입 제한 문제 풀어보기

제네릭 타입 제한 01:19

다수의 타입인자 문제 풀어보기

다수의 타입인자 01:36

다수의 타입인자-2 문제 풀어보기

다수의 타입인자-2 01:14

기본 타입 인자 문제 풀어보기

기본 타입 인자 00:46

제네릭 클래스 문제 풀어보기

제네릭 클래스 01:16

타입스페이스에서의 rest parameter 문제 풀어보기

타입스페이스에서의 rest parameter 01:48

타입스페이스에서의 empty object 문제 풀어보기 미리보기

타입스페이스에서의 empty object 00:56

NonEmptyArray 타입 만들기 문제 풀어보기

NonEmptyArray 타입 만들기 01:28

Reduce 타입 파라미터 문제 풀어보기

Reduce 타입 파라미터 00:57

Fetch 함수 타입 문제 풀어보기

Fetch 함수 타입 01:04

섹션 7. Conditional Types 16 강 ∙ 14분

타입스페이스에서의 조건 타입 소개 00:51

조건 타입에서 never 문제 풀기

조건 타입에서 never 01:37

조건 타입으로 Object 키 새로 만들기 - 문제풀기

조건 타입으로 Object 키 새로 만들기 02:31

엄청 유용한 Infer 소개 01:58

generics 에서의 infer 사용 - 문제 풀기

generics 에서의 infer 사용 01:33

template literals와 infer - 문제 풀기

template literals와 infer 01:02

Next.js 에서의 InferPropsFromServerSideFunction 타입 만들어보기 - 문제 풀기

Next.js 에서의 InferPropsFromServerSideFunction 타입 만들어보기 02:06

복잡한 조건 타입 - 문제 풀기

복잡한 조건 타입 02:31

연습문제 풀고 행운 테스트 하기 🍀

연습문제 답

섹션 8. Type Arguments 9 강 ∙ 9분

복잡한 Argument 타입 해부해보기 01:45

Object Argument의 Key 타입 추론하기 - 문제 풀기

Object Argument의 Key 타입 추론하기 02:08

함수형 언어 Result 타입을 타입스크립트에서 만들어보기 - 문제 풀기

함수형 언어 Result 타입을 타입스크립트에서 만들어보기 02:47

Type argument 타입 제한 - 문제 풀기

Type argument 타입 제한 01:45

Argument로 넘어온 Array의 타입 - 문제 풀기

Argument로 넘어온 Array의 타입 01:06

섹션 9. 고급 제네릭 10 강 ∙ 9분

제네릭과 타입 제한 - 문제 풀기

제네릭과 타입 제한 미리보기 02:33

Curry - 문제 풀기

Curry 01:33

Cache - 문제 풀기

Cache 02:28

Object key - 문제 풀기

Object key 02:49

연습문제 풀고 행운 테스트 하기 🍀

연습문제 답

섹션 10. 함수 오버로딩 11 강 ∙ 9분

소개 미리보기 01:58

함수 오버로딩과 Conditional type - 문제 풀기

함수 오버로딩과 Conditional type 00:56

Authorization 기능 - 문제 풀기

Authorization 기능 02:13

함수 오버로딩과 제네릭 - 문제 풀기

함수 오버로딩과 제네릭 00:43

함수 오버로딩과 optional type parameter - 문제 풀기

함수 오버로딩과 optional type parameter 01:55

함수 오버로딩과 default type parameter - 문제 풀기

함수 오버로딩과 default type parameter 02:10

섹션 11. Brand 타입 9 강 ∙ 12분

Brand 타입 소개 미리보기 03:39

Brand 타입 실사용 예제 - 문제 풀기

Brand 타입 실사용 예제 02:48

백엔드 개발자들이 좋아할만한 Brand 타입의 활용 - 문제 풀기

백엔드 개발자들이 좋아할만한 Brand 타입의 활용 01:52

버그를 줄이는 Brand 타입 활용법 (Happy path 원천 차단) - 문제 풀기

버그를 줄이는 Brand 타입 활용법 (Happy path 원천 차단) 02:06

Brand 타입을 활용한 Object 접근법 - 문제 풀기

Brand 타입을 활용한 Object 접근법 01:37

섹션 12. Global 타입 9 강 ∙ 7분

globalThis 소개 미리보기 01:42

브라우저의 window 타입과 global 타입 - 문제 풀기

브라우저의 window 타입과 global 타입 01:19

NodeJS에서의 global 타입 지정 - 문제 풀기

NodeJS에서의 global 타입 지정 01:25

Global에서 사용 가능한 타입 정의 - 문제 풀기

Global에서 사용 가능한 타입 정의 01:54

Global 타입 Merge - 문제 풀기

Global 타입 Merge 01:38

섹션 13. Type predicate 소개 13 강 ∙ 11분

Filter 함수 타입 제대로 지정하기 - 문제 풀기

Filter 함수 타입 제대로 지정하기 01:54

type assert 소개 - 문제 풀기

type assert 소개 03:57

type assert 버그(?) 00:42

제네릭과 type predicate - 문제 풀기

제네릭과 type predicate 03:12

Type predicate 을 이용한 Type guard 테크닉 - 문제 풀기

Type predicate 을 이용한 Type guard 테크닉 01:01

Type assert 을 이용한 Type guard 테크닉 - 문제 풀기

Type assert 을 이용한 Type guard 테크닉 01:05

연습문제 풀고 행운 테스트 하기 🍀

연습문제 답

섹션 14. Class type predicate 3 강 ∙ 5분

Class type predicate 소개 02:05

클래스에서의 type assert 01:10

Builder pattern 02:36

섹션 15. 외부 라이브러리 타입 지정하기 4 강 ∙ 3분

lodash group by 타입 지정하기 - 문제 풀기

lodash group by 타입 지정하기 02:04

잘못 지정된 라이브러리의 타입을 수정하기 - 문제 풀기

잘못 지정된 라이브러리의 타입을 수정하기 01:47

섹션 16. 타입스크립트의 한계를 넘는 identity function 7 강 ∙ 8분

<const T> 소개 01:37

제네릭 const 활용법 - 문제 풀기

제네릭 const 활용법 01:23

identity function을 활용해서 object key 타입 추론하기 - 문제 풀기

identity function을 활용해서 object key 타입 추론하기 02:26

identity function를 활용해서 object 내 다른 Key의 값 타입 추론하기 - 문제 풀기

identity function를 활용해서 object 내 다른 Key의 값 타입 추론하기 03:17

섹션 17. Typescript 4.9 이후에 추가된 기능들 2 강 ∙ 20분

satisfies 08:50

데코레이터 11:22

강의 게시일 : 2023년 08월 03일 (마지막 업데이트일 : 2023년 11월 15일)

수강생분들이 직접 작성하신 수강평입니다.

18개의 수강평

5점

4점

3점

2점

1점

VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

재밌고 유익합니다 실무에서 잘써먹을수있을것같아요

2024-03-23

지식공유자 애프터캠프

수강해주셔서 감사합니다.

2024-03-25 0

타입스크립트를 공부하면서 자바와는 다르게 타입을 자유자재로 다루어 확장성있게 사용할 수 있다고 느꼈는데, 실제로 그렇게 사용하려니 너무 어렵더라구요. 본 강의는 타입스크립트를 더욱 효율적으로 사용하는 방법을 알려주는 강의이며, 중간중간에 있는 문제 링크들도 잘 구성이 되어있다고 느껴집니다. 실무에서 타입스크립트를 사용해보신 분들이 본 강의를 통해 더욱 많은 걸 얻어가실 수 있을 듯 합니다.

2023-08-30

현업에서조차 유틸리티 함수를 활용해서 타입을 선언하고 관리하는 경험을 가지기 힘들었는데 이 강의를 통해 경험할 수 있어서 좋았습니다. 문제와 해설 형식도 강의 흥미를 높이는데 도움이 됐어요. 내용이 꽉꽉 차있어서 복습을 꼭 해야 될 것 같습니다. 중간에 커피 쿠폰 이벤트도 재밌었습니다. 조금 아쉬운 점은 시작부터 본게임으로 들어가서 기반지식, 유틸리티 함수를 알지 못하고 들어가는게 아쉬웠습니다. 문제 푸는 재미가 있었는데 모르고 있던 기반지식이 필요했을 때 시간을 많이 소모하게 되더라구요. 이런 기반 지식을 가볍게 소개하고 시작하면 더 좋을 것 같아요.

2023-10-24

지식공유자 애프터캠프

강의에 대한 솔직한 리뷰를 남겨주셔서 진심으로 감사드립니다. 피드백을 통해 어떤 부분에서 만족하셨고 어떤 부분에서 개선이 필요한지 알 수 있어 매우 도움이 됩니다. 먼저, 유틸리티 함수와 타입 선언 관련하여 현업에서의 경험을 쌓는 데 도움을 주었다는 점에 대해 기쁘게 생각합니다. 아쉬운 점에 대해서도 말씀해주셔서 감사합니다. 기반 지식에 대한 가벼운 소개가 필요하다는 점은 앞으로의 강의나 커리큘럼 제작 시에 큰 참고가 될 것입니다. 특히, 기반 지식 없이 문제를 풀 때 발생하는 불편함과 시간 소모를 최소화하려는 노력을 더 기울이겠습니다.

2023-10-26 0

신선한 방식으로 타입스크립트를 가르쳐주셔서 감사합니다. 기본 개념들을 익혀서 실전에서 적용하고자 할 때 항상 interface, type alias 정도 밖에 사용하지 못했는데, 다양한 유틸리티 타입들을 적용할 수 있도록 여러 문제들을 제공해주시고 풀어보게 해주셔서 너무 재밌게 공부할 수 있었습니다.

2023-11-05

지식공유자 애프터캠프

친절한 리뷰 감사합니다! 종민님께서 이제 다양한 유틸리티 타입들을 실제 시나리오에 적용할 수 있게 되어 매우 기쁩니다.

2023-11-06 0

실제적으로 사용되는 타입스크립트 코드와 이론이 적용되는 강좌를 찾는 중, 수강하게 됐습니다. 현업에서 혹은 기본코드로 타입스크립트를 사용하지 않지만, 수강 하면서 어떻게 TS를 적용해야하는지, 감을 익히게 됐고, TS에 자신감이 생겼습니다. 요즘 TS가 대중화되고 있는 시기라, TS 이론에 대한 강의는 차고 넘치지만, 이것처럼, 케이스별 에러 처리나 실제 문법을 적용해 다루는 내용은 찾기 어려웠습니다. 몇몇 단점도 있었지만, 그보다 상회하는 장점으로 큰 도움 되었습니다. TS의 기본 이론을 수강하신 분이라면, 여러 케이스별 어떻게 TS가 적용되고, 실제 코드가 궁금 하신 분, 이론 뚝딱 알려주고 끝나는 강좌에 뭔가 마음 찜찜하신 분, 이 강좌 진심 강추 드립니다. 무엇보다 매번 강의 관련 코드 문의에 진심으로 답변 감사드립니다! 그 동안 여기에서 수강했던 TS강좌 들 중에서 가장 감동받고 감사하고 있습니다! 정말, 여기 페이지 메인에서, TS는 이 강좌구나 라고 많은 분들이 알아주셨음하네요,

2023-11-08

지식공유자 애프터캠프

이렇게 상세한 리뷰를 남겨주시다니 감사합니다. 질문게시판에 열심히 질문 올리신 것이 기억이 남는데요. 제 강의 내용이 도움이 되셨다니 기쁩니다. 제가 여유가 생기면 Node.js, React 관련해서 타입 활용법 강의도 업데이트 할 예정이니 기대해주세요!

2023-11-09 1

실전 연습으로 익히는 고급 타입스크립트 기술 대시보드

중급자를 위해 준비한 [웹 개발] 강의입니다.

실전 연습으로 익히는 고급 타입스크립트 기술 ✅

타입스크립트에서 interface, type만 사용해 온 당신 👊

강의 특징 ✨

여러분의 성공적인 완강을 응원합니다! 🎉

이 강의를 만든 애프터캠프는

Q&A 💬

애프터캠프의 다른 강의가 궁금하다면?

이런 분들께 추천드려요!

중급자를 위해 준비한
[웹 개발] 강의입니다.