수련  ›  중급 — 서비스로 확장  ›  CH2 / 7
중급 — 서비스로 확장 ⏱ 12분 +175 XP

서버와 백엔드의 개념

프론트엔드와 백엔드의 역할, 요청-응답과 HTTP 메서드, 라우팅, 그리고 서버를 신뢰의 경계로 두는 이유를 익힙니다.

🧑‍🏫
멘토 한마디
모르는 건 부끄러운 게 아니라 배울 게 남았다는 신호예요. 자, 시작해 볼까요? ✨

지금까지는 브라우저 안에서 보이는 것(프론트엔드)을 다뤘습니다. 이제 화면 뒤에서 데이터를 처리하고 보관하는 백엔드(서버)의 개념을 잡습니다. 코드를 직접 짜기 전에 '무엇이 어디서 일어나는가'를 아는 것이 먼저입니다.

프론트엔드 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.프론트엔드에서 '관리자만 버튼 숨기기'를 했다면 충분한가요?

📚 함께 보면 좋은 정보글

정보글
GPT로 웹앱 만들기
정보글
API 키 발급과 보관
정보글
챗GPT 코딩의 한계
AD