์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

ํ’€์Šคํƒ AI ChatBot ๋งŒ๋“ค๊ธฐ(React 19, NestJS, LangChain.Graph v1.+)

API ํ•œ ๋ฒˆ ํ˜ธ์ถœํ•˜๊ณ  ๋๋‚˜๋Š” AI ํ† ์ด ํ”„๋กœ์ ํŠธ๋Š” ์ด์ œ ๊ทธ๋งŒ! ํ’€์Šคํƒ AI ์ฑ—๋ด‡์„ ์‹ค์ œ๋กœ ์„ค๊ณ„ํ•˜๊ณ  ๋ฐฐํฌ๊นŒ์ง€ ๊ณ ๋ คํ•œ ๊ตฌ์กฐ๋กœ ๋งŒ๋“ค์–ด ๋ณธ ๊ฒฝํ—˜์„ ๋ฐ”ํƒ•์œผ๋กœ, ์ŠคํŠธ๋ฆฌ๋ฐยทTool ํ˜ธ์ถœยท๋ฉ”๋ชจ๋ฆฌยท๋ฉ€ํ‹ฐ๋ชจ๋‹ฌยทHuman in the Loop๊นŒ์ง€ '์„œ๋น„์Šค๋กœ ๋™์ž‘ํ•˜๋Š”' AI ์ฑ—๋ด‡์„ ๋งŒ๋“œ๋Š” ์ „ ๊ณผ์ •์„ ๋ชจ๋‘ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.

(5.0) ์ˆ˜๊ฐ•ํ‰ 1๊ฐœ

์ˆ˜๊ฐ•์ƒ 14๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

langchain
langchain
fullstack
fullstack
human-in-the-loop
human-in-the-loop
llm-streaming
llm-streaming
ai-chatbot
ai-chatbot
langchain
langchain
fullstack
fullstack
human-in-the-loop
human-in-the-loop
llm-streaming
llm-streaming
ai-chatbot
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 ์ƒํƒœ๊ณ„์˜ ์‹ค์ „ ํ™œ์šฉ๋ฒ•์„ ์ตํž™๋‹ˆ๋‹ค.

๋ฉ”์ธํ™”๋ฉด

MutiModal

Human in the loop

Tool use

์‹ค์‹œ๊ฐ„ ์ŠคํŠธ๋ฆฌ๋ฐ
AI ์ฑ—๋ด‡ ์ง์ ‘ ๋งŒ๋“ค๊ธฐ

API ํ˜ธ์ถœ ์ด์ƒ์˜ ์„œ๋น„์Šค ๊ตฌํ˜„!


๋‹จ์ˆœ API ํ˜ธ์ถœ์—์„œ ๋ฒ—์–ด๋‚˜, AI ์ฑ—๋ด‡์„ ์ง์ ‘ ์„ค๊ณ„ํ•˜๊ณ  ๋ฐฐํฌ๊นŒ์ง€ ๊ฒฝํ—˜ํ•ด ๋ณด์„ธ์š”.
์‹ค์ œ ์„œ๋น„์Šค ์ˆ˜์ค€์˜ ์ฑ—๋ด‡ ๊ฐœ๋ฐœ ์—ญ๋Ÿ‰์„ ํ‚ค์šฐ๋ฉฐ, ์ฐจ์„ธ๋Œ€ AI ๊ธฐ์ˆ  ์ „๋ฌธ๊ฐ€๋กœ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


ํ’€์Šคํƒ AI ์ฑ—๋ด‡ ๋งŒ๋“ค๊ธฐ
์„œ๋น„์Šค ์ˆ˜์ค€์˜ AI ์ฑ—๋ด‡ ๊ตฌ์ถ• ๊ฒฝํ—˜์„ ์ฒด๋“ํ•ฉ๋‹ˆ๋‹ค.

React 19, NestJS, LangChain, LangGraph ๋“ฑ ์ตœ์‹  ๊ธฐ์ˆ  ์Šคํƒ์„ ํ™œ์šฉํ•˜์—ฌ
์‹ค์‹œ๊ฐ„ ์ŠคํŠธ๋ฆฌ๋ฐ, Tool ํ˜ธ์ถœ, ๋ฉ€ํ‹ฐ๋ชจ๋‹ฌ, Human in the Loop ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

๋‹จ์ˆœ API ํ˜ธ์ถœ์„ ๋„˜์–ด, ๋Œ€ํ™” ์ด๋ ฅ ๊ด€๋ฆฌ, ํŒŒ์ผ ์ฒ˜๋ฆฌ, ์‚ฌ์šฉ์ž ์Šน์ธ ๋“ฑ
์‹ค์ œ ์„œ๋น„์Šค์—์„œ ํ•„์š”ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ์ง์ ‘ ์„ค๊ณ„ํ•˜๊ณ  ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

React, NestJS, PostgreSQL ๊ธฐ๋ฐ˜์˜ ํ’€์Šคํƒ ์ฑ—๋ด‡์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ํ•จ๊ป˜ ๊ตฌ์ถ•ํ•˜๊ณ , ๋ชจ๋“  ์†Œ์Šค์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ „ AI ์ฑ—๋ด‡
๊ฐœ๋ฐœ ๊ฒฝํ—˜ ์™„์„ฑ

Section 1 - ๊ฐ•์˜ ์†Œ๊ฐœ ๋ฐ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ค์ •

๋ณธ ๊ฐ•์˜์˜ ๋ชฉํ‘œ๋ฅผ ์†Œ๊ฐœํ•˜๊ณ , React 19 ๊ธฐ๋ฐ˜์˜ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐ ํ™˜๊ฒฝ ์„ค์ •๊ณผ VS Code ๋””๋ฒ„๊น… ํ™˜๊ฒฝ ๊ตฌ์„ฑ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

Section 2 - ์ฑ—๋ด‡ UI ๋””์ž์ธ ๋ฐ ๊ตฌํ˜„

Shadcn UI๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ฑ—๋ด‡์˜ ๊ธฐ๋ณธ ๋ ˆ์ด์•„์›ƒ, ์ฑ„ํŒ… ์˜์—ญ, ์ž…๋ ฅ์ฐฝ ๋“ฑ์„ ๋””์ž์ธํ•˜๊ณ , ๋ฉ”์‹œ์ง€ ์ „์†ก ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ ๋ฐ ๋กœ๋”ฉ ์ƒํƒœ๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

Section 3 - ๋ฐฑ์—”๋“œ(NestJS) ํ”„๋กœ์ ํŠธ ์„ค์ •

NestJS ํ”„๋กœ์ ํŠธ๋ฅผ ์ดˆ๊ธฐ ์„ค์ •ํ•˜๊ณ , ํ™˜๊ฒฝ ๋ณ€์ˆ˜, ๋กœ๊น…, DTO ๊ฒ€์ฆ ๋ฐ Swagger ๋ฌธ์„œ ์ƒ์„ฑ์„ ์œ„ํ•œ ์„ค์ •์„ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค. Chat API ๋ฆฌ์†Œ์Šค ์ƒ์„ฑ๊นŒ์ง€ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

Section 4 - LangChain ์—ฐ๋™ ๋ฐ ์‹ค์‹œ๊ฐ„ ์ŠคํŠธ๋ฆฌ๋ฐ

LangChain์„ ์„ค์น˜ํ•˜๊ณ  OpenAI API์™€ ์—ฐ๋™ํ•˜์—ฌ ์ฒซ LLM ํ˜ธ์ถœ์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. TanStack Query๋ฅผ ํ™œ์šฉํ•œ API ํ˜ธ์ถœ๊ณผ ๋ฐฑ์—”๋“œ Stream HTTP๋ฅผ ํ†ตํ•œ ์‹ค์‹œ๊ฐ„ ์‘๋‹ต ์ŠคํŠธ๋ฆฌ๋ฐ ๊ตฌํ˜„์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

Section 5 - ํ”„๋ก ํŠธ์—”๋“œ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐ ๋ฆฌํŒฉํ† ๋ง

Zustand ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋„์ž…ํ•˜์—ฌ ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ , ์ปค์Šคํ…€ ํ›…๊ณผ ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ๋ฅผ ํ†ตํ•ด ์ฑ„ํŒ… ๋กœ์ง์„ ํšจ์œจ์ ์œผ๋กœ ๋ฆฌํŒฉํ† ๋งํ•ฉ๋‹ˆ๋‹ค.

Section 6 - LangChain Agent์™€ Tool ํ™œ์šฉ

AI Agent์—๊ฒŒ Tool ์‚ฌ์šฉ ๋Šฅ๋ ฅ์„ ๋ถ€์—ฌํ•˜๊ณ , Tool ๋ณ‘๋ ฌ ์ฒ˜๋ฆฌ, Custom Logging ๋ฏธ๋“ค์›จ์–ด, streamMode๋ฅผ ํ™œ์šฉํ•œ HTTP-Stream ํ†ต์‹ ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

Section 7 - Tool ์‹คํ–‰ ๊ณผ์ • ์‹œ๊ฐํ™” ๋ฐ UX ๊ฐœ์„ 

์ฑ—๋ด‡ ํ™”๋ฉด์— Tool ์‹คํ–‰ ์ŠคํŠธ๋ฆผ์„ ์‹œ๊ฐ์ ์œผ๋กœ ํ‘œ์‹œํ•˜๊ณ , Accordion UI, ์‹ค์‹œ๊ฐ„ Markdown ๋ Œ๋”๋ง, ์ž๋™ ์Šคํฌ๋กค ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.

Section 8 - ๋ฉ€ํ‹ฐ๋ชจ๋‹ฌ AI ์ฑ—๋ด‡ (์ด๋ฏธ์ง€/PDF ์ฒ˜๋ฆฌ)

ํŒŒ์ผ ์—…๋กœ๋“œ API๋ฅผ ๊ฐœ๋ฐœํ•˜๊ณ , ์ด๋ฏธ์ง€ ๋ฐ PDF ํŒŒ์ผ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ ๋ฉ€ํ‹ฐ๋ชจ๋‹ฌ ๊ธฐ๋Šฅ์„ ๋ฐฑ์—”๋“œ์™€ ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

Section 9 - ๋‹จ๊ธฐ ๋ฉ”๋ชจ๋ฆฌ ๋ฐ LangGraph ํ™œ์šฉ

LangGraph์˜ MemorySaver์™€ summarizationMiddleware๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋Œ€ํ™” ์ด๋ ฅ์„ ๊ธฐ์–ตํ•˜๊ณ , LangSmith๋กœ ์‹คํ–‰ ํ๋ฆ„์„ ์ถ”์ ํ•ฉ๋‹ˆ๋‹ค.

Section 10 - Human in the Loop ๊ตฌํ˜„

AI์˜ Tool ์‚ฌ์šฉ์„ ์‚ฌ์šฉ์ž๊ฐ€ ์Šน์ธ/๊ฑฐ์ ˆ/์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š” Human in the Loop ํŒจํ„ด์„ ๊ตฌํ˜„ํ•˜๊ณ , ์ŠคํŠธ๋ฆผ ์ค‘๋‹จ ๋ฐ ์žฌ๊ฐœ ๊ธฐ๋Šฅ์„ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค.

Section 11 - ์ฑ„ํŒ…๋ฐฉ ๋ถ„๋ฆฌ ๋ฐ ๋…๋ฆฝ ๋ฉ”๋ชจ๋ฆฌ ์ ์šฉ

Chat ID๋ณ„๋กœ ๋…๋ฆฝ์ ์ธ ๋‹จ๊ธฐ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์ ์šฉํ•˜์—ฌ ์ฑ„ํŒ…๋ฐฉ์„ ๋ถ„๋ฆฌํ•˜๊ณ , ์ƒˆ๋กœ์šด ์ฑ„ํŒ… ์ƒ์„ฑ์„ ์œ„ํ•œ HomePage์™€ ChatPage๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

Section 12 - PostgreSQL ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์„ค์ •

Docker๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ PostgreSQL ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์‹คํ–‰ํ•˜๊ณ , DBeaver๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์—ฐ๊ฒฐ ๋ฐ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค.

Section 13 - Prisma ORM์„ ํ™œ์šฉํ•œ ๋ฐ์ดํ„ฐ ์˜์†ํ™”

Prisma ORM์„ ์„ค์ •ํ•˜๊ณ  PostgreSQL๊ณผ ์—ฐ๋™ํ•˜์—ฌ ์ฑ„ํŒ… ์Šค๋ ˆ๋“œ, ๋ฉ”์‹œ์ง€, Tool ๊ฒฐ๊ณผ ๋“ฑ ๋Œ€ํ™” ๋ฐ์ดํ„ฐ๋ฅผ ์˜์†์ ์œผ๋กœ ์ €์žฅํ•˜๊ณ  ์กฐํšŒํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

๋” ์ด์ƒ ๋‹จ์ˆœ API ํ˜ธ์ถœ์— ๋จธ๋ฌด๋ฅด์ง€ ๋งˆ์„ธ์š”.
์‹ค์ œ ์„œ๋น„์Šค๋กœ ๋™์ž‘ํ•˜๋Š” ํ’€์Šคํƒ AI ์ฑ—๋ด‡ ๊ฐœ๋ฐœ ์—ญ๋Ÿ‰์„ ๊ฐ–์ถ˜ ์ „๋ฌธ๊ฐ€๋กœ ์„ฑ์žฅํ•˜์„ธ์š”.

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ


์‹ค์Šต ํ™˜๊ฒฝ

  • ์šด์˜์ฒด์ œ: 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 ๊ฒฝํ—˜ โ€” ์—†์–ด๋„ ๊ฐ•์˜์—์„œ ์ดˆ๊ธฐ ์„ค์ •๋ถ€ํ„ฐ ๋‹ค๋ฃจ์ง€๋งŒ, ์žˆ์œผ๋ฉด ๋” ์ˆ˜์›”ํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”
Kaburi์ž…๋‹ˆ๋‹ค.

850

๋ช…

์ˆ˜๊ฐ•์ƒ

70

๊ฐœ

์ˆ˜๊ฐ•ํ‰

29

๊ฐœ

๋‹ต๋ณ€

5.0

์ 

๊ฐ•์˜ ํ‰์ 

4

๊ฐœ

๊ฐ•์˜

๋ณ‘.์˜์› ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ ์—…์ฒด | 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๊ฐœ

5.0

1๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • arlee๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    arlee

    ์ˆ˜๊ฐ•ํ‰ 4

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    60% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    Kaburi๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

    ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    ๋น„์Šทํ•œ ๊ฐ•์˜

    ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    ์›” โ‚ฉ26,400

    5๊ฐœ์›” ํ• ๋ถ€ ์‹œ

    โ‚ฉ132,000