🧑🏫
멘토 한마디
모르는 건 부끄러운 게 아니라 배울 게 남았다는 신호예요. 자, 시작해 볼까요? ✨
지금까지는 브라우저 안에서 보이는 것(프론트엔드)을 다뤘습니다. 이제 화면 뒤에서 데이터를 처리하고 보관하는 백엔드(서버)의 개념을 잡습니다. 코드를 직접 짜기 전에 '무엇이 어디서 일어나는가'를 아는 것이 먼저입니다.
프론트엔드 vs 백엔드
- 프론트엔드 — 사용자의 브라우저에서 돌아가는 부분. 화면, 버튼, 입력. 누구나 코드를 볼 수 있습니다.
- 백엔드 — 서버에서 돌아가는 부분. 데이터베이스 접근, 비밀 키 보관, 로그인 처리, 핵심 로직. 사용자에게 코드가 보이지 않습니다.
핵심 브라우저는 사용자가 마음대로 조작할 수 있는 '남의 컴퓨터'입니다. 그래서 정말 중요한 검증과 비밀은 항상 백엔드에서 처리합니다. 백엔드는 신뢰의 경계입니다.
요청과 응답
프론트와 백엔드는 요청(request)과 응답(response)으로 대화합니다. 브라우저가 '이 데이터 주세요'라고 요청하면, 서버가 처리해 응답을 돌려줍니다. 이 한 번의 주고받음이 웹의 기본 단위입니다.
HTTP 메서드: 요청의 종류
요청에는 '무엇을 하려는지' 알려주는 메서드가 붙습니다.
| 메서드 | 의미 | 예 |
|---|---|---|
| GET | 데이터 조회(읽기) | 게시글 목록 가져오기 |
| POST | 새 데이터 생성 | 회원가입, 글 작성 |
| PUT / PATCH | 기존 데이터 수정 | 프로필 변경 |
| DELETE | 데이터 삭제 | 글 삭제 |
GET은 '읽기만' 한다는 약속입니다. 그래서 데이터를 바꾸는 일은 POST·PUT·DELETE로 합니다. GET 요청만으로 무언가를 삭제·변경하도록 만들면 위험합니다.
라우팅: 주소에 따라 다른 처리
서버는 들어온 요청의 주소(경로)와 메서드를 보고 알맞은 처리를 고릅니다. 이를 라우팅(routing)이라고 합니다. 예를 들어 GET /users는 사용자 목록을, POST /users는 새 사용자 생성을 맡는 식입니다. 같은 /users 주소라도 메서드에 따라 다른 일을 합니다.
GET /posts → 글 목록 조회
POST /posts → 새 글 작성
DELETE /posts/42 → 42번 글 삭제정적 vs 동적
미리 만들어 둔 파일을 그대로 주는 것이 정적, 요청마다 서버가 계산해 만들어 주는 것이 동적입니다. '로그인한 내 이름이 보이는 페이지'처럼 사람마다 다른 화면은 동적이며 백엔드가 필요합니다.
주의 프론트엔드에서 한 검증(예: '관리자만 버튼 숨기기')은 눈속임일 뿐입니다. 사용자는 요청을 직접 만들어 보낼 수 있으므로, 권한·금액·재고 같은 중요한 판단은 반드시 백엔드에서 다시 검증해야 합니다.
AD
이해도 퀴즈 (10문항)
정답 6개 이상 → +175 XP배운 내용을 정확히 점검해 보세요. 10문항 중 6문항 이상 맞히면 챕터가 완료되고 경험치(XP)가 적립됩니다. 난이도는 문항마다 하·중·상으로 섞여 있어요.
하 쉬움중 보통상 어려움
하
Q1.프론트엔드와 백엔드의 차이로 옳은 것은?
상
Q2.정말 중요한 검증과 비밀을 백엔드에서 처리해야 하는 이유는?
중
Q3.프론트와 백엔드가 대화하는 웹의 기본 단위는?
중
Q4.데이터를 '조회(읽기)'할 때 주로 쓰는 HTTP 메서드는?
중
Q5.회원가입처럼 새 데이터를 생성할 때 적절한 메서드는?
상
Q6.GET 요청만으로 데이터를 삭제·변경하게 만들면 위험한 이유는?
중
Q7.서버가 요청의 주소(경로)와 메서드를 보고 알맞은 처리를 고르는 것을 부르는 말은?
중
Q8.'GET /users'와 'POST /users'의 관계로 옳은 것은?
하
Q9.'로그인한 내 이름이 보이는 페이지'처럼 사람마다 다른 화면은?
상
Q10.프론트엔드에서 '관리자만 버튼 숨기기'를 했다면 충분한가요?
← 이전 챕터 · CH1
Git 버전관리 기초
commit으로 작업을 저장하고, push로 공유하고, 실수를 안전하게 되돌리는 흐름을 익힙니다.
다음 챕터 · CH3 →
API 호출 기초
fetch로 서버에서 데이터를 받아오고, JSON을 다루고, API 키를 안전하게 보관하는 기본기를 익힙니다. 계속 이어가기 🚀
📚 함께 보면 좋은 정보글
AD