채널톡 아이콘

AI와 함께 배우는 TypeScript — 기초 문법부터 풀스택 앱 배포까지

AI가 코드를 대신 써 주는 시대지만, 그 코드를 읽지 못하면 고칠 수도 믿을 수도 없습니다. 이 강의는 문법을 외우며 손으로 타이핑하는 대신, Claude Code·Codex·Gemini 같은 AI 코딩 도구가 만든 코드를 읽고, 실행하고, 타입으로 검증하는 방법으로 TypeScript를 익힙니다. 기초 문법부터 DOM 조작, Express 백엔드, 할 일 목록 앱 완성과 Render 배포까지, AI에게 정확히 지시하고 결과를 검토하는 실전 흐름을 한 번에 경험합니다.

1명 이 수강하고 있어요.

난이도 초급

수강기한 무제한

실습 중심
실습 중심
AI 코딩
AI 코딩
백엔드이해하기
백엔드이해하기
처음하는배포
처음하는배포
실습 중심
실습 중심
AI 코딩
AI 코딩
백엔드이해하기
백엔드이해하기
처음하는배포
처음하는배포

수강 후 이런걸 얻을 수 있어요

  • AI가 생성한 TypeScript 코드를 한 줄씩 읽고, 타입 오류와 잘못된 동작을 스스로 찾아내는 능력

  • 타입, 함수, 객체, 배열, 클래스, 제네릭, 고급 타입까지 실무에 쓰는 TypeScript 문법 전반

  • Vite와 DOM 조작으로 만드는 브라우저 화면, Express·Zod로 만드는 REST API 서버

  • 컨텍스트 파일(AGENTS.md)과 단계별 계획(PLAN.md)으로 AI에게 정확히 지시하고 결과를 검토하는 작업 방식

  • 화면과 서버를 갖춘 할 일 목록 풀스택 앱을 완성해 Render에 배포한 결과물

AI가 짠 코드, 읽을 줄 아시나요?

AI 코딩 도구는 몇 초 만에 코드를 만들어 줍니다. 하지만 그 코드를 읽지 못하면 오류가 나도 고칠 수 없고, 맞게 동작하는지 판단할 수도 없습니다.

이 강의는 TypeScript 문법을 손으로 타이핑하며 외우는 대신, AI에게 코드를 요청하고 → 읽고 → 실행하고 → 질문하고 고치는 방식으로 배웁니다. TypeScript의 타입 시스템은 AI가 만든 코드의 실수를 실행 전에 걸러 주는 가장 확실한 안전장치입니다. 그래서 AI와 함께 코딩하는 시대에 가장 먼저 배워야 할 언어입니다.

기초 문법에서 시작해 브라우저 화면(DOM, Vite), 백엔드 API(Express, Zod)를 거쳐, 마지막에는 직접 만든 풀스택 할 일 목록 앱을 인터넷에 배포합니다. 최신 TypeScript 7 기준이며, Claude Code, Codex, Gemini Code Assist 중 어떤 도구로도 따라 할 수 있습니다.

강의를 듣고 나면 이런 결과물을 만들 수 있어요

예제 이미지 제목 (1)

예제에 대한 간단한 설명을 적어보세요.

예제 이미지 제목 (2)

예제에 대한 간단한 설명을 적어보세요.

예제 이미지 제목 (3)

예제에 대한 간단한 설명을 적어보세요.

예제 이미지 제목 (4)

예제에 대한 간단한 설명을 적어보세요.

  • AI가 만든 TypeScript 코드를 한 줄씩 읽고, 타입 오류와 잘못된 동작을 스스로 찾아낼 수 있습니다.


  • 컨텍스트 파일(AGENTS.md)과 단계별 계획(PLAN.md)으로 AI에게 정확히 지시하고, 결과를 검토하는 작업 방식을 익힙니다.

  • 브라우저 화면부터 서버, 배포까지 웹 애플리케이션이 동작하는 전체 흐름을 이해합니다.

학습 내용

섹션 (1) TypeScript 기초: 타입 · 제어문 · 함수

변수와 데이터 타입, 유니언 타입, 조건문과 반복문, 스코프를 배우고, 함수의 타입 표기, 타입 별칭, 타입 좁히기를 익힙니다. 섹션마다 AI 코딩 도구로 복습 퀴즈를 풀고, 실전 응용 문제(할인 가격 계산기)를 해결합니다.

섹션 (2) 객체 · 배열 · 객체 지향 · 고급 타입

구조 분해, 옵셔널 체이닝, 배열 메서드(map, filter, reduce), 클래스와 인터페이스, 제네릭, Map과 Set을 배웁니다. 이어서 keyof, 매핑 타입, 유틸리티 타입(Partial, Pick, Record), satisfies까지 실무 코드에서 자주 만나는 고급 타입을 읽는 법을 익힙니다.

섹션 (3) 브라우저와 서버: DOM · Vite · Express

Vite 개발 서버에서 DOM을 조작하고, 이벤트와 클라이언트 사이드 렌더링, ES 모듈을 배웁니다. 이어서 Express 5로 REST API를 만들고, Zod로 요청을 검증하며, 미들웨어와 라우터로 서버 코드를 정리합니다.

섹션 (4) 실전 프로젝트와 배포

async/await와 fetch로 화면과 서버를 연결합니다. 요구사항과 설계를 바탕으로 AI에게 계획을 받아 검토한 뒤, 할 일 목록 앱을 다섯 단계로 구현합니다. 마지막으로 Render 무료 플랜에 배포해 완성된 앱을 인터넷에 공개합니다.

수강 전 참고 사항

실습 환경

  • 운영 체제: Windows, macOS, Linux 모두 가능 (강의 화면은 Windows)

  • 사용 도구:

    • Node.js 22.18 이상 (LTS 권장)

    • Visual Studio Code

    • AI 코딩 도구 1개: Claude Code, Codex, Gemini Code Assist 중 선택. 각 도구의 요금제는 공식 페이지에서 확인해 주세요.

    • 배포 실습: GitHub 계정, Render 무료 계정 (신용카드 불필요)

  • PC 사양: VS Code와 브라우저가 원활히 동작하는 일반 PC면 충분합니다.

학습 자료

  • 강의 슬라이드(PDF)

  • 실습 코드 GitHub 저장소 2개: 섹션 1~9용(Infran_TypeScript), 섹션 10~11용(Infran_TypeScript_Express)

  • 섹션별 복습 퀴즈: AI 코딩 도구 채팅 창에서 "섹션 2 퀴즈 내줘"로 실행

  • 실전 응용 문제 7개와 할 일 목록 프로젝트 요구사항(REQUIREMENTS.md), 화면 배치 그림

선수 지식 및 유의사항

  • HTML과 CSS 기초 지식이 필요합니다. JavaScript와 TypeScript 경험은 없어도 됩니다.

  • AI가 생성하는 코드는 실행할 때마다 조금씩 다를 수 있습니다. 강의 화면의 코드는 예시이며, 이름·규칙·완료 조건으로 확인하는 방법을 함께 안내합니다.

  • 질문은 강의 질문 게시판에 남겨 주세요. (답변 주기와 업데이트 정책은 강사님 기준으로 채워 주세요)

  • 강의 영상과 자료의 무단 배포·재판매를 금지합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • AI 코딩 도구로 코드는 만들었지만, 무슨 뜻인지 몰라 고치지도 믿지도 못하는 입문자

  • JavaScript는 써 봤지만, 타입 오류만 보면 막혀서 TypeScript로 넘어가지 못하는 개발자

  • 문법 강의를 들어도, 화면과 서버를 갖춘 앱 하나를 끝까지 완성해 본 적이 없는 분

  • HTML·CSS는 알지만, 백엔드와 배포가 막막해 풀스택 경험을 쌓지 못한 프론트엔드 지망생

  • AI가 짠 코드를 검토하지 못해, 팀에 그대로 올리기가 불안한 주니어 개발자

선수 지식,
필요할까요?

  • HTML과 CSS의 기초 지식이 필요합니다. 화면 구조와 스타일을 읽을 수 있는 정도면 충분합니다.

  • 수업에서는 AI 코딩 도구를 사용합니다. Claude Code, Codex, Gemini Code Assist 중 하나를 준비해 주세요.

안녕하세요
YoungJea Oh입니다.

커리어인증

5,789

명

수강생

502

개

수강평

162

개

답변

4.8

점

강의 평점

23

개

강의

30년 이상 IT 현장 경험을 바탕으로 인공지능·파이썬 분야를 가르치는 AI 전문 강사입니다. 딥러닝, NLP, LLM 파인튜닝, LangChain/LangGraph 기반 AI 에이전트, AI 기반 개발(AIDD) 등 실무 중심 커리큘럼을 개발하고 강의합니다. 현대건설 전산실, 삼성SDS, 한국씨티은행에서 쌓은 30년 이상의 개발·운영 경험을 현장감 있는 강의로 풀어냅니다. 현재 KOSA, KOSTA, KITRI 등에서 인공지능 과정을 진행하고 있습니다.

홈페이지 주소: https://ironmanciti.github.io/

더보기

커리큘럼

전체

134개 ∙ (13시간 32분)

해당 강의에서 제공:

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

수강평

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

YoungJea Oh님의 다른 강의

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

비슷한 강의

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

얼리버드 할인 중

₩44,000

20%

₩55,000

평생교육이용권 지원 강의