통합 요약노트
Ch.14 SQL 심화 + 풀스택 연결
JOIN, GROUP BY, 서브쿼리, 프론트-백엔드 연결 개념
이 챕터의 내용
JOIN — 테이블 연결하기
JOIN — 서로 다른 테이블을 공통 키로 연결하여 하나의 결과로 합치는 SQL의 핵심 기능입니다.
하나의 거대한 테이블은 중복과 비효율의 원인입니다
INNER JOIN — 두 테이블에서 매칭되는 행만 합칩니다
LEFT JOIN — 왼쪽 테이블의 모든 행을 유지합니다
- 정규화 = 테이블을 분리하여 중복 제거
- INNER JOIN = 교집합 (양쪽 매칭되는 행만)
- LEFT JOIN = 왼쪽 테이블 모두 유지 (미매칭 시 NULL)
- ON 절로 매칭 조건 지정, 별칭으로 코드 간결하게
GROUP BY와 서브쿼리
GROUP BY — 데이터를 그룹으로 묶고 집계 함수를 적용하여 요약 통계를 만드는 문법입니다.
같은 값을 가진 행들을 하나의 그룹으로 묶어 집계합니다
그룹화한 결과에서 조건에 맞는 그룹만 필터링합니다
쿼리 안에 또 다른 쿼리 서브쿼리(Subquery) 입니다
- GROUP BY 열 — 같은 값끼리 그룹으로 묶어 집계
- HAVING — 그룹화 후 조건 필터 (WHERE는 그룹화 전)
- 서브쿼리 — 쿼리 안의 쿼리, WHERE절·FROM절에서 사용
- 서브쿼리 vs JOIN — 상황에 따라 적절히 선택
프론트 + 백엔드 — 전체 그림
API 서버 — 프론트엔드와 데이터베이스 사이에서 요청을 중계하는 백엔드가 전체 그림을 완성합니다.
브라우저에서 DB에 직접 접근하면 대참사입니다
REST API — HTTP 메서드로 CRUD를 수행합니다
사용자 클릭부터 DB까지 전체 데이터 흐름을 따라가봅시다
- Ch1: 웹의 원리 — 브라우저, 서버, HTTP, URL의 동작 방식
- Ch2: HTML 기초 — 태그, 시맨틱 구조, 폼, 테이블
- Ch3: CSS 기초 — 셀렉터, 색상, 폰트, Box Model
- Ch4: CSS 심화 — 단위(px, em, rem, %), 배경, 그림자
- Ch5: Flexbox — 1차원 레이아웃, 정렬, 반응형 카드
- Ch6: Grid + 반응형 — 2차원 레이아웃, 미디어쿼리, 모바일 우선
- Ch7: 실전 CSS — 컴포넌트, 네비게이션, 카드, 버튼 스타일
- Ch8: CSS 변수 + 접근성 — 커스텀 속성, ARIA, 키보드 접근성
- Ch9: JavaScript 기초 — 변수, 타입, 조건문, 함수
- Ch10: JS + DOM — 이벤트, 배열, 필터링, CSS 애니메이션
- Ch11: React 기초 — 컴포넌트, JSX, props, state, 이벤트
- Ch12: React 심화 — useEffect, 리스트 렌더링, 조건부 렌더링
- Ch13: SQL 기초 — 테이블, SELECT, WHERE, INSERT, UPDATE, DELETE
- Ch14: SQL 심화 — JOIN, GROUP BY, 서브쿼리, 풀스택 아키텍처
핵심 용어 모음
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 조작
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기