Ch.8 웹 개발 상식

프론트엔드와 백엔드 — 3계층 아키텍처

프론트엔드, 백엔드, 데이터베이스의 역할을 구분할 수 있다Next.js가 풀스택 프레임워크인 이유를 설명할 수 있다AI에게 프론트/백엔드 코드를 구분해서 요청할 수 있다

웹사이트에서 '좋아요'를 누르면 뒤에서 무슨 일이 일어날까?

SNS에서 좋아요 버튼을 누르면 화면에 하트가 채워집니다. 하지만 그 뒤에서는 서버에 요청이 전달되고, 데이터베이스에 기록되고, 다른 사용자에게도 반영됩니다.

눈에 보이는 화면 뒤에 복잡한 시스템이 숨어 있습니다. 이 구조를 모르면 AI에게 무엇을 요청해야 할지 모릅니다.

웹의 3계층 구조를 이해하면 AI에게 '프론트엔드 코드'와 '백엔드 코드'를 정확히 구분해서 요청할 수 있습니다.

article

핵심 내용

웹 서비스는 보통 3개 층으로 나뉩니다. 각 층이 맡은 역할이 다르고, 서로 협력해서 하나의 서비스를 만듭니다.

비유하면 레스토랑과 같습니다. 홀(프론트엔드) — 손님이 보는 공간, 메뉴판과 테이블 주방(백엔드) — 실제 요리하는 곳, 손님은 볼 수 없음 냉장고(데이터베이스) — 재료를 보관하는 곳

프론트엔드: 사용자가 보는 화면

API: 주문서 역할 (요청 전달)

백엔드: 비즈니스 로직 처리

DB: 데이터 영구 저장

Next.js의 특별함: 프론트엔드와 백엔드를 한 프로젝트에서 처리할 수 있습니다. 이런 프레임워크를 풀스택 프레임워크라고 부릅니다. 페이지도 만들고, API도 만들 수 있어서 바이브코더에게 특히 유리합니다.

바이브코더에게 중요한 이유 AI에게 "프론트엔드 코드인지 백엔드 코드인지" 구분해서 요청하면 훨씬 정확한 결과를 얻습니다. "클라이언트 컴포넌트로 만들어줘" vs "서버 API 라우트로 만들어줘" 이 한 마디 차이가 결과의 품질을 바꿉니다.

왜 나누는가? 관심사 분리. 화면이 바뀌어도 데이터 처리 로직은 그대로입니다. 마치 레스토랑 인테리어를 바꿔도 레시피는 그대로인 것처럼. 각 층이 독립적이면 한 부분만 수정해도 나머지는 영향받지 않습니다.

사용자가 보는 화면을 담당하는 층은?

Next.js는 프론트엔드만 처리할 수 있다

key

사용자가 보고 클릭하는 화면. React, Next.js 등으로 제작

비즈니스 로직 처리, 인증, 데이터 가공. Node.js, Python 등으로 제작

데이터를 영구 저장하고 조회. PostgreSQL, Supabase 등 사용

image

다이어그램: cc-d008

check_circle

퀴즈와 인터랙션으로 더 깊이 학습하세요