한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이정환 Winterlood
개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!
초급
JavaScript, React, Node.js
BEST
한 입 크기로 잘라먹는 타입스크립트(TypeScript)
문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻♀️로 만들어드립니다.
초급자를 위해 준비한
[프로그래밍 언어, 웹 개발] 강의입니다.
이런 걸 배울 수 있어요
타입스크립트
타입스크립트의 필요성과 특징
타입 시스템에 대한 깊은 이해
타입을 집합으로 이해하기
리액트와 함께 타입스크립트 사용하기
이미지를 클릭하면 로드맵으로 이동하실 수 있습니다.
> 로드맵 링크 : https://link.onebitefe.com/r/5cdagw
시리즈 강의 링크
> 한 입 크기로 잘라먹는 리액트 :https://inf.run/v3XAj
> 한 입 크기로 잘라먹는 타입스크립트 : https://inf.run/FpLm4
> 한 입 크기로 잘라먹는 넥스트 : https://inf.run/v3XAj
혼자 완강하기 어려울 것 같다면
한입 완강 챌린지로 오세요
강의만 구매하시면 바로 참가 가능합니다!
> 신청 하기 : https://link.onebitefe.com/r/ecwq90
> 신청 기간 : ~06.21(토) 자정까지
프론트엔드의 피할 수 없는 대세 타입스크립트,
이제는 제대로 정복할 때가 왔습니다! 😎
인프콘 2023 "타입스크립트는 왜 그럴까?" 발표자의 강의입니다.
🧐 배워도 배워도 헷갈리는
타입스크립트, 이제 제대로 배워봐요
이제는 피할 수 없는 대세가 되어버린 '타입스크립트(Typescript)'!
원리를 제대로 이해하지 못한 채 문법만 대충 배웠다면
타입스크립트가 제공하는 강력한 기능들을 제대로 이용하기 어렵습니다.
여러분은 타입스크립트를 정말 잘 이해하고 계시나요?
아래 질문에 충분히 대답할 수 있는지 확인해 보세요.
- 타입스크립트에서 말하는 '타입'이란 무엇인가요?
- 서로 다른 타입 간의 호환성은 어떤 기준으로 결정되나요?
- 기본적으로 제공되는 타입들(any, unknown, never 등)의 동작 원리를 자세히 설명할 수 있나요?
이 강의는 단순한 타입스크립트의 문법만 나열해 놓은 강의가 아닙니다.
문법을 포함해 타입스크립트가 왜 그렇게 동작하는지 그리고 어떻게 설계되었는지
아주 쉽고 재미있게 알아봅니다.
강의가 끝나고 나면 이제 여러분은 타입스크립트 마법사가 되어 있을 거예요. 🧙🏻♀️
아래 그림과 같은 강의와 함께 보실 수 있는 핸드북도 제공됩니다!
어렵고 복잡한 개념도
쉽고 재미있게 살펴볼 거예요
타입스크립트는 수학의 '집합론'을 기반으로 동작하는 언어이기 때문에
말과 글로만은 원리를 확실히 이해하기 어려울 수 있어요.
그래서 다양한 시각 자료와 사례들을 준비했어요.
아무리 어렵고 복잡한 개념이더라도 쉽고 재미있게 살펴볼 거예요.
 |  |
이런 분들께 추천해요 🙆♀️
자바스크립트 학습을 마치고 타입스크립트를 처음 배우려고 하는 분
타입스크립트를 배워봤지만 아직 헷갈리는 점이 많은 분
정확한 타입스크립트의 개념과 동작 원리를 이해하고 싶으신 분
리액트(React)와 타입스크립트를 함께 사용해 보고 싶으신 분
강의 특징 ✨
🎨
언제나 어디서나
시각 자료에 진심인 편
깔끔하고, 예쁘고, 멋진 시각 자료로 학습하면 집중도 더 잘 되고 기억에도 더 오래 남을 거라고 믿어요.
모두 직접 만든 이미지들이라 캡처해서 학습 블로그 포스팅에 이용하셔도 됩니다. 😃
 |  |
 |  |
🖌️
태블릿 판서와 함께
시각적으로 학습
더 쉽고 빠르게 이해하는 데에는 역시 시각적인 자료가 최고죠? 그래서 이 강의 촬영을 위해 판서용 태블릿을 구매했어요. 판서와 함께 타입스크립트 제대로 파헤쳐 봅니다.
🗄️
실습 코드는 섹션별로
깔끔하게 정리
애써 작성한 실습 코드들을 아무렇게나 보관하면 아쉽죠? 언제든 다시 돌아볼 수 있도록 코드를 섹션별로 잘 나누어 보관할 수 있도록 신경 썼어요.
📗
언제나 복습할 수 있는
무료 강의 교안
복습을 위해 강의를 처음부터 듣는 수고를 덜기 위해 무료 강의 교안을 제공합니다.
🌏
강의 이후에도 함께!
수강생 전용 커뮤니티
학습에는 끝이 없습니다.
이 강의가 끝나더라도 수강생 전용 커뮤니티에 모여
서로 지식과 다양한 소식을 공유하며 성장해요 🌱
[0 섹션 2 챕터 : 수강생 커뮤니티 참여하기]에서
수강생 전용 오픈채팅방 링크와 비밀번호를 확인하세요
학습 내용 📚
 |  |
 |  |
📌 SECTION 1. 타입스크립트 개론
기술을 잘 이해하려면 그것이 어떤 배경에서 탄생했는지 알 필요가 있습니다. 따라서 1 섹션에서는 타입스크립트의 탄생 배경을 살펴보며 타입스크립트가 해결하고자 했던 문제가 무엇이고, 어떤 특징을 가지는지 자세히 살펴봅니다.
 |  |
 |  |
📌 SECTION 2~3. 타입스크립트 기초 다지기
가장 기본적인 타입스크립트의 문법을 살펴봅니다. 동시에 타입스크립트가 말하는 타입이란 정확히 무엇인지, 그리고 타입들이 서로 어떤 관계를 맺고 어떻게 동작하는지 살펴봅니다.
📌 SECTION 4~6. 타입스크립트 문법 살펴보기
함수 타입 정의, 함수 오버로딩, 인터페이스, 클래스 등 타입스크립트의 다양한 기능과 문법을 살펴봅니다.
📌 SECTION 7~9. 마법사처럼 타입을 조작하기
타입스크립트의 가장 독특하면서도 강력한 기능인 타입 조작 기능에 대해 살펴봅니다. 제네릭, 인덱스드 엑세스 타입, 맵드 타입, Keyof 연산자, 조건부 타입 등 아주 다양한 타입스크립트의 타입 조작 문법을 살펴봅니다.
📌 SECTION 10. 유틸리티 타입 이용하기
타입스크립트가 기본적으로 제공하는 여러 가지 유틸리티 타입들에 대해 살펴봅니다. 또 살펴본 유틸리티 타입을 지금까지 배운 지식을 이용해 직접 구현해 봅니다.
📌 SECTION 11. (Bonus +) 리액트에서 타입스크립트 사용하기
이대로 끝나면 아쉽죠? 그래서 보너스 섹션으로 준비했습니다. 아주 간단한 투두 리스트를 함께 만들어 보며 리액트 프로젝트에 타입스크립트를 적용하는 방법에 대해 살펴봅니다.
예상 질문 Q&A 💬
Q. 자바스크립트를 알긴 아는데 잘 모릅니다. 들어도 될까요?
네. 아예 모르는 수준이 아니라면 들으셔도 됩니다. 중간중간 자바스크립트 사전 지식이 필요할 때마다 강의 노트에 제가 직접 제작한 자바스크립트 학습 자료를 넣어 두었습니다. 또 문법이 어렵다면 수강생 커뮤니티에 질문하셔서 도움을 받을 수도 있습니다.
Q. Node.js 백엔드 개발자입니다. 프론트엔드 개발자는 아닌데 들어도 될까요?
네. 마지막 보너스 섹션(리액트 + 타입스크립트)을 제외하고는 모두 들으실 수 있습니다.
Q. 강의 PPT나 화면을 캡쳐해서 블로그에 올려도 되나요?
네! 자유롭게 사용하셔도 됩니다. 판매만 하지 말아주세요. 🥲 추가로 한가지 부탁드리자면 제 강의 링크를 출처로 달아주시면 감사하겠습니다.
수강 전 참고 사항 📢
선수 지식
- 자바스크립트 ES6 버전 이상(화살표 함수 등)을 사용해 본 경험이 있어야 합니다.
- 보너스 섹션을 들으시기 위해서는 이전 강의(한입 크기로 잘라먹는 리액트) 정도의 리액트 사전 지식이 필요합니다.
유의 사항
- 모든 실습 코드를 직접 따라 작성하시면서 학습하시는 걸 권장합니다.
- 강의에서 배운 내용을 개인 블로그에 따로 정리하시는 걸 강력히 권장합니다.
- 질문이 있다면 망설이지 말고 질문 게시판이나 수강생 커뮤니티에 올려주시면 됩니다.
지식공유자 소개 ✒️
무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 교육자이다. 출시 1년 만에 인프런, 유데미에서 약 5,000명의 수강생을 배출한 ‘한입 크기로 잘라 먹는 리액트’ 강의를 만들었다. 개발자를 희망하는 이들을 돕기 위해 개발자 지식 공유 사이트 DEVSTU를 만들어 약 2년간 운영하고 있다. 2022년부터는 리액트를 공부하는 사람들을 위한 오픈 채팅방도 개설해 운영한다. 또한 주니어 개발자를 위한 서비스 스타트업 CTO로 2년간 근무했다.
이력 사항
- 인프콘 2023 연사 - "타입스크립트는 왜 그럴까?"
- 한 입 크기로 잘라먹는 도서 출간(인사이트)
- 2022 인프런 어워즈 수상(널리 알렸상)
- 한 입 크기로 잘라먹는 리액트 강의 출간
- 전) 22Hours CTO | FrontEnd Developer
- 대학생 개발자 지식 공유 커뮤니티 DEVSTU 개발 및 운영
포트폴리오/개인 영상
이런 분들께
추천드려요!
학습 대상은
누구일까요?
타입스크립트를 처음 시작하시는 분
타입스크립트를 배워봤지만 자신은 없는 분
타입스크립트의 원리를 이해하고 사용하고 싶으신 분
프론트엔드 개발자
Node.js 백엔드 개발자
선수 지식,
필요할까요?
자바스크립트(ES6)
보너스 섹션을 들으시려면 React.js
28,617
명
수강생
1,368
개
수강평
1,271
개
답변
4.9
점
강의 평점
5
개
강의
웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
강의) 한 입 크기로 잘라먹는 Next.js
강의) 한 입 크기로 잘라먹는 타입스크립트
강의) 한 입 크기로 잘라먹는 리액트
커리큘럼
전체
64개 ∙ (10시간 31분)
해당 강의에서 제공:
수업자료
1. 강의 소개
07:53
2. 개발 환경 준비하기
02:44
4. 타입스크립트를 소개합니다
08:13
6. 타입스크립트의 동작 원리
05:47
7. Hello TS World!
09:34
11. 기본타입
06:31
12. 원시타입과 리터럴타입
10:32
13. 배열과 튜플
11:38
14. 객체
09:05
15. 타입 별칭과 인덱스 시그니처
12:26
16. Enum 타입
09:07
17. Any와 Unknown 타입
06:59
18. Void와 Never 타입
06:47
강의 게시일:
마지막 업데이트일:
수강평
전체
315개
5.0
315개의 수강평
wjdgksak수강평 13
∙
평균 평점 4.9
- eko09
수강평 13
∙
평균 평점 3.1
- 이지수
수강평 21
∙
평균 평점 5.0
- todong
수강평 2
∙
평균 평점 4.5
- 냠냠이
수강평 1
∙
평균 평점 5.0
5
81% 수강 후 작성리액트 강의에 이어서 수강하게 되었는데 진짜 대박입니다 👍👍👍 1. 새로운 개념마다 다양한 예제를 만들어서 같이 설명해주심 2. 질문을 빠른 시간 내에 이해하기 쉽게 답해주심 3. 같이 제공되는 핸드북으로 빠르게 훑거나 복습하기 좋음 - 특히 강의에 나왔던 예시 다시보기 👍 4. 정말 한입 크기로 잘라먹을수있게 작게 잘라두셔서 부담없이 짧게 한 두개씩 보기 좋아요! 5. 정확한 딕션으로, 빠르지않은 속도로 알려주십니다! 복습할때는 배속해서 들었는데 딕션이 좋아서 아무 문제 없었어요! 6. 정말 잘 구성된 정석의 기초 강의라고 생각합니다! 저는 미루고 미루다가 강사님이 진행하신 챌린지에 참여해서 완강했는데 들으시는 분들 꼭 챌린지도 같이 참가하세요!
![[코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스강의 썸네일](https://cdn.inflearn.com/public/courses/330970/cover/3c24c2b8-9dc1-44ed-af4e-2b58542a6504/330970-eng.png?f=avif&w=420)
![[초중급] 아바타 커뮤니티앱 만들기 (React Native Expo)강의 썸네일](https://cdn.inflearn.com/public/courses/335092/cover/3c31366b-ae2e-4a3f-8d55-d5eda3b0ffcb/335092.png?f=avif&w=420)
![[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core강의 썸네일](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
![[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스강의 썸네일](https://cdn.inflearn.com/public/files/courses/332860/cover/01jnwb77yxra1hp8cm9hed0wnd?f=avif&w=420)
