한국어

유럽

아시아

← 레벨 3 – 마스터

수업 7/10 ⏱ 20 분 프리미엄

서버란 무엇이며 Node.js의 용도는 무엇야??

웹사이트가 실제로 존재하는 위치, API가 무엇인지, 레벨 2 양식이 메시지를 보낼 곳이 없는 이유.

수신자가 없는 양식을 기억하시나요?

레벨 2에서는 메시지를 확인하고 감사하다고 말한 다음 메시지를 버리는 양식을 작성했어. 구할 곳이 없었어. 지금까지 네 웹사이트는 미리 만들어진 파일만 배포할 수 있으며 아무것도 수신하고 기억할 수 없어. 그러기 위해서는 서버가 필요해. 이것이 바로 여러분이 구축하는 방법을 배우려는 것야.

프론트엔드와 백엔드

모든 대규모 애플리케이션(Instagram, 온라인 학교, 온라인 상점)에는 두 부분이 있어.

두 반쪽은 어떻게 서로 대화하나요? API(애플리케이션 프로그래밍 인터페이스)를 통해 - 백엔드가 응답하는 합의된 주소야. 다음은 샘플 대화야.

Frontend:  GET /api/messages         ("Send me all the messages.")
Backend:   [{ "name": "Grandma", "text": "Lovely website!" }]

Frontend:  POST /api/messages        ("Here's data, save it: ...")
Backend:   { "saved": true }

데이터는 JSON 형식으로 전송돼. 이는 퀴즈에서 알고 있는 JavaScript 개체와 거의 똑같어. 행운의 우연? 아니요 – JSON은 JavaScript Object Notation을 나타냅니다. 그것은 너 편야.

그런 백엔드는 어디에서 실행되나요?

개발하는 동안 자신의 컴퓨터(localhost – Vite에서 알고 있음)에서. 프로덕션에서는 항상 켜져 있고 연결되어 있는 컴퓨터에서 임대한 서버 “슬라이스”(VPS) 또는 모든 것을 처리하는 서비스(렌더링, 철도…)야. 마지막 강의에서 배포를 시작할 거야.

💡
**그럼 GitHub 페이지는 무엇을 위한 것인가요?** 프런트엔드만을 위한 호스팅야. 파일을 전달하는 것 이상은 아닙니다. 레벨 1~2 웹사이트에 적합해(또한 가장 안전해. 아무것도 실행되지 않고 해킹될 수도 없어). 웹사이트가 메시지, 가입, 사용자 등을 수신하고 기억해야 하는 순간에 백엔드가 필요해.

네 차례 💪 (호기심으로 만든 미니미션)

  1. 즐겨찾는 웹사이트를 열고 F12를 누른 다음 네트워크 탭으로 전환해. 페이지를 다시 로드하고 요청의 폭포수를 살펴보세요. 모든 라인은 브라우저와 서버 간의 하나의 대화야.
  2. 찾기GET목록의 요청과 JSON을 반환하는 요청(유형 열:json또는fetch). 그것을 클릭하고 응답을 살펴보세요. 페이지가 작성된 데이터를 볼 수 있어.
  3. 다음을 콘솔에 입력하고 프런트엔드가 자체적으로 데이터를 요청하는 것을 지켜보세요.
fetch("https://api.chucknorris.io/jokes/random")
  .then((response) => response.json())
  .then((data) => console.log(data.value));

fetch(...)JavaScript 명령 “API 호출”야. 9과에서는 바로 이 명령을 사용하여 양식을 자신의 서버에 연결하게 돼.

✅
**직접 확인해:** 프런트엔드와 백엔드의 차이점을 자신의 말로 설명할 수 있고, GET, POST, JSON이 무엇인지 알고 있으며, 웹사이트가 서로 통신하는 방식을 네트워크 패널에서 확인했어. 다음 단원에서는 이와 같은 서버를 직접 구축해 보겠어.

이번 수업에서 배울 점

© 2026 Ing. Martin Polak / AlgoRhino · 콘텐츠 이용 약관