webDev_llm

WebDev With LLM - 웹 개발과 LLM을 결합한 학습 코스.

개요

이 코스는 웹 개발과 LLM(Large Language Model)을 결합한 체계적인 학습 과정입니다. ChatGPT 기초부터 웹 개발, AI 서비스 구현, LLM Agent 활용까지 실습 중심으로 구성되어 있습니다.

• 총 4개 파트로 구성: ChatGPT Basic, Web Basic, Web Service, LLM Agent
• 각 파트별로 이론과 실습을 포함한 구조
• Node.js 기반 웹 개발과 ChatGPT API 연동에 집중
• 실제 서비스 개발 프로세스 경험
• AI 도구를 활용한 개발 생산성 향상 방법론 제공

파트별 핵심 내용

Part 1. ChatGPT Basic

• 인공지능과 ChatGPT 기술 배경 및 장점 이해

• 업무 자동화를 위한 AI 활용 트렌드 학습

• 효과적인 프롬프트 엔지니어링 기법과 Markdown 활용

• 실습: ChatGPT 계정 생성, 기초 사용법, 창의적 글쓰기 등

• 1.1. ChatGPT 기본 소개 및 장점

• 1.2. 업무 자동화의 필요성과 트렌드

• 1.3. 프롬프트 엔지니어링과 Markdown

Part 2. Web Basic (Node.js 기반 웹 기초)

• 웹의 작동 원리 - 클라이언트/서버 구조, HTTP, 포트 개념

• HTML/CSS/JS 기초 및 웹 페이지 구성 요소 학습

• Node.js 환경 설정 및 JavaScript 기반 개발 방법론

• 콘솔 앱, 터미널 유틸리티 개발을 통한 실습

• 모듈화와 프로젝트 구조화 방법론 습득

• JSON 데이터 처리 및 API 연동 기초

• 2.1. 웹의 작동 원리

• 2.2. HTML/CSS/JS 최소 기초

• 2.3. Node.js 소개와 설치

• 2.4. JavaScript로 간단한 콘솔 앱 만들기

• 2.5. 터미널 기반 유틸리티 만들기

• 2.6. 모듈화와 프로젝트 구조화

• 2.7. JSON과 데이터 다루기

Part 3. Web Service

• AI 기반 웹 서비스 설계 및 아키텍처 이해

• ChatGPT API 활용법과 OpenAI 서비스 연동 방법

• RESTful API 서버 구현 (Node.js + Express)

• 프론트엔드와 백엔드 연동 및 사용자 인터페이스 개발

• 서비스 기능 고도화 및 최적화 방법

• 실제 서비스 개발: AI 운세 상담 서비스 구현 사례

• 3.1. 서비스 구조와 기술 스택

• 3.2. 챗GPT란

• 3.3. 챗GPT의 플레이그라운드

• 3.4. 개발 환경 설정

• 3.5. 백엔드 구현

• 3.6. 프런트엔드 구현

• 3.7. 기능 고도화

Part 4. LLM Agent

• LLM 기반 개발 도구와 에이전트 개념 이해

• 로컬 LLM 환경 구축 및 최적화 방법

• AI 통합 IDE와 CLI 도구 실무 활용

• 지식 관리 시스템과 프로젝트 자동화

• 개발 환경 컨테이너화 및 워크플로우 통합

• 실습: 통합 LLM Agent 개발 환경 구축

• 4.1. MCP 개요 및 실습

• 4.2. Cursor 실습

• 4.3. LM Studio 설치 및 테스트

• 4.4. Cline 실습

• 4.5. Obsidian의 활용

• 4.6. LLM을 활용한 Docker 쉽게 사용하기

• 4.7. ClaudeCode와 GeminiCli

• 4.8. PRD, Tasks, Rules

• 4.9. Taskmaster.ai 활용

• 4.10. 기타 도구 및 리소스

파일 구조

• 각 장마다 .md 파일로 이론 내용 제공
• 실습용 코드는 각 챕터별 src 폴더에 저장 (예: 2.2.src, 4.1.src 등)
• 실습 코드 파일 명명 규칙:
  • 챕터.하위번호 형식으로 명명: 2.4.6.js, 2.5.1.js 등
  • 파일 확장자로 언어/형식 구분 (.js, .html, .css, .bash, .json 등)
  • 예: 2.4.src/2.4.6.js, 2.6.src/2.6.1.js, 4.1.src/mcp-config.json 등
• 예제 코드는 번호 순서대로 진행하도록 구성
• Part 4는 LLM Agent 도구별 실습 환경 및 예제 코드 포함

학습 방법

1. 각 파트의 이론 내용(.md 파일)을 먼저 학습
2. 관련 실습 디렉토리(src 폴더)의 코드 예제를 순서대로 실행하며 실습
3. 이론과 실습을 연계하여 개념 이해 및 응용 능력 향상
4. Part 3에서는 배운 내용을 토대로 실제 서비스를 개발하는 프로젝트 수행
5. Part 4에서는 AI 도구를 활용한 개발 생산성 향상 방법 습득

기술 스택

• 프론트엔드: HTML, CSS, JavaScript
• 백엔드: Node.js, Express.js
• AI/LLM: OpenAI ChatGPT API, OpenAI Assistants API, Anthropic Claude API
• 개발 도구:
  • AI 통합 IDE: Cursor, Cline, GitHub Copilot
  • 로컬 LLM: LM Studio, Ollama, llama.cpp
  • CLI LLM 도구: ClaudeCode, GeminiCli
  • 지식 관리: Obsidian, MCP(Model Context Protocol)
  • 프로젝트 관리: Taskmaster.ai, PRD/Tasks/Rules 체계
  • 버전 관리: Git, GitHub
  • 컨테이너화: Docker, 개발 환경 최적화

학습 효과

• 최신 AI 기술과 웹 개발 역량 동시 향상
• 실제 프로젝트 개발을 통한 실무 경험 획득
• AI 도구를 활용한 개발 생산성 극대화 방법 습득
• LLM Agent 기반 자동화 워크플로우 구축 능력
• 로컬 LLM 환경 구축 및 최적화 전문성
• LLM 기반 서비스 아키텍처 설계 및 구현 능력 배양
• 향후 AI 기술 발전에 대응할 수 있는 기초 역량 확보