들어가며 – “데이터의 흐름을 이해하면 실무가 쉬워진다”
개발을 공부하다 보면 코드 문법보다 어려운 게 바로 “데이터가 어디서 와서, 어디로 가는가” 입니다.
프론트 엔드에서 입력한 값이 서버를 거쳐 데이터베이스에 저장되고, 다시 화면에 표시되기까지의 과정이 바로 ‘데이터 연동 & 서버 흐름’ 입니다.
이번 편에서는 비전공자 / 노베이스 / 입문 초보 개발자도 한눈에 이해할 수 있도록 실무에서 바로 사용되는 개념 25개를 예시 + 비유 + 실무적 쓰임새 중심으로 정리했습니다.
※ 실제로 제가 실무를 하면서 정말 많이 들은 용어들이고 또 많이 사용되는 용어들입니다. 해당 용어들만 이해하고 있어도 여러분들의 상사분들께서 하시는 말씀을 알아듣는데 정말 편하실 겁니다!
서버(Server)와 클라이언트(Client)
서버는 데이터를 제공하는 쪽, 클라이언트는 데이터를 요청하는 쪽입니다.
웹브라우저(클라이언트)가 서버에 로그인 요청을 보내면, 서버는 사용자 정보를 확인하고 결과를 반환합니다.
- 프론트엔드: 로그인 버튼 클릭 → 서버에 아이디/비밀번호 전송
- 백엔드: DB 조회 후 로그인 성공 시 토큰 반환
// 예시: 클라이언트에서 서버로 로그인 요청
fetch("https://api.zerotodev.kr/login", {
method: "POST",
body: JSON.stringify({ id: "zero", pw: "1234" }),
});
➡️ 포인트: 모든 서비스는 “요청(Request)”과 “응답(Response)”을 중심으로 돌아간다.
API (Application Programming Interface)
API는 프로그램 간에 데이터를 주고받는 소통 창구입니다.
예를 들어, 네이버 지도 API를 사용하면 내 웹사이트에 지도를 직접 표시할 수 있습니다.
- 결제, 로그인, 날씨, 번역, 챗봇 등 외부 서비스 연동 시 거의 필수
// 예시: 공공데이터 포털 API 요청
fetch("https://api.odcloud.kr/api/15077586/v1/centers")
.then(res => res.json())
.then(data => console.log(data));
➡️ 참고: 공공데이터포털 API 가이드
REST & RESTful
REST는 API 설계의 표준 규칙입니다.GET, POST, PUT, DELETE를 이용해 CRUD를 구현합니다.
GET /users → 사용자 목록 조회
POST /users → 사용자 추가
PUT /users/{id} → 사용자 수정
DELETE /users/{id} → 사용자 삭제
➡️ 포인트: RESTful하게 설계하면 유지보수가 쉽고 협업이 명확해집니다.
➡️ 참고: REST API Tutorial
HTTP 요청(Request)과 응답(Response)
서버와 클라이언트 간 통신의 기반이 되는 프로토콜입니다.
요청 예시
POST /login HTTP/1.1
Host: zerotodev.kr
Content-Type: application/json
{ "id": "zero", "pw": "1234" }
응답 예시
HTTP/1.1 200 OK
Content-Type: application/json
{ "message": "로그인 성공", "token": "abcd1234" }
➡️ 포인트: HTTP 상태코드(200, 404, 500 등)는 디버깅의 핵심입니다.
JSON과 XML
데이터를 교환할 때 사용하는 형식입니다. 요즘은 대부분 JSON이 표준입니다.
JSON 예시
{ "name": "제로", "job": "개발자" }
XML 예시
<user>
<name>제로</name>
<job>개발자</job>
</user>
➡️ 포인트: API 응답 대부분이 JSON이며, JS에서 쉽게 다룰 수 있습니다.
➡️ 참고: JSON.org 공식문서
Tip) 공공기관 웹개발에서는 XML 로 많이 사용하기도 합니다.
프론트엔드와 백엔드
| 구분 | 역할 | 주요 기술 |
|---|---|---|
| 프론트엔드 | 사용자 화면(UI) | HTML, CSS, JavaScript, React, Vue |
| 백엔드 | 데이터 처리, API | Java(Spring), Node.js, Python(Django) |
➡️ 포인트: 화면(프론트)과 로직(백엔드)을 분리해야 유지보수가 쉽습니다.
데이터베이스(DB)
데이터를 저장하고 관리하는 시스템입니다. Oracle, MySQL, MongoDB 등 다양한 종류가 있습니다.
SQL 예시
CREATE TABLE user (
id INT PRIMARY KEY,
name VARCHAR(50),
email VARCHAR(100)
);
➡️ 포인트: 공공기관·기업에서는 Oracle 및 Tibero, 스타트업에서는 MySQL·PostgreSQL이 주로 쓰입니다.
➡️ 참고: MySQL 공식문서
SQL과 쿼리(Query)
SQL은 데이터에게 “무엇을 하라”고 명령하는 언어입니다. 그리고 그 명령문을 쿼리(Query) 라 합니다.
예시
SELECT *
FROM user
WHERE age > 25;
➡️ 포인트: 쿼리를 최적화하면 서버 속도가 극적으로 향상됩니다. (쿼리를 어떻게 짜느냐에 따라 최적화가 달라집니다. 이를 튜닝이라 합니다)
➡️ 참고: SQLBolt – SQL 입문 튜토리얼
CRUD
Create, Read, Update, Delete의 약자입니다.
| 동작 | SQL 예시 |
|---|---|
| 생성 | INSERT INTO user VALUES (1, ‘제로’); |
| 조회 | SELECT * FROM user; |
| 수정 | UPDATE user SET name=’제로2′ WHERE id=1; |
| 삭제 | DELETE FROM user WHERE id=1; |
➡️ 포인트: CRUD는 모든 비즈니스 로직의 기본입니다.
ORM (Object Relational Mapping)
객체(Object)와 데이터베이스 테이블을 자동으로 연결해주는 기술입니다.
// 예시: JPA 엔티티
@Entity
class User {
@Id Long id;
String name;
}
➡️ 포인트: SQL문을 몰라도 DB작업이 가능하지만, 내부 쿼리 최적화 이해는 필수입니다.
➡️ 참고: Spring Data JPA 문서
AJAX
페이지 전체 새로고침 없이 서버와 통신하는 기술입니다.
$.ajax({
url: "/user",
type: "GET",
success: function(data) { console.log(data); }
});
➡️ 포인트: 검색 자동완성, 댓글, 좋아요 기능 모두 AJAX로 구현됩니다. 정말 많이 쓰입니다.
Fetch와 Axios
서버 요청을 위한 JavaScript 도구입니다.
// Fetch
fetch("/api/data").then(res => res.json());
// Axios
axios.get("/api/data").then(res => console.log(res.data));
➡️ 포인트: Axios는 인터셉터, 에러 처리 등 확장성이 좋아 실무에서 많이 쓰입니다.
CORS
서버 간 출처가 다를 때 발생하는 보안 에러입니다.
서버 응답에 다음 헤더를 추가하면 해결됩니다.
Access-Control-Allow-Origin: *
➡️ 포인트: API 서버와 프론트 서버가 다른 도메인일 경우 필수 설정입니다.
JWT와 세션
- 세션: 서버에 로그인 정보를 저장
- JWT: 클라이언트가 토큰을 직접 저장
// JWT 구조
Header.Payload.Signature
➡️ 포인트: 모바일/SPA 환경에서는 JWT가 효율적입니다.
➡️ 참고: JWT.io 공식사이트
API Key
API 사용 시 필요한 인증키입니다.
예를 들어, OpenAI API를 쓰려면 Authorization: Bearer [키]를 포함해야 합니다.
➡️ 포인트: .env 파일로 관리하여 외부 노출을 방지합니다.
OAuth 인증
“카카오로 로그인”, “구글로 로그인”이 바로 OAuth입니다.
내 서버가 아닌 외부 인증서버를 통해 사용자 인증을 수행합니다. (간편인증도 여기에 해당!)
➡️ 참고: OAuth 2.0 공식문서
서버 프레임워크
반복되는 서버 구조를 빠르게 만드는 도구입니다.
- Java → Spring Boot
- JavaScript → Express.js
- Python → Django
➡️ 포인트: 백엔드 개발은 프레임워크 이해도가 곧 생산성입니다.
API 문서화 도구
Swagger나 Postman은 API를 시각적으로 테스트하고 문서화할 때 사용합니다.
➡️ 참고: Swagger 공식사이트
JSON 파싱(Parsing)
서버에서 받은 문자열(JSON)을 코드에서 사용할 수 있게 변환합니다.
const user = JSON.parse('{"name":"제로"}');
console.log(user.name); // 제로
➡️ 포인트: 데이터 전송 시 JSON 파싱 에러는 가장 흔한 버그입니다.
비동기(Asynchronous)
동시에 여러 작업을 수행할 수 있는 개념입니다.
비동기 코드를 이해하면 화면 멈춤 없는 앱을 만들 수 있습니다.
콜백(Callback)
특정 동작이 끝난 뒤 실행되는 함수입니다.
function afterWork() {
console.log("작업 완료!");
}
doSomething(afterWork);
➡️ 포인트: 비동기 로직의 흐름을 제어할 때 필수 개념입니다.
Promise와 async/await
비동기 처리를 깔끔하게 표현할 수 있는 문법입니다.
async function loadData() {
const res = await fetch("/data");
const json = await res.json();
console.log(json);
}
➡️ 포인트: API 호출, DB쿼리, 파일 입출력 등 대부분 async로 처리됩니다. AJAX에도 함께 사용 가능합니다.
서버 배포(Deployment)
개발한 서버를 외부에서 접근 가능하게 만드는 과정입니다.
AWS, Naver Cloud, Vercel 등이 대표적 플랫폼입니다.
➡️ 참고: AWS EC2 가이드
환경 변수(.env)
비밀번호, API키 등을 코드 외부에 분리해 저장합니다.
DB_USER=admin
DB_PASS=1234
➡️ 포인트: .gitignore에 .env를 반드시 추가해야 합니다.
로깅(Logging)과 모니터링
서버에서 발생하는 동작과 오류를 기록하고 추적하는 과정입니다.
대표 도구: ELK(Elasticsearch + Logstash + Kibana), Grafana
➡️ 포인트: 장애 원인 파악, 성능 개선, 보안 감사의 핵심입니다.
마무리 – 데이터 흐름을 읽을 수 있으면 실무가 보인다
프론트엔드 → 서버 → DB → 응답으로 이어지는 구조를 이해하면 모든 개발의 중심이 잡힙니다.
비전공자라도 이 흐름만 숙지하면 협업과 문제해결 능력이 급격히 향상됩니다.
다음 편 예고
다음 편(5편)에서는 “실무에서 마주치는 예외 처리 & 트러블슈팅 핵심 25선” 으로 이어집니다.
에러를 두려워하지 않고 스스로 해결할 수 있는 ‘진짜 개발자’로 성장하세요.