🌐 레슨

웹이 작동하는 법 — 클라이언트·서버·HTTP

① 오늘의 미션

손님이 가게 주소를 누르면?

손님이 주소창에 '우리동네 반찬가게' 주소를 넣고 Enter를 누르는 순간, 보이지 않는 곳에서 큰일이 벌어져요. 오늘은 그 요청과 응답의 원리를 직접 터미널로 확인해 봅니다.

설명을 읽고 오른쪽 터미널에서 직접 쳐보며 손님(브라우저)과 가게(서버)가 주고받는 모습을 눈으로 봐요.

설명을 따라 진행하면, 여기서 직접 쳐보게 돼요 👇

~/my-shop

$ _

📚 「웹이 작동하는 법 — 클라이언트·서버·HTTP」 레슨 내용 전체 텍스트로 훑어보기

손님이 가게 주소를 누르면?

설명을 읽고 오른쪽 터미널에서 직접 쳐보며 손님(브라우저)과 가게(서버)가 주고받는 모습을 눈으로 봐요.

손님이 주소창에 우리동네 반찬가게 주소를 넣고 Enter를 누르면 무슨 일이 일어날까요?

맞아요. 손님 브라우저(손님)가 서버(내 가게 주방)에 요청하면, 서버가 상품 페이지를 응답해요. 이 약속을 HTTP라고 불러요. 👇

우리동네 반찬가게에서 각각 무슨 일을 하나 눌러보세요.

💻 클라이언트: 손님 눈앞의 상품 화면·장바구니 클릭을 담당해요. '이 상품 페이지 주세요' 하고 요청하는 쪽.

🖥️ 서버: 상품 데이터·주문 처리를 맡아요. 요청을 받아 응답을 돌려주는, 우리 가게가 올라가 있는 멀리 있는 컴퓨터.

원리를 내 가게에 직접 확인해봐요. 먼저 우리 가게 서버를 띄워요. 이 순간 내 PC가 잠깐 서버 역할을 해요.

npm run dev — 가게 서버(개발 서버)를 켜요

서버가 켜졌어요. 이제 '손님 역할'로 이 서버에 요청을 보내볼게요.

이제 손님처럼 curl -I http://localhost:3000 으로 가게에 요청을 보내려고 해요. (-I=응답 머리말만 보기) 서버는 뭐라고 응답할까요?

맞아요. 서버는 '200 OK'(요청 성공)와 함께 어떤 내용을 보내는지 알려줘요. 직접 보낼까요? 👇

브라우저 대신 curl로 똑같은 요청을 보내봐요. 손님이 첫 페이지를 달라고 하는 것과 같아요.

curl -I http://localhost:3000 — 가게 첫 페이지를 요청해요 (응답 머리말 보기)

요청 → 200 OK + HTML 응답. 이게 손님이 주소창을 누를 때마다 일어나는 일이에요.

우리 가게 주소창에 자물쇠 아이콘이 보일 때의 그 's'요. (결제 받는 가게엔 특히 중요해요.)

맞아요. HTTPS = HTTP + 암호화예요. 손님과 가게 사이 대화(카드번호·주소 등)를 아무도 못 엿보게 자물쇠를 채운 거죠.

웹의 핵심을 한 단어로. 손님 브라우저가 서버에 보내는 건 무엇일까요?

맞아요. 요청(request) → 응답(response). 이 한 쌍의 반복이 웹의 전부예요.

서버는 상황마다 다른 상태 코드로 답해요. 일부러 없는 주소를 요청해 다른 응답을 받아봐요.

curl -s -o /dev/null -w "%{http_code}\n" http://localhost:3000 — 있는 상품 페이지를 요청해요

curl -s -o /dev/null -w "%{http_code}\n" http://localhost:3000/없는상품 — 없는 주소를 일부러 요청해요

200=성공, 404=없음. 서버는 늘 상태 코드로 손님에게 상황을 알려줘요.

손님이 주소창을 눌렀을 때 벌어지는 일의 순서를 맞춰보세요. (↑↓로 정렬)

정확해요! 입력 → 요청 → 응답 → 화면 표시. 페이지를 누를 때마다 이 한 바퀴가 돌아가요.

한 줄로

웹은 요청과 응답의 반복이에요. 손님(브라우저)이 내 가게(서버)에 주문하고, 가게가 상품 페이지(응답)를 내주는 거죠.

기억할 단어 3개

클라이언트=요청하는 손님 브라우저, 서버=응답하는 가게 컴퓨터, HTTP(S)=둘이 주고받는 약속(S는 보안).

다음 레슨에서

그 요청이 시작되는 곳이 바로 주소창이에요. 다음 'URL 해부 — 주소창의 모든 부분'에서, https부터 ?뒤의 글자까지 주소 한 줄을 통째로 읽어냅니다. 🌱