Inflearn brand logo image
Inflearn brand logo image
개발 · 프로그래밍

/

프론트엔드

프로젝트로 쉽게 배우는 TypeScript 기초

타입스크립트의 핵심 개념을 기초부터 실습까지 한 번에! 프로젝트를 통해 실무 활용까지

26명 이 수강하고 있어요.

JavaScriptTypeScriptTailwindCSSviteAI Agent

이런 걸 배울 수 있어요

  • TypeScript 기초: 기본/특수 타입, 배열, 인터페이스, 함수 타입 등

  • TypeScript 고급 기능: 유니언 타입, Enum, 제네릭 등

  • 프로젝트 실습: 일기장 앱 제작으로 배운 내용 실무 적용

  • AI Code 도구 활용으로 개발 생산성 늘리기

ts wide banner

실습과 함께 배우는 타입스크립트 첫걸음!

  • 타입스크립트의 핵심 개념과 문법을 쉽게 이해할 수 있으며, 이를 바탕으로 간단한 프로젝트를 만들어 보면서 실무 감각을 쌓을 수 있습니다.

  • AI 코드 어시스턴트를 활용하여 생산성 있는 개발 경험을 습득할 수 있습니다.

  • 타입스크립트의 핵심 개념 완전 정복


  • 나만의 작은 프로젝트를 타입스크립트로 구현

  • 이제 JS에서 TS로의 전환, 두렵지 않다!

학습 내용

1

TypeScript와 개발 환경 소개

TypeScript의 개념과 필요성을 소개하고, Vite를 이용한 개발 환경 설정, 그리고 학습 효율을 높이기 위한 VS Code 및 AI 도구 설정 방법을 함께 다룹니다.

TypeScript 기초 개념 학습

기초 파트에서는 string, number, boolean 같은 기본 타입부터 특수 타입까지 하나씩 정리합니다.
또한 배열과 객체 타입, 함수의 매개변수 및 반환 타입, 그리고 interface를 활용한 구조적인 코드 작성 방법도 익힙니다.

2
3

TypeScript 고급 기능 이해

union 타입과 literal 타입으로 다양한 값들을 표현하고, enum을 이용해 의미 있는 상수를 정의하는 방법도 배웁니다. 특히 제네릭(Generic)을 통해 다양한 상황에서 재사용 가능한 함수를 만드는 실전 스킬을 익히게 됩니다.

실전 프로젝트 – 일기장 앱 제작

학습한 내용을 바탕으로 일기장 앱 프로젝트를 직접 만들어 보며 실무 감각을 키웁니다. 일기 입력, 출력, 삭제와 같은 기능을 직접 구현하고, 타입을 명확히 지정하며 코드의 안정성을 확보하는 실습이 포함됩니다.

4

수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): Windows, macOS, Linux 등 모든 OS가 가능합니다.

  • 사용 도구: Visual Studio Code, 깃허브 계정

  • PC 사양: 인터넷 접속이 가능한 기본 사양의 PC

학습 자료

  • 제공하는 학습 자료 형식: 깃허브 링크 공유, 텍스트, 소스 코드 등

  • 분량 및 용량: 각 섹션별로 학습 자료 제공

선수 지식 및 유의사항

  • HTML, CSS, JavaScript 기초


  • 본 강의의 저작권은 저작자에게 있으며, 무단 배포 및 복제를 금지합니다. 학습 자료 역시 저작권이 있으며, 개인적인 학습 목적 외 사용을 금합니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • TypeScript로 스킬 업그레이드 원하는 분

  • 안정적이고 협업 가능한 코드 작성을 원하는 웹 디자이너 & 퍼블리셔

  • 실습 위주로 효율적 입문 원하는 분

  • 이론보다 프로젝트 중심의 강의를 찾는 분

  • HTML/CSS/JavaScript 기초는 알고 있지만, TypeScript는 처음인 디자이너 및 초보 개발자

선수 지식,
필요할까요?

  • HTML, CSS, JavaScript 기초

안녕하세요
입니다.

190

명

수강생

17

개

수강평

17

개

답변

4.9

점

강의 평점

5

개

강의

스타트업에서 멀티미디어 콘텐츠 크리에이터로 입문하여 한 분야에만 머물지 않고 게임과 웹, 멀티미디어 분야에서 기획과 개발을 주도하며 현업에서 다양한 상용 작품을 런칭했습니다. 대학에서 디지털 미디어와 영상학을 전공했으며 주요 교육기관에서 웹 디자인과 프론트엔드 개발 및 미디어 교육(10년 이상) 등을 진행하면서 튜토리얼도 제작하고 있습니다.

- 저서 -

자바스크립트 프로젝트북(한빛미디어,2017)

커리큘럼

전체

27개 ∙ (2시간 27분)

해당 강의에서 제공:

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

Michael Kwon님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

Figma 디자인부터 퍼블리싱까지강의 썸네일

Figma 디자인부터 퍼블리싱까지

Michael Kwon

디자이너와 개발자를 위한 올인원 강좌! 새로운 UI3 반영

초급

초급

Figma, HTML/CSS

Vue3와 Supabase로 구인구직 사이트 만들기강의 썸네일

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

나만의 풀스택 애플리케이션 개발에서 프로그래시브 웹앱(PWA)까지!

초급

초급

Vue.js, supabase, Vue 3

프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)강의 썸네일

프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)

Michael Kwon

체계적인 단계의 프로젝트 실습과 배포, 빌트인 store 활용, SvelteKit와 Supabase로 풀스택 애플리케이션까지 한방에!

초급

초급

Svelte, sveltekit, supabase

바닐라 자바스크립트 & Tailwind CSS강의 썸네일

바닐라 자바스크립트 & Tailwind CSS

Michael Kwon

AI 활용과 컴포넌트 중심 UI 제작으로 배우는 실무형 웹 UI 개발, 디자이너+개발자 필수 코스!

초급

초급

JavaScript, vanilla-javascript, frontend

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)강의 썸네일

React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

장기효(캡틴판교)

실무에서 많이 사용되는 React와 Vue의 코드를 작성하면서 타입스크립트 필수 개념을 익히는 강의입니다. React와 Vue에 타입을 입히는 방법, ChatGPT 사용법까지 모두 잡는 실무자와 입문자 모두를 위한 강의!

초급

초급

React, TypeScript, Vue.js

얄코의 반응형 프로그래밍 - 자바스크립트로 쉽게 배우는 ReactiveX강의 썸네일

얄코의 반응형 프로그래밍 - 자바스크립트로 쉽게 배우는 ReactiveX

얄팍한 코딩사전

⚡ 짧고 굵은 전체 160분 강좌! 웹사이트에서 웹사이트로 코드를 복붙하며, ReactiveX를 통한 반응형 프로그래밍을 익히세요 😎

초급

초급

RxJS, JavaScript, 함수형 프로그래밍

Cursor AI로 만들면서 배우는 Web & Javascript강의 썸네일

Cursor AI로 만들면서 배우는 Web & Javascript

주말코딩

나만의 기술을 가지고 싶으신 분, 웹 개발을 차근차근 배워보고 싶으신 분에게 추천드립니다. 웹 브라우저와 언어의 역사부터 가르쳐드립니다.

입문

입문

HTML/CSS, JavaScript, LLM

자바스크립트 : 기초부터 실전까지 올인원강의 썸네일

자바스크립트 : 기초부터 실전까지 올인원

코딩알려주는누나

자바스크립트 기초강의, 응용강의, 포트폴리오 전용강의 따로따로 찾아 볼게 아니라, 강의하나로 자바스크립트 기초부터 현업이 쓰는 다양한 응용 기술, 포트폴리오 까지 다 끝내고 싶으신 분들을 위한 강의입니다.

초급

초급

JavaScript, HTML/CSS

핵심만 골라 배우는 TypeScript강의 썸네일

핵심만 골라 배우는 TypeScript

수코딩

프론트엔드 입문자들은 필수적으로 익혀야하는 TypeScript 문법! 기초부터 시작해서 고급에 이르기까지 TypeScript 언어를 샅샅히 파헤쳐봅니다!

입문

입문

TypeScript

Node.js로 웹 크롤링하기강의 썸네일

Node.js로 웹 크롤링하기

제로초(조현영)

네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

중급이상

중급이상

JavaScript, Node.js, 웹 크롤링

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

초급

초급

JavaScript, HTML/CSS, 객체지향

코어 자바스크립트강의 썸네일

코어 자바스크립트

정재남

ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다.

초급

초급

JavaScript

클린업 JavaScript: 베이스 빌드업!강의 썸네일

클린업 JavaScript: 베이스 빌드업!

김영보

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

초급

초급

JavaScript, 면접, 기술면접

Node.js에 TypeScript 적용하기(feat. NodeBird)강의 썸네일

Node.js에 TypeScript 적용하기(feat. NodeBird)

제로초(조현영)

Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

중급이상

중급이상

Node.js, 웹앱, TypeScript

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

초급

인터랙티브 웹, JavaScript, HTML/CSS

모바일, 태블릿, pc 반응형 인스타그램 클론코딩강의 썸네일

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

초급

초급

HTML/CSS, JavaScript, 클론코딩

Tailwind CSS 실전 포트폴리오 퍼블리싱강의 썸네일

Tailwind CSS 실전 포트폴리오 퍼블리싱

코딩웍스(Coding Works)

[Tailwind CSS 실전 포트폴리오 퍼블리싱]은 Tailwind CSS를 활용해 26가지 이상의 다양한 실전 예제 제작하는 과정입니다. 실전 예제를 빠르게 다양하게 제작하면 그 속에서 필수적인 이론을 설명합니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

초급

초급

TailwindCSS, HTML/CSS

자바스크립트로 배우는 자료구조 & 알고리즘 (개념+문제풀이)강의 썸네일

자바스크립트로 배우는 자료구조 & 알고리즘 (개념+문제풀이)

Kyo

자바스크립트로 스택, 큐, 연결 리스트, 정렬, DFS/BFS 등 핵심 자료구조와 알고리즘을 직접 구현하며 학습합니다. 자주 출제되는 문제 유형을 함께 풀이하며, 코딩 테스트와 면접에 꼭 필요한 문제 해결 능력까지 키울 수 있습니다.

초급

초급

JavaScript, 알고리즘, data-structure

React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

초급

초급

React, React Native, 하이브리드 앱

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)강의 썸네일

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

입문

입문

nextjs, ChatGPT, React

자바스크립트 머신러닝 TensorFlow.js강의 썸네일

자바스크립트 머신러닝 TensorFlow.js

김영보

자바스크립트 환경에서 머신러닝 개념을 다룹니다. 자바스크립트와 TensorFlow.js로 머신러닝을 구현하는 형태와 코드를 다룹니다.

중급이상

중급이상

Tensorflow, JavaScript, 머신러닝

입문강의 타입스크립트부터 ionic6 (앵귤러 기반)강의 썸네일

입문강의 타입스크립트부터 ionic6 (앵귤러 기반)

깊알못nodeep

쉽게 안드로이드 앱, 윈도우 앱, ios 앱을 만들어보고 배포하는 방법까지 알고 싶은 분들에게 추천드립니다. 자바스크립트와 앵귤러보다는 타입스크립트의 기초부터 알려드립니다!

입문

입문

TypeScript, IONIC, 하이브리드 앱

[풀스택 입문] Firebase보다 10배 좋은 Supabase강의 썸네일

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

초급

초급

PostgreSQL, Next.js, TailwindCSS

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)강의 썸네일

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

로펀

풀스택 개발에 날개를 달아줄 Supabase! 3가지의 클론 프로젝트를 통해 Next.js 14와 Supabase로 실무 수준의 풀스택 개발을 하는 법을 속성으로 배우게 됩니다.

초급

초급

Next.js, supabase, TailwindCSS