프론트엔드 & 백엔드
프론트는 화면, 백엔드는 로직과 데이터 — 풀스택은 둘 다 할 수 있는 사람이다.
식당에서 손님이 보는 홀과 주방은 완전히 다른 세계이다. 웹도 마찬가지로, 사용자가 보는 화면(프론트)과 서버 로직(백엔드)이 나뉜다.
식당의 홀과 주방처럼 웹도 앞과 뒤가 나뉩니다
지금 여러분이 보고 있는 이 학습 앱도 프론트엔드와 백엔드로 나뉘어 있습니다. 화면에 보이는 카드, 버튼, 애니메이션이 프론트엔드이고, 학습 진도를 저장하고 퀴즈 정답을 확인하는 로직이 백엔드입니다. AI 모델도 마찬가지입니다. ChatGPT의 대화창(프론트)과 GPT-4 엔진(백엔드)은 완전히 다른 세계입니다.
사용자가 보고 클릭하는 부분이 프론트엔드, 데이터를 처리하고 저장하는 부분이 백엔드입니다. 둘 다 할 수 있으면 풀스택이라고 합니다.
Frontend, Backend, Full-stack, Framework, Library, Component, State, SPA, SSR, SSG, CSR, Hydration, DOM, Bundler
Frontend(프론트엔드) — 사용자가 보고 상호작용하는 화면입니다. HTML, CSS, JavaScript(React, Vue 등)로 만듭니다. 식당의 '홀'입니다.
Backend(백엔드) — 서버에서 데이터를 처리하고 저장합니다. Python, Node.js, Java 등으로 만듭니다. 식당의 '주방'입니다.
Full-stack(풀스택) — 프론트와 백 모두 다루는 개발자입니다. Next.js 같은 프레임워크는 풀스택 개발을 쉽게 해줍니다.
Framework(프레임워크) — 앱의 뼈대를 제공하는 도구입니다. 프레임워크가 규칙을 정하고, 개발자는 그 안에서 코드를 작성합니다. (예: Next.js, Django) Library(라이브러리) — 특정 기능만 제공하는 도구입니다. 개발자가 필요할 때 골라 씁니다. (예: React, Lodash)
Frontend = 화면 (홀) — HTML, CSS, JS Backend = 로직·데이터 (주방) — Python, Node Full-stack = 둘 다 (Next.js가 대표) Framework = 뼈대 제공 / Library = 부품 제공
프론트엔드의 세계를 좀 더 들여다봅시다. 현대 프론트엔드 개발은 '레고 블록 조립'과 비슷합니다. 작은 조각(컴포넌트)을 만들고, 이것들을 조합해서 전체 화면을 완성합니다.
Component(컴포넌트) — UI의 재사용 가능한 조각입니다. 버튼, 카드, 모달 등이 각각 하나의 컴포넌트입니다. 레고 블록처럼 조합합니다.
State(상태) — 컴포넌트가 기억하는 데이터입니다. '로그인됨/안됨', '다크모드 켜짐/꺼짐' 같은 것. 상태가 바뀌면 화면이 자동으로 업데이트됩니다.
DOM(Document Object Model) — 브라우저가 HTML을 이해하는 트리 구조입니다. React 같은 라이브러리는 Virtual DOM을 써서 변경된 부분만 효율적으로 업데이트합니다.
Component = UI 레고 블록 (재사용 가능) State = 컴포넌트의 기억 (변하면 화면 갱신) DOM = HTML 트리 구조 (브라우저가 읽는 방식)
웹 화면을 '어디서 그릴 것인가'에 따라 여러 렌더링 방식이 나뉩니다. 브라우저에서 그리면 CSR, 서버에서 미리 그려 보내면 SSR, 빌드할 때 아예 완성해두면 SSG입니다.
SPA(Single Page Application) — 페이지 전환 없이 하나의 HTML로 동작하는 앱입니다. Gmail이 대표적입니다. CSR(Client-Side Rendering) — 브라우저(클라이언트)에서 JavaScript로 화면을 그립니다. SPA의 기본 방식입니다.
SSR(Server-Side Rendering) — 서버에서 HTML을 미리 만들어 보냅니다. 검색엔진 최적화(SEO)에 유리합니다. SSG(Static Site Generation) — 빌드 시점에 HTML을 미리 생성합니다. 블로그 같은 정적 사이트에 적합합니다.
Hydration(하이드레이션) — SSR로 받은 정적 HTML에 JavaScript를 '물처럼 부어' 인터랙티브하게 만드는 과정입니다. Bundler(번들러) — 여러 파일을 하나로 묶어주는 도구입니다. Webpack, Vite, Turbopack 등이 있습니다.
CSR = 브라우저에서 그림 / SSR = 서버에서 그림 SSG = 빌드 시 미리 생성 / SPA = 한 페이지 앱 Hydration = 정적 HTML + JS = 인터랙티브 Bundler = 파일 묶기 도구 (Vite, Webpack)
같은 '사용자 목록 보여주기'도 프론트와 백에서 하는 일이 전혀 다릅니다. 백엔드는 데이터를 준비하고, 프론트엔드는 그것을 화면에 그립니다.
백엔드(Flask)는 DB에서 데이터를 꺼내고, 프론트엔드(React)는 받은 데이터를 화면에 그린다.
백엔드 = DB에서 데이터 꺼내기 → 프론트엔드 = 받은 데이터 화면에 그리기. API가 둘을 연결합니다.
| 역할 구분 | 설명 |
|---|---|
| Frontend | 사용자가 보고 상호작용하는 화면 (홀) — HTML, CSS, JS |
| Backend | 서버에서 데이터 처리·저장 (주방) — Python, Node.js |
| Full-stack | 프론트 + 백 모두 다루는 개발자 (Next.js가 대표) |
| 프론트엔드 핵심 | 설명 |
|---|---|
| Component | UI의 재사용 가능한 조각 — 레고 블록처럼 조합 |
| State | 컴포넌트의 기억 데이터 — 변하면 화면 자동 갱신 |
| DOM | 브라우저가 HTML을 이해하는 트리 구조 |
| 렌더링 방식 | 설명 |
|---|---|
| CSR | 브라우저에서 JS로 화면 그림 (SPA 기본) |
| SSR | 서버에서 HTML 미리 생성 (SEO 유리) |
| SSG | 빌드 시 HTML 생성 (정적 사이트) |
| Hydration | SSR의 정적 HTML에 JS를 부어 인터랙티브하게 만듦 |
Framework는 뼈대를 제공하고 규칙을 정하며, Library는 필요할 때 골라 쓰는 도구입니다
서버에서 HTML을 미리 만들어 보내는 렌더링 방식은?
Framework는 앱의 뼈대를 제공하고, Library는 특정 기능만 제공한다
React에서 UI를 재사용 가능한 조각으로 나눈 것을 무엇이라 하는가?
SSR로 받은 정적 HTML에 JS를 입혀 인터랙티브하게 만드는 과정은?