프론트엔드·백엔드·렌더링 — 화면은 어디서 그려지나 — 실습 Lab

INCIDENT RESPONSE

0 / 5 단계 완료

📚 PREREQUISITES

Theorysw-engineering/frontend-backend-rendering

TRACK

SW-ENGINEERING

SLA

45분

LEVEL

입문

PHASES

3단계

ENV

local

INCOMING TICKET

“팀장: "새로 들어온 화면이 왜 이렇게 느리냐, SEO는 왜 안 잡히냐는 문의가 계속 와요. 그런데 이게 프론트 문제인지 백엔드 문제인지 아무도 딱 잘라 말을 못 합니다. 우리 서비스의 요청 흐름을 그려서 어디가 프론트엔드고 어디가 백엔드인지, 화면은 어디서 그려지는지, 문제가 나면 어느 쪽을 봐야 하는지 정리해 주세요."”

YOUR ROLE

서비스 구조를 파악해야 하는 주니어 개발자/PM

안 하면 나중에

프론트엔드와 백엔드의 경계를 못 그으면, 성능·보안·SEO 문제가 났을 때 엉뚱한 쪽을 붙잡고 시간을 태운다. 비밀키를 프론트에 두는 것 같은 경계 오인은 그대로 보안 사고가 된다.

📋상황 브리핑

팀장이 말합니다.

"주문 목록 화면이 느리다는 문의가 오는데, 프론트가 느린 건지 서버가 느린 건지 아무도 딱 잘라 말을 못 해요. 검색에 안 잡힌다는 얘기도 나오고요. 우리 서비스가 브라우저에서 서버까지 어떻게 요청이 오가는지, 화면은 대체 어디서 그려지는지부터 그림으로 정리해 주세요. 그래야 다음에 문제가 났을 때 프론트팀을 부를지 백엔드팀을 부를지 알 수 있잖아요."

프론트엔드/백엔드는 "누가 더 어려운가"의 문제가 아니라 "무엇이 어디서 도는가"의 경계 문제다. 이 Lab은 요청 흐름에서 경계를 먼저 식별하고, 화면이 어디서 그려지는지(렌더링 방식)를 판단한 뒤, 두 영역이 API로 어떻게 대화하는지까지 정리해 "문제를 어느 쪽에서 고칠지"를 스스로 짚을 수 있게 만든다.

⏱ 45분📊 입문🔧 3단계#frontend#backend#rendering#csr

MISSION

요청 흐름에서 경계 식별 — 무엇이 어디서 도나

한 번의 화면 요청이 브라우저에서 서버까지 오가는 흐름을 그리고, 어디까지가 프론트엔드(브라우저)이고 어디부터가 백엔드(서버)이며 그 사이를 잇는 게 API인지 식별한다.

렌더링 방식 판단 — 화면을 어디서 그리나

같은 화면이라도 브라우저에서 그리는지(CSR), 서버에서 그리는지(SSR), 미리 만들어 두는지(SSG)에 따라 초기 속도·SEO·서버 부하가 어떻게 갈리는지 이해하고, 예시 서비스에 맞는 방식을 근거와 함께 고른다.

FE-BE는 API로 대화한다 — 문제는 어느 쪽에서 고치나

프론트엔드와 백엔드가 API로 주고받는 요청-응답의 형태(상태코드·인증 토큰이 어디에 실리나)를 정리하고, 증상별로 어느 쪽(FE/BE/API 계약)을 봐야 하는지 판단하는 체크리스트를 만든다.

📌 선수 지식

• [이론] sw-engineering/frontend-backend-rendering

ℹ️ 실습 환경

환경: local

🔒

실습 실행은 Pro 플랜 전용입니다

인시던트 브리프와 학습 자료는 지금 바로 확인할 수 있습니다. 실제 실습 진행 및 터미널 사용은 Pro 플랜에서 가능합니다.

Pro로 업그레이드 →

>_ LAB TERMINAL↔ 너비 조절

NOTES