프론트엔드 & 백엔드

식당의 홀과 주방처럼 웹도 앞과 뒤가 나뉩니다

지금 여러분이 보고 있는 이 학습 앱도 프론트엔드와 백엔드로 나뉘어 있습니다. 화면에 보이는 카드, 버튼, 애니메이션이 프론트엔드이고, 학습 진도를 저장하고 퀴즈 정답을 확인하는 로직이 백엔드입니다. AI 모델도 마찬가지입니다. ChatGPT의 대화창(프론트)과 GPT-4 엔진(백엔드)은 완전히 다른 세계입니다. 바이브코더로서 이 구분을 아는 것이 중요합니다.

사용자가 보고 클릭하는 부분이 프론트엔드, 데이터를 처리하고 저장하는 부분이 백엔드입니다. 둘 다 할 수 있으면 풀스택이라고 합니다.

Frontend(프론트엔드) — 사용자가 보고 상호작용하는 화면입니다. HTML, CSS, JavaScript(React, Vue 등)로 만듭니다. 식당의 '홀'입니다.

Backend(백엔드) — 서버에서 데이터를 처리하고 저장합니다. Python, Node.js, Java 등으로 만듭니다. 식당의 '주방'입니다.

Full-stack(풀스택) — 프론트와 백 모두 다루는 개발자입니다. Next.js 같은 프레임워크는 풀스택 개발을 쉽게 해줍니다.

Framework(프레임워크) — 앱의 뼈대를 제공하는 도구입니다. 프레임워크가 규칙을 정하고, 개발자는 그 안에서 코드를 작성합니다. (예: Next.js, Django) Library(라이브러리) — 특정 기능만 제공하는 도구입니다. 개발자가 필요할 때 골라 씁니다. (예: React, Lodash)

프론트엔드의 세계를 좀 더 들여다봅시다. 현대 프론트엔드 개발은 '레고 블록 조립'과 비슷합니다. 작은 조각(컴포넌트)을 만들고, 이것들을 조합해서 전체 화면을 완성합니다. AI 채팅 인터페이스를 만든다고 생각해보세요. '메시지 버블' 컴포넌트, '입력창' 컴포넌트, '사이드바' 컴포넌트를 각각 만들어 조합하면 됩니다.

Component(컴포넌트) — UI의 재사용 가능한 조각입니다. 버튼, 카드, 모달 등이 각각 하나의 컴포넌트입니다. 레고 블록처럼 조합합니다.

State(상태) — 컴포넌트가 기억하는 데이터입니다. '로그인됨/안됨', '다크모드 켜짐/꺼짐' 같은 것. 상태가 바뀌면 화면이 자동으로 업데이트됩니다.

DOM(Document Object Model) — 브라우저가 HTML을 이해하는 트리 구조입니다. React 같은 라이브러리는 Virtual DOM을 써서 변경된 부분만 효율적으로 업데이트합니다.

웹 화면을 '어디서 그릴 것인가'에 따라 여러 렌더링 방식이 나뉩니다. 이 부분이 바이브코더에게 가장 혼란스러운 영역 중 하나인데, 핵심만 잡으면 간단합니다. 브라우저에서 그리면 CSR, 서버에서 미리 그려 보내면 SSR, 빌드할 때 아예 완성해두면 SSG입니다. AI에게 '어떤 렌더링 방식이 좋을까?' 물어볼 때 이 차이를 알아야 합니다.

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 등이 있습니다.

같은 '사용자 목록 보여주기'도 프론트와 백에서 하는 일이 전혀 다릅니다. 백엔드는 데이터를 준비하고, 프론트엔드는 그것을 화면에 그립니다.

# ── 백엔드 (Python Flask) ──
# 서버에서 데이터를 준비하고 JSON으로 응답
@app.route("/api/users")
def get_users():
    users = db.query("SELECT * FROM users")
    return jsonify(users)  # JSON 응답

# ── 프론트엔드 (JavaScript React) ──
# 서버에서 받은 데이터를 화면에 표시
function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch("/api/users")         // 백엔드에 요청
      .then(res => res.json())   // JSON 파싱
      .then(data => setUsers(data));
  }, []);
  return users.map(u => <div>{u.name}</div>);
}

서버에서 HTML을 미리 만들어 보내는 렌더링 방식은?

Framework는 앱의 뼈대를 제공하고, Library는 특정 기능만 제공한다

React에서 UI를 재사용 가능한 조각으로 나눈 것을 무엇이라 하는가?

SSR로 받은 정적 HTML에 JS를 입혀 인터랙티브하게 만드는 과정은?

프론트엔드 & 백엔드