Express를 갖춘 소형 서버

Node.js와 Express로 자신만의 서버를 구축해. 첫 번째 API는 첫 번째 요청에 응답해.

보여줄게: 서버 설정

Express는 Node.js에서 서버를 구축하는 데 가장 인기 있는 패키지야. 작업을 단 몇 줄로 바꿔줍니다. 서버는 React 앱과 별개로 별도의 프로젝트야(기억해: 프론트엔드와 백엔드는 두 부분야). 터미널에서:

cd Desktop
mkdir my-server
cd my-server
npm init -y
npm install express

-mkdir폴더를 생성하고(디렉토리 만들기), -npm init -y새로운 Node.js 프로젝트를 설정해(생성package.json), -npm install express익스프레스를 다운로드해.

VS Code에서 폴더를 열고 라는 파일을 만듭니다.server.js:

const express = require("express");
const app = express();

// When someone sends a GET to /api/hello, respond
app.get("/api/hello", (request, response) => {
  response.json({ message: "Hi! This is your own server. 🎉" });
});

app.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

실행해:

node server.js

그리고 열어http://localhost:3900/api/hello네 브라우저에서. JSON 응답이 보이나요? 방금 서버를 구축했어. 마법은 없어 – 10줄.

코드에서 무슨 일이 일어나고 있나요?

-require("express")– 패키지(서버측 버전)를 빌립니다.import). -app.get("/api/hello", ...)– “이 주소에서 GET 요청에 응답해.” 해당 주소 + 응답 쌍을 엔드포인트라고 해. -response.json({...})– JSON을 다시 보냅니다. -app.listen(3900)– 포트 3900에서 수신해. (Vite는 3901에서 실행되고 서버는 3900에서 실행돼. – 두 프로그램은 동일한 포트에서 수신할 수 없어.)

Ctrl+C를 사용하여 서버를 중지해. 그리고 조심해: 코드가 변경될 때마다 서버를 중지하고 다시 시작해야 해. 서버는 Vite가 아니며 자체적으로 새로 고쳐지지 않어.

보여줄게: 데이터가 있는 서버

서버는 일반적으로 데이터를 전달해. 위에 두 번째 엔드포인트를 추가해.listen:

const results = [
  { opponent: "Lakeside", score: "3:1", home: true },
  { opponent: "Northgate", score: "2:2", home: false },
  { opponent: "Elmwood", score: "4:0", home: true },
];

app.get("/api/results", (request, response) => {
  response.json(results);
});

서버를 다시 시작하고 엽니다.http://localhost:3900/api/results– 네 데이터는 API를 통해 제공돼. 이것이 바로 모든 대형 웹사이트가 작동하는 방식야(배열 대신 데이터베이스를 사용하여).

네 차례 💪

가이드에 따라 서버를 실행해.
프로젝트의 데이터가 포함된 엔드포인트를 추가해. 🏫/api/menu(일주일 동안의 식사 배열) · 🙋/api/favorites(네 인기 게임/책) · 🌍/api/trips(여행 목록) · ⚽/api/results(경기 결과).
재미있는 엔드포인트 추가/api/random매번 다른 메시지를 반환해.

const messages = ["We're winning today!", "Practice at 5 PM!", "Let's go, Eagles!"];

app.get("/api/random", (request, response) => {
  const random = messages[Math.floor(Math.random() * messages.length)];
  response.json({ message: random });
});

브라우저에서 모든 엔드포인트를 시험해 본 다음 다음 중 하나를 호출해 봐.fetch()지난 강의에서 배운 방식으로 콘솔에서

⚠️

**"Cannot GET /api/..."**는 엔드포인트가 존재하지 않음을 의미해. 주소에 오타가 있는지 확인하고 주소를 변경한 후 서버를 다시 시작했는지 확인해. **"EADDRINUSE"**는 포트 3900이 이미 사용 중임을 의미해. 아마도 다른 터미널에서 실행 중인 이전 서버가 있을 것야. 찾아서 중지해(Ctrl+C).

✅

**직접 확인해:** 서버는 포트 3900에서 실행되며 자체 JSON 데이터로 여러 엔드포인트에서 응답해. 프런트엔드를 알고 백엔드에서 시작해. 남은 것은 이들을 연결하는 것뿐야. 우리는 다음 강의에서 방명록을 가지고 그 일을 정확히 할 것야.

이번 수업에서 배울 점

Express의 서버:npm init -y,npm install express,node server.js, Ctrl+C를 눌러 중지하고 변경이 있을 때마다 다시 시작해.
엔드포인트 = 주소 + 응답:app.get("/api/something", (request, response) => response.json(...)).
프론트엔드(3901)와 백엔드(3900)는 두 개의 포트에 있는 두 개의 프로그램야.