프론트엔드 개발자를 위한 SQL 개념 정리

들어가며

프론트엔드 개발자는 일반적으로 API를 통해 데이터를 받아 화면에 표시하는 역할을 수행합니다. 이 과정에서 SQL은 백엔드 개발자나 데이터 엔지니어의 영역으로 여겨지는 경우가 많습니다.

하지만 협업 과정에서 다음과 같은 말을 자주 듣게 됩니다.

“그건 WHERE에서 필터링했어요.” “이건 JOIN으로 합쳐야 돼요.” “ORDER BY 순서가 달라서 정렬이 꼬였어요.”

이런 대화를 정확히 이해하려면 SQL의 기본 개념을 알고 있어야 합니다. SQL 문법을 모두 외울 필요는 없지만, 주요 용어를 알고 있으면 API 설계와 데이터 흐름을 훨씬 명확하게 파악할 수 있습니다.

 

핵심 요약

1. Table에 대한 이해
2. WHERE: 필터 조건 → 검색 및 필터 UI와 대응
3. ORDER BY: 정렬 기준 → 정렬 옵션 구현과 대응
4. JOIN: 데이터 결합 → 복합 데이터 응답 구조 이해
5. GROUP BY / HAVING: 통계, 요약 데이터
6. LIMIT / OFFSET: 페이지네이션
7. NULL: 값이 존재하지 않음, 예외 처리 필요
8. 트랜잭션: 요청 단위의 일관성 관리
9. 마무리

---

1. 테이블(Table): 데이터의 구조적 단위

 

SQL에서 데이터는 테이블(table)에 저장됩니다. 이는 API로 전달되는 JSON 데이터의 근원이기도 합니다.

 

- SQL 용어 의미 프론트엔드에서의 대응

Table	데이터를 저장하는 표	API의 데이터 원본
Column	열, 데이터 속성	JSON의 key
Row	행, 실제 데이터	JSON의 객체 한 건

 

예시 쿼리:

SELECT name, email FROM users;

 

API 응답 예시:

[
  { "name": "배채빵", "email": "chaieun@naver.com" }
]

즉, users 테이블에서 name과 email 열만 선택한 결과가 API로 전달됩니다.

---

2. WHERE: 데이터 필터링 조건

 

WHERE 절은 특정 조건에 맞는 데이터만 선택할 때 사용합니다. 프론트엔드의 검색, 필터, 정렬 기능은 대부분 이 절과 대응됩니다.

 

예시 쿼리:

SELECT * FROM users WHERE age >= 25 AND city = 'Yongin';

REST API 요청으로는 다음과 같은 형태와 대응됩니다.

 

GET /users?age_gte=25&city=Yongin

따라서 백엔드가 “WHERE 조건이 빠졌어요”라고 말하면 API에 필터링 로직이 누락되었다는 의미입니다.

---

3. ORDER BY: 정렬 기준

 

데이터를 특정 기준으로 정렬할 때 ORDER BY 절을 사용합니다. 프론트엔드에서 정렬 옵션을 구현할 때 백엔드의 이 로직과 대응됩니다.

 

예시 쿼리:

SELECT * FROM posts ORDER BY created_at DESC;

 

이는 “최신순으로 내림차순 정렬”을 의미합니다.

 

API 요청 예시:

GET /posts?sort=created_at&order=desc

---

4. JOIN: 여러 테이블 결합

 

JOIN은 두 개 이상의 테이블을 결합해 하나의 결과로 만드는 연산입니다. 백엔드가 “이건 JOIN으로 합쳤어요”라고 말할 때는, 여러 데이터 소스를 하나의 API 응답으로 통합했다는 뜻입니다.

 

예시 쿼리:

SELECT u.name, p.title
FROM users u
JOIN posts p ON u.id = p.user_id;

 

결과 데이터 예시:

[
  { "name": "배채빵", "title": "SQL 배우기" }
]

 

JOIN의 주요 유형은 다음과 같습니다.

 

JOIN 종류 설명 예시 상황

INNER JOIN	두 테이블 모두에 존재하는 데이터만 결합	게시글이 있는 사용자만 조회
LEFT JOIN	왼쪽 테이블의 모든 데이터를 유지	모든 사용자 조회, 게시글이 없으면 NULL

JOIN 개념을 이해하면, API 응답 구조가 왜 그렇게 구성되어 있는지 쉽게 파악할 수 있습니다.

---

5. GROUP BY와 HAVING: 데이터 집계

 

GROUP BY는 동일한 값을 가진 행들을 묶어 통계나 요약 데이터를 계산할 때 사용합니다. HAVING은 그룹화된 결과에 조건을 적용할 때 사용합니다.

 

예시 쿼리:

SELECT department, AVG(salary)
FROM employees
GROUP BY department
HAVING AVG(salary) >= 3000;

이 쿼리는 부서별 평균 급여가 3000 이상인 부서만 반환합니다.

프론트엔드에서는 주로 차트, 요약 카드, 통계 페이지 등에서 이와 같은 데이터 구조를 다루게 됩니다.

---

6. LIMIT과 OFFSET: 페이지네이션

 

SQL에서 LIMIT과 OFFSET은 데이터를 일정 단위로 나누어 가져올 때 사용됩니다. 이는 프론트엔드의 페이지네이션 또는 무한 스크롤 로직과 직접적으로 연결됩니다.

 

예시 쿼리:

SELECT * FROM posts
ORDER BY created_at DESC
LIMIT 10 OFFSET 20;

이 쿼리는 21번째부터 30번째까지의 데이터를 조회합니다.

 

API에서는 다음과 같이 표현됩니다.

GET /posts?page=3&limit=10

---

7. NULL: 비어 있는 값

 

SQL의 NULL은 “값이 존재하지 않음”을 의미합니다. 0이나 빈 문자열('')과는 다릅니다.

프론트엔드로 전달될 때는 null 또는 undefined 형태로 나타나므로 UI에서 적절히 처리해주어야 합니다.

{user.bonus ?? 0}

이는 bonus가 null이면 0을 표시하는 코드입니다.

---

8. 트랜잭션(Transaction): 작업 단위

 

트랜잭션은 여러 SQL 작업을 하나의 논리적 단위로 묶은 것입니다. 하나라도 실패하면 전체가 취소(rollback)되고, 모두 성공하면 최종 반영(commit)됩니다.

예를 들어 송금 시 다음 두 작업이 모두 성공해야 합니다.

1. 송금자 계좌에서 금액 차감
2. 수신자 계좌에 금액 추가

트랜잭션은 데이터 일관성을 유지하기 위한 핵심 개념이며, 프론트엔드에서는 요청 실패 시 UI나 알림 처리 방식에 영향을 줍니다.

---

9. 마무리

 

SQL은 단순히 데이터베이스를 조작하기 위한 언어가 아닙니다. 데이터가 어떻게 구성되고, 어떤 과정을 거쳐 프론트로 전달되는지를 이해하게 해주는 언어입니다.

프론트엔드 개발자가 SQL 용어를 이해하면 API 설계 논의를 보다 명확히 이해하고, 데이터 흐름을 논리적으로 파악할 수 있습니다.