이번 강의의 목표
- 바이브코더를 위한 현대적이며 모범적인 애플리케이션 구조론
- React + Vite + API + 데이터베이스 기반 프로젝트 설계 역량 확보
프론트엔드-백엔드 아키텍처 개론
오늘 학습 목표
- 웹 애플리케이션의 전체 구조 이해
- 프론트엔드와 백엔드의 역할 이해
- API 기반 통신 방식 이해
- 데이터베이스의 역할 이해
- 현대적인 AI 기반 개발 방식 이해
현대적인 웹 서비스의 동작 방식
사용자 관점
사용자
↓
웹 브라우저
↓
인터넷
↓
웹 서버
↓
데이터베이스
예시
사용자 → 날씨 조회 버튼 클릭
→ 서버 API 호출
→ 기상 데이터 조회
→ 결과 반환
→ 화면 표시
핵심 메시지
“웹 서비스는 데이터 요청과 응답의 반복이다.”
현대 애플리케이션의 기본 구조
Frontend
↓
API
↓
Backend
↓
Database
Frontend
- 사용자 인터페이스(UI)
- 사용자 경험(UX)
Backend
- 비즈니스 로직
- 데이터 처리
Database
- 데이터 저장
- 데이터 조회
소프트웨어 개발 관점에서 프론트엔드란?
소프트웨어와 사용자의 상호작용 요소
대표 기술
- HTML
- CSS
- JavaScript
현대적 기술
- React
- Vue
- Angular
- Next.js
우리가 사용하는 스택
React + Vite + TypeScript
소프트웨어 개발 관점에서 백엔드란?
소프트웨어 내부의 작동 방식(로직) 정의 요소
주요 역할
- 인증(Authentication)
- 권한(Authorization)
- 데이터 처리
- API 제공
대표 기술
- Node.js
- Python
- Java
- Go
소프트웨어 개발 관점에서 데이터베이스?
데이터를 저장하는 공간
예시
회원정보
상품정보
게시글
주문정보
대표 제품
관계형 DB
- MySQL
- PostgreSQL
NoSQL
- MongoDB
- Firebase
소프트웨어 개발 관점에서 API?
Application Programming Interface
프론트엔드와 백엔드의 대화 창구
예시
GET /weather
응답
{
“city”: “Busan”,
“temp”: 27
}
핵심
프론트엔드는 직접 DB에 접근하지 않는다.
반드시 API를 통해 통신한다.
현대적이며 표준화된 애플리케이션 아키텍처
과거
Browser
↓
Server
↓
Database
현대
React Frontend
↓
REST API
↓
Backend
↓
Database
장점
- 유지보수 용이
- 재사용 가능
- 모바일 앱 연동 가능
클라우드 기반 애플리케이션 플랫폼 서비스
Frontend
Vercel
Backend
Serverless Functions
Database
Supabase
Firebase
PlanetScale
특징
서버를 직접 구매, 설치, 관리하지 않아도 된다.
AI 시대의 개발 아키텍처
사용자
↓
Frontend
↓
Backend
↓
LLM API
↓
GPT / Claude / Gemini
활용 예시
- 챗봇
- 문서요약
- 보고서 생성
- 데이터 분석
바이브코딩 시대의 개발 방식
전통 개발
기획
→ 설계
→ 개발
→ 테스트
→ 배포
바이브코딩
아이디어
→ 프롬프트
→ AI 생성
→ 수정
→ 배포
개발자의 역할 변화
코드 작성자
→ 시스템 설계자
실습 프로젝트 구조
이번 실습
주간 날씨 조회 웹앱
아키텍처
React Frontend
↓
Weather API
↓
JSON Data
↓
UI Rendering
배울 내용
- 컴포넌트
- 상태관리
- API 호출
- 배포
현대적인 개발자의 사고방식
좋은 개발자의 기준
과거: 코드를 많이 작성하는 사람 (단위 시간당 코드 생산성이 높은 사람)
↓
현재: 좋은 질문을 만드는 사람
좋은 아키텍처를 설계하는 사람
AI를 활용해 빠르게 검증하는 사람
실습 프로젝트 예시
Weather Forecast App
기능
- 현재 날씨 조회
- 주간 날씨 조회
- 도시 검색
- 반응형 UI
사용 기술
- React
- Vite
- Fetch API
- Tailwind CSS
- Vercel
결론: 핵심 정리
현대 애플리케이션
Frontend
↓
API
↓
Backend
↓
Database
AI 시대 개발자
- 문제 정의
- 아키텍처 설계
- AI 활용
- 빠른 검증
- 지속적 개선
“과거에는 기업 및 조직의 명확한 요구 사항에 맞춰 빠르게 코드를 작성하는 능력이 중요했으나,
생성형 AI 도구 및 에이전트 도구를 사용할 수 있는 현재 시점에서는 당면 과제를 정의하고, 그에 맞는 해법을 도출한 뒤, 솔루션을 구현하기 위해 다양한 맥락을 통합적이며 일관되게 전달하고, 전반적인 작업 흐름을 관리하는 능력이 더 중요해지고 있다.”
