Ch.14 SQL 심화 + 풀스택 연결

프론트 + 백엔드 — 전체 그림

클라이언트-서버 아키텍처의 필요성을 이해한다API와 데이터베이스의 연결 개념을 설명할 수 있다풀스택 데이터 흐름을 단계별로 설명할 수 있다

React에서 SQL을 직접 실행할 수 있을까?

지금까지 프론트엔드(HTML, CSS, JS, React)와 데이터베이스(SQL)를 각각 배웠습니다. 이 둘은 어떻게 연결될까?

브라우저에서 데이터베이스까지, 데이터는 어떻게 이동할까?

API 서버 — 프론트엔드와 데이터베이스 사이에서 요청을 중계하는 백엔드가 전체 그림을 완성합니다.

article

핵심 내용

브라우저에서 DB에 직접 접근하면 대참사입니다

보안 문제: 브라우저 → DB 직접 연결이 위험한 이유 1. DB 비밀번호가 브라우저 코드에 노출됨 (F12로 누구나 확인 가능) 2. 사용자가 SQL을 직접 조작 가능 → `DROP TABLE users;` 실행 가능! 3. 모든 데이터에 제한 없이 접근 가능 (다른 사용자 정보도) 4. SQL 인젝션 공격에 완전히 노출

React (프론트): 사용자 인터페이스, 브라우저에서 실행

API 서버 (백엔드): 요청 검증, 권한 확인, SQL 실행

DB (데이터베이스): 데이터 저장·조회, 서버만 접근 가능

올바른 구조: 프론트 → API 서버 → DB API 서버가 '문지기' 역할을 합니다. 누가, 무엇을, 어디까지 할 수 있는지 검증한 후 DB에 접근합니다.

REST API — HTTP 메서드로 CRUD를 수행합니다

// React에서 API 서버로 요청 보내기 (fetch)
// 사용자 목록 조회 (GET)
const response = await fetch('/api/users');
const users = await response.json();

// 새 사용자 추가 (POST)
await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: '김짓',
    email: 'kim@example.com'
  })
});

사용자 클릭부터 DB까지 전체 데이터 흐름을 따라가봅시다

사용자 클릭: '회원가입' 버튼 클릭

fetch 호출: POST /api/users 요청 전송

API 서버: 입력값 검증, 비밀번호 암호화

SQL 실행: INSERT INTO users VALUES(...)

DB 저장: 데이터 영구 저장 완료

JSON 응답: { success: true, id: 4 }

React state: 상태 업데이트 (setUsers)

UI 갱신: 화면에 새 사용자 표시

14개 챕터의 기초를 마쳤습니다 다음 단계를 안내합니다

여기까지 배운 것만으로도 충분합니다! HTML, CSS, JavaScript, React, SQL — 이 기초 위에 어떤 프레임워크든 빠르게 배울 수 있습니다. 기초가 탄탄하면 새로운 기술은 단지 '도구'일 뿐입니다.

프론트엔드와 데이터베이스 사이에서 요청을 중계하는 것은?

브라우저에서 SQL을 직접 실행하여 DB에 접근하는 것이 가장 효율적이다

REST API에서 새 데이터를 생성할 때 사용하는 HTTP 메서드는 ___

14개 챕터의 여정을 모두 마쳤습니다!

key

핵심 용어

📖

GET /users

SELECT * FROM users; — 조회 (Read)

➕

POST /users

INSERT INTO users ... — 생성 (Create)

✏️

PUT /users/1

UPDATE users SET ... WHERE id=1; — 수정 (Update)

🗑️

DELETE /users/1

DELETE FROM users WHERE id=1; — 삭제 (Delete)

▲

Next.js

React 기반 풀스택 프레임워크 — SSR, API Routes 내장

🚂

Express.js

Node.js 백엔드 프레임워크 — 가볍고 유연한 API 서버

⚡

Supabase

오픈소스 Firebase 대안 — PostgreSQL + Auth + Storage

💎

Prisma

TypeScript ORM — SQL 대신 코드로 DB 조작

edit_note

정리 노트

프론트 + 백엔드 — 전체 그림 정리

클라이언트-서버 구조

프론트엔드
사용자 눈에 보이는 UI — HTML, CSS, JavaScript, React
백엔드
서버에서 동작하는 로직과 데이터 처리 — API, DB 연결
API
프론트 ↔ 백엔드 간 데이터 교환 약속 (REST, JSON)

풀스택 데이터 흐름

요청(Request)
프론트에서 fetch()로 API 서버에 요청 전송
처리(Process)
백엔드가 요청을 받아 DB에서 데이터 조회/저장
응답(Response)
JSON 형태로 결과를 반환 → 프론트에서 화면에 표시
★

웹 개발의 전체 그림: 프론트(React) → API → 백엔드(서버) → DB(SQL)

image

시각 자료

다이어그램: web-p23
check_circle

핵심 정리

  • 1Ch1: 웹의 원리 — 브라우저, 서버, HTTP, URL의 동작 방식
  • 2Ch2: HTML 기초 — 태그, 시맨틱 구조, 폼, 테이블
  • 3Ch3: CSS 기초 — 셀렉터, 색상, 폰트, Box Model
  • 4Ch4: CSS 심화 — 단위(px, em, rem, %), 배경, 그림자
  • 5Ch5: Flexbox — 1차원 레이아웃, 정렬, 반응형 카드
  • 6Ch6: Grid + 반응형 — 2차원 레이아웃, 미디어쿼리, 모바일 우선
  • 7Ch7: 실전 CSS — 컴포넌트, 네비게이션, 카드, 버튼 스타일
  • 8Ch8: CSS 변수 + 접근성 — 커스텀 속성, ARIA, 키보드 접근성
  • 9Ch9: JavaScript 기초 — 변수, 타입, 조건문, 함수
  • 10Ch10: JS + DOM — 이벤트, 배열, 필터링, CSS 애니메이션
  • 11Ch11: React 기초 — 컴포넌트, JSX, props, state, 이벤트
  • 12Ch12: React 심화 — useEffect, 리스트 렌더링, 조건부 렌더링
  • 13Ch13: SQL 기초 — 테이블, SELECT, WHERE, INSERT, UPDATE, DELETE
  • 14Ch14: SQL 심화 — JOIN, GROUP BY, 서브쿼리, 풀스택 아키텍처

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작