NEW

풀스택 AI ChatBot 만들기(React 19, NestJS, LangChain.Graph v1.+)

Name: 풀스택 AI ChatBot 만들기(React 19, NestJS, LangChain.Graph v1.+)
Price: 92400 KRW

API 한 번 호출하고 끝나는 AI 토이 프로젝트는 이제 그만! 풀스택 AI 챗봇을 실제로 설계하고 배포까지 고려한 구조로 만들어 본 경험을 바탕으로, 스트리밍·Tool 호출·메모리·멀티모달·Human in the Loop까지 '서비스로 동작하는' AI 챗봇을 만드는 전 과정을 모두 알려드립니다.

3명 이 수강하고 있어요.

난이도 초급

수강기한 무제한

Kaburi

langchain

fullstack

human-in-the-loop

llm-streaming

ai-chatbot

langchain

fullstack

human-in-the-loop

llm-streaming

ai-chatbot

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

ChatGPT와 유사한 실시간 스트리밍 AI 챗봇을 처음부터 끝까지 직접 만들 수 있습니다.
LangChain/LangGraph의 Agent, Tool 호출, 병렬 처리, 메모리 관리를 실전 프로젝트에서 적용하는 능력을 갖추게 됩니다.
Human in the Loop 패턴을 구현하여 AI의 Tool 사용을 사용자가 승인/거절/수정할 수 있는 안전한 에이전트 시스템을 설계할 수 있습니다.
이미지·PDF를 처리하는 Multimodal AI 챗봇을 구현할 수 있습니다.
NestJS + Prisma + PostgreSQL로 채팅 이력을 영속적으로 저장·조회하는 백엔드 시스템을 구축할 수 있습니다.
React에서 HTTP 스트림을 파싱하여 토큰 단위 실시간 렌더링, 자동 스크롤, Markdown 렌더링 등 ChatGPT급 UX를 구현할 수 있습니다.
Zustand, TanStack Query, Shadcn UI 등 모던 React 생태계의 실전 활용법을 익힙니다.

수강 전 참고 사항

실습 환경

운영체제: Windows, macOS, Linux 모두 가능합니다.
개발 도구: Node.js (v18 이상 권장), pnpm, Docker Desktop, VS Code 필수입니다.
PC 사양: 원활한 개발 환경을 위해 8GB 이상의 RAM을 권장합니다.

선수 지식 및 유의사항

React 및 TypeScript 기본 문법 이해가 필요합니다.
NestJS 또는 Express.js 등 Node.js 기반 백엔드 프레임워크 경험이 있다면 좋습니다.
API 호출 경험이 있다면 실습에 큰 도움이 됩니다.
LangChain, LangGraph에 대한 사전 지식이 없어도 괜찮습니다.

학습 자료

강의마다 모든 소스 코드를 제공합니다.
실제 서비스 개발에 필요한 최신 라이브러리 활용법을 배웁니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

LangChain/LangGraph를 실제 서비스에 적용하고 싶은 백엔드 개발자
ChatGPT 같은 AI 챗봇 서비스를 직접 만들어보고 싶은 프론트엔드 개발자
LLM API는 써봤지만 풀스택 챗봇 프로젝트 경험이 없는 개발자
AI 에이전트의 Human in the Loop, 메모리, 스트리밍 등 고급 패턴을 학습하고 싶은 개발자
React + NestJS 기반의 실전 풀스택 프로젝트 포트폴리오를 만들고 싶은 취준생 또는 주니어 개발자
사내에서 AI 챗봇 PoC나 프로토타입을 빠르게 구축해야 하는 실무자

선수 지식,
필요할까요?

JavaScript / TypeScript 기초 — 변수, 함수, async/await, 모듈 시스템 등 기본 문법을 이해하고 있어야 합니다.
React 기초 — 컴포넌트, props, useState, useEffect 등 기본 훅 사용 경험이 있으면 좋습니다.
Node.js 기초 — npm/pnpm 패키지 설치, 터미널 사용에 익숙하면 좋습니다.
REST API 개념 — HTTP 메서드(GET, POST 등)와 요청/응답 구조를 이해하고 있으면 원활하게 따라갈 수 있습니다.
NestJS나 Express 경험 — 없어도 강의에서 초기 설정부터 다루지만, 있으면 더 수월합니다.

안녕하세요
입니다.

763

명

수강생

개

수강평

개

답변

5.0

점

강의 평점

개

강의

병.의원 소프트웨어 개발 업체 | 2015년 ~ 현재

C# 관련 강의 유튜브 운영 : 까불이코더(https://www.youtube.com/@kaburi-coder) 2022 ~

현재 사용 중인 주력 기술 스택은 다음과 같습니다.

프로그래밍 언어: C#, TypeScript, Dart, Python, VB.NET
데스크탑 애플리케이션: WinForms, WPF
모바일 앱 개발: Flutter
웹 개발: React, Next.js, Express, NestJS
Gen AI: LangChain, LangGraph
컨테이너 및 오케스트레이션: Docker, Kubernetes, Helm, ArgoCD ..
CI/CD: GitHub Actions
DataBase: MySql, Postgresql, MongoDB, SQLITE 등

2015년부터 현재까지 소프트웨어 개발 분야에서 다양한 프로젝트를 성공적으로 이끌어온 경험을 보유하고 있습니다.

기술 리더로서 팀을 이끌며 효율적인 개발 프로세스를 유지하고, 최신 기술 스택을 적극적으로 도입하여 소프트웨어의 품질과 사용자 경험을 향상시키는 데 주력하고 있습니다.

현재는 데스크톱과 웹의 통합 개발을 주도함과 동시에, 사내 직원 교육을 책임지고 있습니다.

또한 사용자 친화적인 애플리케이션 개발과 배포 자동화, DevOps 도입을 통해 프로젝트의 전반적인 성공에 기여하고 있습니다.

지속적인 자기계발을 통해 변화하는 기술 환경에 유연하게 대응하며, 높은 열정으로 새로운 도전에 임하고 있습니다.

커리큘럼

전체

85개 ∙ (7시간 30분)

해당 강의에서 제공:

수업자료

섹션 1. Intro

2개 ∙ (3분)

1. 강의 소개
03:13
2. 소스코드 제공

섹션 2. 프론트엔드 프로젝트 초기 세팅

8개 ∙ (20분)

섹션 3. 챗봇 UI 화면 만들기

4개 ∙ (29분)

11. B1. Shadcn Sidebar로 챗봇 기본 레이아웃 구성하기
09:04
12. B2. 채팅 영역(Content)과 입력창(InputGroup) 만들기
08:02
13. B3. Human, AI 메시지 컴포넌트 만들기
04:49
14. B4. 메시지 전송 이벤트 처리 및 Pending 상태 구현
07:42

섹션 4. 백엔드(NestJS) 프로젝트 초기 세팅

5개 ∙ (27분)

섹션 5. LangChain 연동 및 채팅 스트리밍

4개 ∙ (35분)

섹션 6. 프론트엔드 리팩토링

3개 ∙ (18분)

섹션 7. LangChain(v1.0) Agent — Tool 호출과 스트리밍

8개 ∙ (45분)

섹션 8. Tool 실행 과정을 UI로 보여주기

4개 ∙ (23분)

섹션 9. 멀티모달 — 이미지·PDF 처리

13개 ∙ (1시간 11분)

섹션 10. 대화 기억하기 — LangGraph 단기 메모리

3개 ∙ (20분)

섹션 11. Human in the Loop — AI의 행동을 사용자가 결정

12개 ∙ (1시간 9분)

섹션 12. 채팅방 분리 — Chat ID 별 독립 메모리

2개 ∙ (13분)

섹션 13. PostgreSQL 데이터베이스 구축

2개 ∙ (4분)

섹션 14. 채팅 데이터 영속화 — Prisma + PostgreSQL

15개 ∙ (1시간 6분)

강의 게시일:

마지막 업데이트일:

수강평

아직 충분한 평가를 받지 못한 강의입니다.

모두에게 도움이 되는 수강평의 주인공이 되어주세요!

얼리버드 할인 중

월 ₩18,480

5개월 할부 시

30%

₩132,000

₩92,400

Kaburi님의 다른 강의

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

C# 프로그래밍 기초부터 실전 활용까지

Kaburi

C#의 기초부터 활용까지 핵심만 콕 짚어 배우는 코드 위주 강의!

입문

C#, .NET

C# 프로그래밍 기초부터 실전 활용까지

Kaburi

C# WinForm 사용자 정의 컨트롤 활용. 실무 역량 키우기

Kaburi

재사용 가능한 UI 요소를 만들어 코드 중복을 줄이고 유지보수를 쉽게 하며, 필요한 동작과 디자인을 캡슐화해봐요!

중급이상

C#, winform, winforms

C# WinForm 사용자 정의 컨트롤 활용. 실무 역량 키우기

Kaburi

[C#]WinForm MVP + DI(의존성 주입) + 커스텀 단축키: 고급 개발 스킬 마스터

Kaburi

- WinForm MVP (Model-View-Presenter) 디자인 패턴의 개념과 WinForm 환경에서의 적용 - DI (Microsoft.Extensions.DependencyInjection)를 이용한 객체 간의 의존성 관리 및 결합도 낮추기 - 커스텀 단축키와 특정 기능 (Command) 연결 메커니즘 구현

중급이상

EF Core, winforms, dependency-injection

[C#]WinForm MVP + DI(의존성 주입) + 커스텀 단축키: 고급 개발 스킬 마스터

Kaburi

비슷한 강의

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

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

짐코딩

탐색 → 계획 → 구현 → 커밋. 검증된 AI 개발 워크플로우를 클로드 코드로 마스터하세요. MCP, 서브에이전트, 프롬프트 엔지니어링까지 23개 미션으로 익히고, 3개 실전 프로젝트를 완성합니다.

입문

React, claude, AI 활용 (AX)

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

짐코딩

React + SpringAI로 만드는 안전신문고 AI 신고 서비스 개발

Neo

React + SpringAI로 만드는 안전신문고 AI 신고 서비스 개발 Neo + Essential 5번째 프로젝트 강의는 정부 시스템 개선 아이디어 안전신문고 신고 시스템 구축 입니다!

입문

React, Spring Boot, 인공지능(AI)

React + SpringAI로 만드는 안전신문고 AI 신고 서비스 개발

Neo

모두를 위한 대규모 언어 모델 LLM(Large Language Model) Part 2 - 랭체인(LangChain)으로 나만의 ChatGPT 만들기

AISchool

랭체인(LangChain) 라이브러리의 개념과 활용 방법을 학습하고, 랭체인(LangChain) 라이브러리를 이용해서 나만의 ChatGPT를 만들어보는 강의입니다.

중급이상

LLM, LangChain, ChatGPT

모두를 위한 대규모 언어 모델 LLM(Large Language Model) Part 2 - 랭체인(LangChain)으로 나만의 ChatGPT 만들기

AISchool

실전 AI SaaS 풀스택 개발: 화상채팅 앱 만들기

antonio

실시간 AI 에이전트, 회의 내용 요약, 그리고 통화 후 기능이 있는 AI 기반의 화상 회의 애플리케이션을 만들어요.

초급

React, Next.js, TailwindCSS

실전 AI SaaS 풀스택 개발: 화상채팅 앱 만들기

antonio

딱 1시간! 내 컴퓨터에 심는 '나만의 AI 사수' 만들기 (Antigravity 바이브코딩) [소스코드 제공]

코드브릿지

[소스코드 제공] 코딩 몰라도 OK. 구글 최신 툴(IDX)로 설치 없이 브라우저에서 뚝딱 완성! 코딩 문법 공부는 이제 그만! AI와 대화하며(Vibe Coding) 구글 IDX 환경에서 사내 문서를 완벽히 이해하는 RAG 챗봇을 구축하고 웹으로 실시간 배포하는 초고속 실전 과정입니다.

입문

Python, 인공지능(AI), LLM

딱 1시간! 내 컴퓨터에 심는 '나만의 AI 사수' 만들기 (Antigravity 바이브코딩) [소스코드 제공]

코드브릿지

LangChain version 1.0 을 활용한 생성형 AI 서비스 구축

YoungJea Oh

이 강의는 LangChain 1.0과 LangGraph를 중심으로 생성형 AI 서비스를 설계·구현하는 전 과정을 단계별 실습으로 다룹니다. 단순한 LLM 호출을 넘어, 에이전트 기반 아키텍처, 상태(State) 관리, 메모리, 스트리밍, 미들웨어, Human-in-the-Loop까지 포함한 운영 가능한 AI 시스템 구조를 직접 구현합니다. 문서·PDF·웹 데이터 기반 RAG 시스템, SQL Agent(Chinook DB), 도구 호출 기반 Agent, Supervisor 패턴의 멀티 에이전트, 그리고 LangGraph Graph API를 활용한 상태 머신 기반 워크플로우를 실습하며, 현업에서 바로 활용 가능한 재사용 가능한 에이전트 파이프라인을 구축합니다. 또한 구조화된 출력(Pydantic 기반), 에이전트 미들웨어(Summarization, HITL, Retry, PII 보호), 토큰/단계별 스트리밍을 통해 실제 서비스에서 요구되는 안정성·확장성·제어 가능성을 갖춘 생성형 AI 애플리케이션을 완성합니다. 👉 LangChain/LangGraph의 내부 구조와 실행 흐름을 정확히 이해하고 싶은 분 👉 RAG·Agent를 “데모”가 아닌 실서비스 구조로 구현하고 싶은 분 👉 상태 기반 에이전트, SQL·문서 자동화, 멀티 에이전트 오케스트레이션까지 아우르는 현실적인 실무 로드맵이 필요한 분께 최적의 강의입니다.

초급

ChatGPT, 프롬프트엔지니어링, LangChain

LangChain version 1.0 을 활용한 생성형 AI 서비스 구축

YoungJea Oh

SpringAI + React로 만들어보는 나만의 감정일기 서비스

Neo

SpringAI + React로 만들어보는 나만의 감정일기 서비스 Neo + Essential과 함께 만들어보는 4번째 프로젝트 시간입니다!

초급

React, Kotlin, Spring Boot

SpringAI + React로 만들어보는 나만의 감정일기 서비스

Neo

토스 게임앱 AI로 만들고 수익화하기

인디박스

AI로 누구나 쉽게 게임을 만들어서 3000만명의 토스앱에 내게임을 출시해서 수익화하는 방법

입문

인공지능(AI), React, ChatGPT

토스 게임앱 AI로 만들고 수익화하기

인디박스

[PROKIT] 프론트엔드 프로젝트 키트: 타이머 앱 만들기

닙스(NYBS)

프론트엔드 프로젝트를 미션 콘텐츠입니다. DevTime이라는 타이머 앱을 직접 구현해보면서 프로젝트 실습을 해볼 수 있도록 PRD 기획 문서, Figma 시안, API 엔드포인트를 제공합니다. 실제 서비스와 유사한 수준의 프로젝트를 구현해 보면서 그동안 학습한 지식을 완벽하게 자신의 것으로 만들어 보세요 🚀

입문

React

[PROKIT] 프론트엔드 프로젝트 키트: 타이머 앱 만들기

닙스(NYBS)

AI와 함께 배우는 Next.js

캡틴판교

복잡한 Next.js의 여러 개념들을 짧은 시간에 핵심만 배울 수 있어요. Next.js를 처음 배우는 분들을 위한 실무 필수 지식만 알려드립니다. 프레임워크 강의만 8년째 진행하는 캡틴판교의 Next.js 신규 강의. "AI 시대에 프런트엔드 개발자"의 코딩과 학습 방법을 배워볼 수 있어요! :)

입문

JavaScript, React, Next.js

AI와 함께 배우는 Next.js

캡틴판교

Next Level 기획자_AI 서비스 기획의 기술

SKm&service

AI 시대, 기획자의 역량은 새롭게 재정의되고 있습니다. 기존 서비스에 AI를 접목하거나 완전히 혁신적인 새로운 서비스를 기획할 수 있는 실무 능력을 키우고자 하는 모든 기획자를 위해, 이 과정은 '실현 가능한 방법과 길'을 구체적으로 안내합니다.

입문

tensorrt, ChatGPT, LLM

Next Level 기획자_AI 서비스 기획의 기술

SKm&service

하루만에 배우는 ChatGPT API

양동준

웹사이트를 ChatGPT와 함께 만들고, 배포까지 책임지는 강의! Fine-tuning까지 배워보세요.

초급

ChatGPT, React, netlify

하루만에 배우는 ChatGPT API

양동준

하루만에 끝내는 생성형 AI 핵심 정리

dualjkorea

머신러닝, 딥러닝에서 생성형 AI까지 이르는 핵심 이론을 한번에 정리를 합니다. 그리고 쉬운 파이썬 코드로 다양한 생성형 AI 애플리케이션을 구현함으로써 AI 개발자로서 첫걸음을 뗄 수 있습니다.

입문

AI 활용 (AX), ChatGPT, LLM

하루만에 끝내는 생성형 AI 핵심 정리

dualjkorea

풀스택 AI ChatBot 만들기(React 19, NestJS, LangChain.Graph v1.+)

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

실시간 스트리밍
AI 챗봇 직접 만들기

API 호출 이상의 서비스 구현!

풀스택 AI 챗봇 만들기
서비스 수준의 AI 챗봇 구축 경험을 체득합니다.

실전 AI 챗봇
개발 경험 완성

Section 1 - 강의 소개 및 개발 환경 설정

Section 2 - 챗봇 UI 디자인 및 구현

Section 3 - 백엔드(NestJS) 프로젝트 설정

Section 4 - LangChain 연동 및 실시간 스트리밍

Section 5 - 프론트엔드 상태 관리 및 리팩토링

Section 6 - LangChain Agent와 Tool 활용

Section 7 - Tool 실행 과정 시각화 및 UX 개선

Section 8 - 멀티모달 AI 챗봇 (이미지/PDF 처리)

Section 9 - 단기 메모리 및 LangGraph 활용

Section 10 - Human in the Loop 구현

Section 11 - 채팅방 분리 및 독립 메모리 적용

Section 12 - PostgreSQL 데이터베이스 설정

Section 13 - Prisma ORM을 활용한 데이터 영속화

더 이상 단순 API 호출에 머무르지 마세요.
실제 서비스로 동작하는 풀스택 AI 챗봇 개발 역량을 갖춘 전문가로 성장하세요.

수강 전 참고 사항

이런 분들께
추천드려요

안녕하세요
입니다.

현재 사용 중인 주력 기술 스택은 다음과 같습니다.

커리큘럼

수강평

Kaburi님의 다른 강의

비슷한 강의

풀스택 AI ChatBot 만들기(React 19, NestJS, LangChain.Graph v1.+)

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

실시간 스트리밍AI 챗봇 직접 만들기

API 호출 이상의 서비스 구현!

풀스택 AI 챗봇 만들기서비스 수준의 AI 챗봇 구축 경험을 체득합니다.

실전 AI 챗봇개발 경험 완성

Section 1 - 강의 소개 및 개발 환경 설정

Section 2 - 챗봇 UI 디자인 및 구현

Section 3 - 백엔드(NestJS) 프로젝트 설정

Section 4 - LangChain 연동 및 실시간 스트리밍

Section 5 - 프론트엔드 상태 관리 및 리팩토링

Section 6 - LangChain Agent와 Tool 활용

Section 7 - Tool 실행 과정 시각화 및 UX 개선

Section 8 - 멀티모달 AI 챗봇 (이미지/PDF 처리)

Section 9 - 단기 메모리 및 LangGraph 활용

Section 10 - Human in the Loop 구현

Section 11 - 채팅방 분리 및 독립 메모리 적용

Section 12 - PostgreSQL 데이터베이스 설정

Section 13 - Prisma ORM을 활용한 데이터 영속화

더 이상 단순 API 호출에 머무르지 마세요. 실제 서비스로 동작하는 풀스택 AI 챗봇 개발 역량을 갖춘 전문가로 성장하세요.

수강 전 참고 사항

이런 분들께 추천드려요

안녕하세요 .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}입니다.

현재 사용 중인 주력 기술 스택은 다음과 같습니다.

커리큘럼

수강평

Kaburi님의 다른 강의

비슷한 강의

실시간 스트리밍
AI 챗봇 직접 만들기

풀스택 AI 챗봇 만들기
서비스 수준의 AI 챗봇 구축 경험을 체득합니다.

실전 AI 챗봇
개발 경험 완성

더 이상 단순 API 호출에 머무르지 마세요.
실제 서비스로 동작하는 풀스택 AI 챗봇 개발 역량을 갖춘 전문가로 성장하세요.

이런 분들께
추천드려요

안녕하세요
입니다.