Web Basics · 구조
웹·사이트 구성 기초
프론트엔드·백엔드·웹서버·DB·스토리지와 사이트 만드는 흐름(정적/동적), 검증 때 보는 HTTP 상태코드(200·404 등)를 정리.
Doc.07
개념 설명용 요약
프론트/백
보여주기/처리하기
화면은 프론트, 계산·DB·API는 백엔드.
사이트 구성
정적 vs 동적
파일이면 정적(우리 사이트), 로그인·DB면 동적.
상태코드
200·404…
200 정상·404 경로오류·401/403 권한·5xx 서버.
자동화 결과물을 '사이트'로 만들어 공유할 때 알아야 할 웹 구조의 큰 그림입니다. 용어(프론트엔드·백엔드·웹서버·DB·스토리지)와 사이트 만드는 흐름, 그리고 검증할 때 보는 200·404 같은 상태코드를 한 장에 정리합니다.
Section 01
1. 큰 그림 — 웹은 '요청과 응답'
브라우저(클라이언트) ──요청(request)──▶ 서버(server)
브라우저(화면 그림) ◀─응답(response)── 서버(HTML/JSON 등)식당 비유: 손님(브라우저)이 주문(요청)하면 주방(서버)이 음식(응답=HTML/데이터)을 돌려주고, 손님이 그걸 받아 본다. 웹은 이 주고받음의 반복입니다.
Section 02
2. 프론트엔드 vs 백엔드
| 구분 | 프론트엔드 (Front-end) | 백엔드 (Back-end) |
|---|---|---|
| 역할 | 눈에 보이는 화면 — 버튼·표·입력폼 | 화면 뒤 처리 — 계산·DB·인증·API |
| 어디서 도나 | 브라우저(사용자 PC) | 서버(원격 컴퓨터) |
| 주로 쓰는 것 | HTML·CSS·JavaScript | Python·Node.js 등 + DB |
| 강의 속 예 | 우리 대시보드·보고서 HTML | analyze 스크립트, 메일 발송, API 호출 |
한 줄: 프론트 = 보여주는 쪽, 백엔드 = 처리하는 쪽. 우리 자동화의 "화면(대시보드)"은 프론트, "계산·발송"은 백엔드 성격입니다.
Section 03
3. 웹서버 (Web Server)
- 요청을 받아 응답을 돌려주는 프로그램. 두 가지 일을 합니다.
- 정적 파일 서빙: 미리 만든 HTML/이미지를 그대로 전달 (우리 강의 사이트).
- 앱 실행: 요청마다 백엔드 코드를 돌려 결과를 만들어 전달 (로그인·DB 있는 서비스).
- 강의 속 예: 로컬 점검용
python -m http.server, 배포용 Vercel(정적 호스팅).
Section 04
4. 데이터베이스 (DB)
- 구조화된 데이터를 저장·검색하는 곳. 표 형태(관계형: SQLite·PostgreSQL)와 문서형 등이 있습니다.
- 언제 필요한가: 기록이 쌓이고, 조건으로 검색·집계해야 할 때 (예: 매월 고객별 기록 누적·조회).
- 강의 기본은 파일(CSV/JSON)이면 충분. 규모가 커지면 그때 DB.
Section 05
5. 스토리지 (Storage)
- 파일 덩어리(이미지·PDF·엑셀·동영상)를 저장하는 곳. 로컬 폴더 또는 클라우드 스토리지(예: S3).
- DB와 차이: DB = 구조화된 데이터(표), 스토리지 = 파일 그 자체. 보고서 PDF·첨부파일은 스토리지에.
Section 06
6. 사이트 만드는 구성과 흐름
(A) 정적 사이트 — 우리 강의 사이트가 이것 (가장 단순)
HTML 파일 만들기 → 웹서버/호스팅(Vercel)에 올리기 → URL로 누구나 접속
(백엔드·DB 없음. 그래서 빠르고 안전하고 저렴)(B) 동적 앱 — 로그인·실시간·데이터 저장이 필요할 때
사용자 → 프론트엔드(화면) → 백엔드(서버 로직/API) → DB·스토리지 → 응답 → 화면
(요청마다 서버가 처리. 기능은 많지만 구성·운영이 복잡)선택 기준: 결과물이 "파일/문서"면 정적으로 충분(우리 자동화 대부분). 사용자별 로그인·실시간 갱신·대량 데이터 저장이 필요하면 동적.
Section 07
7. 검증 — HTTP 상태코드 (200·404 등)
요청이 어떻게 됐는지 서버가 숫자로 알려줍니다. 사이트·API를 검증할 때 이걸 봅니다.
| 코드 | 묶음 | 뜻 | 흔한 원인·대처 |
|---|---|---|---|
| 200 | 2xx 성공 | OK, 정상 | 잘 됨 |
| 201 | 2xx | 생성됨(Created) | 새 자원 생성 성공 |
| 204 | 2xx | 내용 없음(No Content) | 성공했지만 돌려줄 본문 없음 |
| 301 / 302 | 3xx 이동 | 영구/임시 이동(redirect) | 주소가 바뀜, 자동 이동 |
| 304 | 3xx | 안 바뀜(Not Modified) | 캐시 사용 |
| 400 | 4xx 요청 잘못 | Bad Request | 요청 형식·파라미터 오류 |
| 401 | 4xx | 인증 필요(Unauthorized) | 로그인/키 없음 → 인증 추가 |
| 403 | 4xx | 권한 없음(Forbidden) | 키는 있으나 권한 부족 |
| 404 | 4xx | 없음(Not Found) | 경로·파일명 오타 → 주소 확인 |
| 429 | 4xx | 너무 많은 요청 | API 호출 한도 초과 → 속도 줄이기 |
| 500 | 5xx 서버 잘못 | 서버 오류 | 백엔드 코드/로그 확인 |
| 502 / 503 | 5xx | Bad Gateway / 점검중 | 서버·게이트웨이 일시 문제, 잠시 후 |
핵심만: 200=정상, 404=경로 오류(가장 흔함), 401·403=인증·권한, 429=호출 과다, 5xx=서버 문제.
검증 명령 예 (우리가 배포 점검에 쓴 것):
curl -s -o /dev/null -w "%{http_code}" https://주소/페이지.html
# 200 이 나오면 정상, 404 면 경로·파일명을 다시 확인Section 08
8. 한눈 정리 — 우리 강의와 연결
- 우리 강의 사이트 = 정적(프론트만) + Vercel 호스팅. 그래서 백엔드·DB 없이 빠르게 공유.
- 자동화 산출물 = 파일/HTML(보고서·대시보드). DB·스토리지는 규모가 커질 때.
- 검증 = 배포·링크 점검 시 200(정상)/404(경로 오타) 를 가장 자주 본다.