# 웹 개발 소설: 3단계

"오늘은 우리 웹 성이 어떻게 작동하는지 조금 더 자세히 들여다볼 거예요," 선생님이 설명을 시작했습니다. "웹 세계에서는 두 개의 중요한 존재가 있어요. 바로 '클라이언트'와 '서버'랍니다."

선생님은 공중에 마법으로 두 개의 작은 성을 그렸습니다. 하나는 화려한 창문이 많은 성이었고, 다른 하나는 많은 서랍과 책장이 있는 도서관 같은 성이었습니다.

"이 창문이 많은 성은 '클라이언트'라고 해요. 바로 여러분이 사용하는 웹 브라우저죠. 크롬, 사파리, 파이어폭스 같은 것들이요. 이 창문들은 웹페이지를 보여주는 역할을 합니다."

"그리고 이 도서관 같은 성은 '서버'예요. 서버는 여러분이 필요로 하는 웹페이지의 정보를 모두 보관하고 있어요. 여러분이 웹사이트에 방문하면, 클라이언트가 서버에게 '이 페이지 좀 보여줄래?'라고 요청을 보내는 거죠."

선생님은 두 성 사이에 작은 마법 새를 날게 했습니다.

"이 새는 'HTTP 요청'이라고 해요. 클라이언트가 서버에게 정보를 요청할 때 이런 마법 새를 보내죠. 새는 '나 이 웹페이지가 필요해!'라는 메시지를 가지고 서버로 날아갑니다."

새가 도서관 성에 도착하자, 작은 도서관지기가 책을 꺼내 새에게 주었습니다.

"서버는 요청을 받으면, 필요한 HTML, CSS, JavaScript 파일들을 찾아서 다시 클라이언트에게 보내줍니다. 이걸 'HTTP 응답'이라고 해요."

새가 다시 창문 많은 성으로 날아가 책을 전달했습니다.

"클라이언트는 이 파일들을 받아서 해석한 다음, 여러분의 화면에 예쁘게 표시해 주는 거랍니다. HTML은 구조를 만들고, CSS는 꾸미고, JavaScript는 동작을 추가하죠."

선생님은 간단한 코드를 공중에 그렸습니다:

```javascript

// 서버에서 정보를 요청하는 JavaScript 코드

fetch('https://www.날씨정보.com/서울')

  .then(response => response.json())

  .then(data => {

    document.querySelector('#온도').textContent = data.현재온도;

    document.querySelector('#날씨').textContent = data.날씨상태;

  });

```

"이 코드는 fetch (가져오다) ('https://www.날씨정보.com/서울' (이 주소에서)) .then (그 다음에) (response (응답을) => response.json() (JSON 형식으로 변환)) .then (그 다음에) (data (데이터를) => { (가지고 다음을 실행해): document.querySelector('#온도') (온도 표시 요소를 찾아).textContent (그 내용을) = data.현재온도 (데이터의 현재온도로 설정); document.querySelector('#날씨') (날씨 표시 요소를 찾아).textContent (그 내용을) = data.날씨상태 (데이터의 날씨상태로 설정); });"

"'fetch'는 마법 새를 보내는 주문이에요. 날씨 정보를 가진 서버에 새를 보내 정보를 요청하는 거죠. 그리고 '.then'은 '새가 돌아오면 이렇게 하세요'라는 지시예요. 새가 가져온 정보로 웹페이지의 온도와 날씨 부분을 업데이트하는 거랍니다."

선생님은 웃으며 말했습니다. "이런 방식으로 여러분의 날씨 앱, 쇼핑몰, 게임 등 모든 웹사이트가 작동해요. 클라이언트와 서버가 계속 대화하면서 필요한 정보를 주고받는 거죠."

"다음 시간에는 실제로 간단한 웹페이지를 만들어볼 거예요. 궁금한 점이 있나요, 초보 마법사님?"