개발 용어 한 번에 정리하기
: 3‑Tier(Web–WAS–DB)로 보는 프론트·백·DB·프레임워크
프레임워크, 프론트엔드, 백엔드, DB, WAS, 리버스 프록시…
용어가 한꺼번에 나오면 누구나 뒤엉킨 느낌이 드실 수 있습니다.
이 글은 “정답 암기”가 아니라, 각 용어가 어디 레이어(범주)에 속하는지부터 잡아드리는 것을 목표로 합니다.
1. 큰 그림: 3‑Tier(Web–WAS–DB)로 먼저 고정하기
전통적인 웹 서비스는 보통 Web(앞단) – WAS/App(로직) – DB(데이터)로 역할을 나눕니다. 요즘은 여기에 Reverse Proxy(NGINX), 캐시/세션(Redis) 같은 구성요소가 자주 붙습니다.
- 브라우저가 요청을 보내면,
- Reverse Proxy가 “어디로 보낼지(라우팅)”를 결정하고, 보안/로그/SSL 같은 공통 처리를 합니다.
- 프론트(정적 자원)은 파일(HTML/JS/CSS)을 내려주고,
- 백엔드(API)는 권한/업무 로직을 처리하며,
- DB는 데이터를 저장/조회하고,
- Redis는 “자주 쓰는 데이터/세션”을 빠르게 꺼내기 위해 선택적으로 사용합니다.
1-1) “정적 자원”과 “동적 응답”은 무엇이 다른가요?
여기서 초심자가 가장 많이 헷갈리시는 포인트가 정적(static) vs 동적(dynamic)입니다.
- 요청할 때마다 내용이 거의 변하지 않는 파일입니다.
- 예:
index.html,bundle.js,style.css, 이미지 - React/Vue/Angular로 “개발”하지만, 빌드 결과는 파일로 떨어집니다.
- 요청마다 결과가 달라질 수 있는 실행 결과입니다.
- 예: 로그인 사용자에 따라 다른 데이터, 권한에 따른 필터링
- 주로 백엔드(API)에서 처리합니다.
참고로, 프론트에도 “서버에서 HTML을 만들어 주는 방식(SSR, 예: Next.js)”이 있고, 이 경우 프론트 영역이 동적으로 동작하기도 합니다.
다만 입문 단계에서는 “React/Vue = 빌드하면 정적 파일이 나온다”라는 큰 틀부터 잡으시면 이해가 훨씬 편해집니다.
2. 언어 · 런타임 · 프레임워크 · WAS · DB · 도구 간의 연관 관계
Python, node.js, spring, react.. 용어는 많고, 뭐가 무슨 역할로 서로 엮여있는지 항상 헷갈리는데..
서로 다른 레이어의 단어들이 한 줄에 섞여 있기 때문입니다.
아래 “범주 지도”를 기준으로, 각각의 솔루션들이 어떤 관계로 엮여있는지 확인해보겠습니다.
2-1) 언어(Language): “무슨 문법으로 코드를 쓰는가”
- Java: 엔터프라이즈/대규모 서비스에서 역사적으로 강한 생태계
- JavaScript: 원래 브라우저용 언어로 시작, Node.js 등장 이후 서버에서도 활용
- TypeScript: JavaScript에 “타입(안전성)”을 더해 대규모 개발에 유리
- Python: 자동화/스크립팅/데이터 영역에서 강점
- C/C#: 시스템/성능 또는 .NET 생태계(특히 Windows 기반)에서 활용
언어는 “역할”이 아니라 “표현 방식”입니다. 예를 들어 JavaScript는 프레임워크가 아니라 언어이고,
React는 언어가 아니라 프론트엔드 라이브러리/프레임워크 쪽에 속합니다.
2-2) 런타임(Runtime): “쓴 코드를 실제로 실행시키는 엔진”
같은 언어라도 실행 환경이 다르면 생태계(툴/라이브러리/운영 방식)가 달라집니다. 특히 질문하신 Node.js와 JVM은 입문자 분들이 많이 헷갈리십니다.
2-3) 프레임워크(Framework): “구조/규칙/뼈대를 제공하는 도구”
프레임워크는 쉽게 말해 “혼자 만들면 제각각이 될 코드를, 일정한 규칙으로 만들게 해주는 뼈대”입니다.
프론트와 백엔드는 각각 프레임워크가 다르고, 목적도 다릅니다.
프론트엔드(React/Angular/Vue)
- 화면(UI) 상태 관리(예: 버튼 클릭, 입력 폼)
- 컴포넌트 기반으로 화면을 재사용 가능하게 구성
- 빌드하면 “정적 파일(HTML/JS/CSS)”로 만들어 배포
백엔드(Spring / Express / Nest)
- 대규모 조직에서 필요한 기능(보안, 인증, 트랜잭션, 관측)이 성숙하게 갖춰진 편입니다.
- 구조(레이어)와 규칙이 강해서 팀 개발/장기 운영에 유리합니다.
- Spring Boot 이후로는 “내장 서버” 덕분에 실행/배포가 더 단순해졌습니다.
- Node.js 위에서 API 서버를 빠르게 만들 수 있는 미니멀한 웹 프레임워크입니다.
- 자유도가 높아 작은 서비스/MVP에 빠르게 적용할 수 있습니다.
- 대신 규모가 커지면 “규칙/구조”를 팀이 스스로 정해야 하는 부담이 생길 수 있습니다.
- Express(또는 Fastify) 위에 “구조/규칙(모듈·DI·데코레이터)”을 얹은 프레임워크입니다.
- Spring처럼 구조를 잡고 싶을 때 Node 진영에서 자주 선택됩니다.
- “팀 개발/확장”을 염두에 둔 Node 백엔드라면 비교해 볼 만합니다.
3. WAS는 무엇이고, 왜 JEUS 같은 제품이 나오게 되었나요?
WAS(Web Application Server)는 특히 Java 생태계에서 많이 쓰이던 용어입니다. 과거에는 “웹 서버(Apache 등)”와 “애플리케이션 실행(Java EE 등)”을 분리해서 운영하는 구조가 일반적이었고, 기업 환경에서는 트랜잭션/보안/관리 기능이 강한 상용 WAS가 널리 쓰였습니다(예: JEUS).
- Spring Boot처럼 내장 서버를 포함한 형태가 보편화되면서 “WAS 설치/운영”을 직접 덜 하게 된 경우가 많습니다.
- Docker/클라우드 환경에서는 “애플리케이션을 컨테이너 단위로 배포”하며 경계가 더 흐려집니다.
- 다만 기업 환경에서는 여전히 WAS를 표준으로 쓰는 경우도 많고, 조직/규정/운영 방식에 따라 달라집니다.
4. DB는 왜 SQL이 필요하고, RDBMS vs NoSQL은 어떻게 고르면 좋을까요?
DB는 “데이터를 영구 저장하고, 안전하게 읽고 쓰는 계층”입니다. 입문 단계에서 가장 중요한 것은 특정 제품이 아니라 SQL/트랜잭션/인덱스 같은 기본기입니다.
| 구분 | 대표 제품 | 장점 | 주의/포인트 |
|---|---|---|---|
| RDBMS | MySQL, MariaDB, PostgreSQL, DB2 |
SQL로 구조화된 데이터 처리에 강하고, 트랜잭션/정합성이 성숙 |
스키마 설계(테이블/관계), 기본기가 중요 |
| NoSQL | MongoDB | 문서형(JSON) 데이터에 유리하고, 유연한 스키마 |
정합성/트랜잭션 요구에 따라 설계가 달라짐 |
| Cache | Redis | 자주 쓰는 데이터를 빠르게 제공 (성능/세션 공유) |
‘영구 저장’이 아니라 ‘보조 계층’으로 보는 편이 안전 |
- SELECT/JOIN/WHERE/GROUP BY
- 인덱스가 왜 필요한지(조회 속도)
- 트랜잭션/격리 수준의 감각(동시성)
- ORM(예: JPA, Prisma 등)은 그 다음에 “편의 도구”로 접근
5. Reverse Proxy (NGINX/WebtoB)는 왜 거의 항상 앞에 붙을까요?
Reverse Proxy는 초심자 입장에서 “굳이 왜 하나 더 두지?”라는 느낌이 들 수 있는데, 실무에서는 운영 편의 때문에 앞단을 정리하는 역할이 매우 큽니다.
- 라우팅:
/api는 백엔드로,/는 프론트로 보내기 - SSL 종료: 인증서/HTTPS를 앞에서 통합 관리
- 로그 표준화: 접속 로그/에러 로그를 한 곳에서 모으기
- 보안 헤더/접근 제어: 공통 정책을 중앙에서 적용
# 예시(개념): /api는 백엔드로, 나머지는 정적 자원으로
location /api/ { proxy_pass http://backend:3000/; }
location / { root /usr/share/nginx/html; try_files $uri /index.html; }6. “대체 가능한 것”과 “같이 쓰는 것”을 분리해 보겠습니다
초보자 입장에서 가장 큰 혼란은 “이게 저걸 대체하나요?”인데요, 원칙은 간단합니다. 같은 레이어 안에서는 대체 후보가 될 수 있고, 레이어가 다르면 보통 같이 씁니다.
| 레이어 | 서로 대체(선택지) | 대체가 아니라 ‘조합’ |
|---|---|---|
| 프론트 | React ↔ Vue ↔ Angular | 프론트 + Reverse Proxy + 백엔드(API) + DB |
| 백엔드 프레임워크 | Spring ↔ (Node 계열 프레임워크들) ↔ (Python 계열 프레임워크들) | 백엔드(로직) + DB(SQL) + 캐시(Redis) |
| DB(RDBMS) | MySQL ↔ MariaDB ↔ PostgreSQL ↔ DB2 | RDBMS + (필요 시) NoSQL + (필요 시) Redis |
| Reverse Proxy | NGINX ↔ WebtoB | Reverse Proxy + (내부) 여러 서비스 라우팅 |
| IDE/도구 | Eclipse ↔ IntelliJ(미표기) ↔ VSCode(미표기) / PyCharm 등 | IDE + Git + Docker + CI/CD |
7. 실제로는 이렇게 조합합니다(연계 예시 3개)
- 프론트: React
- 프록시: NGINX
- 백엔드: Node.js + NestJS
- DB: PostgreSQL
- 캐시/세션: Redis(선택)
- 프론트: (React 또는 Angular)
- 프록시: WebtoB 또는 NGINX
- 백엔드: Java + Spring
- WAS: JEUS(조직 표준인 경우)
- DB: DB2 또는 PostgreSQL
- 백엔드: Python(FastAPI 등)
- DB: PostgreSQL
- 캐시/큐: Redis(선택)
- 프록시: NGINX
8. 입문자 관점 학습 루트(“무엇부터 공부할지”가 막막할 때)
- HTTP 기본: 요청/응답, 상태코드, 쿠키/세션 개념
- 프론트 1개 선택: React(또는 Vue)로 화면 하나 만들기
- 백엔드 1개 선택: Node(Express/Nest) 또는 Spring으로 API 3개 만들기
- DB 연결: CRUD + 간단한 JOIN + 인덱스 감각
- Reverse Proxy: NGINX로 /api 라우팅 + 로그 확인
- Docker: 개발/운영 환경을 “한 번에 재현”해보기
- “도구/제품 이름”만 많이 아는 상태 → 실제로는 레이어가 안 잡혀서 계속 헷갈립니다.
- 그래서 이 글의 핵심은 기술을 외우는 것이 아니라 어디에 붙는 기술인지(레이어)를 먼저 고정하는 것입니다.
참고 자료(용어별 공식 문서 · 상세 확장용)
각 용어의 자세한 내용(명령/설정/운영 팁)은 아래 링크를 바탕으로 별도 글로 확장하시면 정리하기 좋습니다.
- MDN Web Docs: https://developer.mozilla.org/
- JavaScript: MDN JavaScript
- TypeScript: TypeScript Docs
- React: React
- Angular: Angular
- Vue: Vue Guide
- Node.js: Node.js Intro
- Express: Express
- NestJS: NestJS
- Spring: Spring Framework
- Spring Boot: Spring Boot
- Java(JVM): Java Docs
- PostgreSQL: PostgreSQL Docs
- MySQL: MySQL Docs
- MariaDB: MariaDB KB
- MongoDB: MongoDB Docs
- IBM Db2: IBM Db2 Docs
- NGINX: nginx.org
- Docker: Docker Concepts
- Kubernetes: Kubernetes Overview
- Eclipse: Eclipse
- PyCharm: PyCharm
- Bash: Bash Manual
'Tech Note > 개요 (개발)' 카테고리의 다른 글
| 5. WAS의 종류와 역할, 운영 툴 총 정리 (1) | 2026.01.16 |
|---|---|
| 4. 내부 마이크로서비스와 웹 프레임워크(Flask·Django·FastAPI) (1) | 2026.01.15 |
| 2. Node.js 운영 입문 - nvm or docker? (1) | 2026.01.09 |
| 1. 초보 개발자들의 학습 순서 (1) | 2026.01.04 |