Phase 0: 코드를 치기 전에, 웹사이트가 어떻게 동작하는지 이해하기 — 브라우저부터 데이터베이스까지

본문

이 글은 웹 개발 학습 로드맵의 'Phase 0'으로, 본격적인 코딩 전에 웹이 어떻게 동작하는지 큰 그림을 잡는 것을 목표로 합니다. 저자는 암기가 아닌 이해를 강조하며, 나중에 참고용으로 돌아오면 된다고 안내합니다.

웹사이트는 '전 세계 어딘가의 컴퓨터에 저장된 파일들'

글은 웹사이트를 마법 같은 단일 개체가 아니라 인터넷을 통해 내 컴퓨터로 전달되는 파일의 모음으로 정의합니다. 레스토랑 비유로 전체 구조를 설명하는데, 손님은 사용자, 메뉴판은 HTML/CSS로 구성된 웹페이지, 주방은 서버, 레시피북은 애플리케이션 코드, 식료품 저장고는 데이터베이스, 웨이터는 요청과 응답을 나르는 HTTP에 해당합니다. 브라우저(Chrome, Firefox, Edge, Safari)는 요청을 보내고 HTML, CSS, JavaScript, 이미지를 받아 렌더링하는 '클라이언트'이며, 서버는 데이터 센터에서 항상 켜져 있으면서 요청을 수신·처리하고 응답을 돌려주는 컴퓨터입니다. 내 노트북도 로컬 서버를 띄우면 서버가 될 수 있다는 팁도 덧붙입니다.

프런트엔드, 백엔드, 데이터베이스의 역할

프런트엔드는 사용자가 보는 영역으로 HTML, CSS, JavaScript와 React, Angular, Vue 같은 기술이 속하며 레스토랑의 '홀'에 비유됩니다. 백엔드는 로그인 처리, 주문 내역 조회, 이메일 발송, 결제 같은 보이지 않는 로직을 담당하며 Node.js, Python(Django/Flask), Java, Go, PHP, Ruby가 예시로 듭니다. 데이터베이스는 '슈퍼 Excel'로 비유되는 정리된 저장소로, 관계형(MySQL, PostgreSQL)은 행과 열의 테이블, NoSQL(MongoDB, Firebase)은 JSON 같은 유연한 문서 형태로 데이터를 저장합니다.

HTTP 요청과 응답의 해부

google.com에 접속할 때 브라우저가 보내는 요청은 'GET / HTTP/1.1' 같은 시작 줄과 Host, User-Agent, Accept 같은 헤더로 구성됩니다. 응답은 'HTTP/1.1 200 OK'와 Content-Type 헤더, 그리고 실제 HTML 본문으로 돌아옵니다. 상태 코드는 200(성공), 301(영구 이동), 404(페이지 없음), 500(서버 오류), 403(권한 없음)이 핵심 예시로 정리됩니다.

URL, 도메인, IP, DNS

URL은 프로토콜(https://), 도메인, 포트(:443), 경로(/products/shoes), 쿼리(?color=red&size=10), 프래그먼트(#reviews)로 나뉘며 각 부분의 역할을 표로 설명합니다. 도메인은 142.250.190.46 같은 IP 주소의 사람이 읽기 쉬운 별칭이고, DNS가 도메인을 IP로 변환합니다. 비유로는 IP가 GPS 좌표, 도메인이 주소, DNS가 지도 앱입니다.

HTTPS와 GET/POST

HTTP는 평문 전송이라 같은 Wi-Fi의 누군가가 비밀번호를 읽을 수 있지만, HTTPS는 SSL/TLS로 암호화되며 포트도 80이 아닌 443을 씁니다. 현대 브라우저는 http:// 사이트에 'Not Secure' 경고를 표시하므로 비밀번호나 카드 정보를 입력해선 안 된다고 경고합니다. GET은 데이터를 읽는 용도로 URL에 파라미터가 노출되고 반복해도 안전하며 캐시·북마크가 가능하고, POST는 데이터를 제출하는 용도로 요청 본문에 담기며 중복 생성 위험이 있습니다. PUT, DELETE, PATCH 같은 다른 메서드는 API 단계에서 배우면 된다고 정리합니다.

전체 흐름과 DevTools 실습

Instagram 접속을 예로 'URL 입력 → DNS 조회 → 인터넷 전송 → 서버 수신 → 애플리케이션 로직 → 데이터베이스 질의 → 응답 생성 → 렌더링'까지의 여정이 약 200~500ms에 완료된다고 설명합니다. 실습 과제로는 DevTools(F12)의 Network 탭에서 httpbin.org/get을 열어 Request URL, Method, Status Code, Response Headers를 확인하고, /post에 GET을 보내 오류를 관찰하며, httpbin.org/status/200·404·500으로 상태 코드를 직접 확인하라고 안내합니다. 한 페이지가 완전히 로드되려면 HTML 외에 이미지·CSS·JS·폰트를 위한 30~100개 이상의 요청이 발생한다는 점도 강조합니다. 말미에는 Phase 1로 넘어가기 전 스스로 답해봐야 할 체크리스트가 제공됩니다.

원문: dev.to / 번역·요약: Trawling