집 > 기사 > 웹 프론트엔드 > 속도 제한의 기본: 작동 방식 및 사용 방법

속도 제한의 기본: 작동 방식 및 사용 방법

Barbara Streisand원래의: 2024-11-04 06:27:01881검색

속도 제한은 웹 개발에서 중요한 개념입니다. 이는 서버 안정성, 효율적인 리소스 할당 및 악의적인 공격으로부터의 보호를 보장합니다. 따라서 이 글에서는 속도 제한의 본질, 중요성, 다양한 구현 방법 및 기능을 보여주는 실제 사례를 자세히 살펴보겠습니다. 바로 들어가볼까요?

속도 제한이란 무엇입니까?

속도 제한은 웹 서비스나 서버로 들어오는 요청이나 트래픽의 양을 제어하는 데 사용되는 전략입니다. 애플리케이션을 남용으로부터 보호하고 공정한 리소스 분배를 보장하며 서비스 안정성을 유지하는 데 도움이 됩니다.

속도 제한을 사용하는 이유는 무엇입니까?

속도 제한을 사용해야 하는 몇 가지 이유는 다음과 같습니다.

악용 방지: 봇이나 악의적인 사용자가 요청으로 서버를 압도하는 것을 방지합니다.
리소스 관리: 모든 사용자가 리소스를 공평하게 사용하도록 보장합니다.
보안: 애플리케이션에서 일부 엔드포인트의 시도를 제한하여 무차별 대입 공격을 방지하는 데 도움이 됩니다.
비용 관리: 과도한 API 호출로 인한 예상치 못한 비용을 방지하는 데 도움이 됩니다.
성능: 서버의 응답성을 유지하고 가동 중지 시간의 위험을 줄입니다.

속도 제한 유형

고정 창(또는 단순) 속도 제한: 이 방법은 고정된 시간 창 내에서 요청을 제한합니다. 예를 들어 "분당 요청 100개"입니다."
슬라이딩 윈도우 속도 제한: 지난 몇 분 또는 몇 초 등 최근 기간 동안의 요청을 추적하고 제한하는 동적 시간 프레임입니다.
토큰 버킷 알고리즘: 이 방법은 토큰으로 채워진 "버킷"을 사용하여 요청을 관리합니다. 들어오는 각 요청은 토큰을 소비하며 버킷은 설정된 간격으로 다시 채워집니다. 이 접근 방식을 사용하면 전체 속도 제한을 유지하면서 트래픽 버스트를 허용할 수 있습니다.
리키 버킷 알고리즘: 토큰 버킷과 유사하지만 변형이 있습니다. 버킷이 가득 차면 초과 요청이 "누출"되거나 폐기되어 꾸준한 흐름을 유지합니다.

? 나는 Token Bucket 및 Leaky Bucket 알고리즘에 대해 잘 모르기 때문에 거짓말을 하지 않을 것입니다. 현재 프로젝트에는 필요하지 않았기 때문입니다. 그러나 고정 창과 슬라이딩 창은 가장 일반적으로 접하게 되는 유형입니다. 예를 들어, OpenAI의 GPT-4는 계층화된 제한이 있는 고정 창 속도 제한을 사용합니다. 첫 번째 계층에서는 분당 500개의 요청을 허용합니다. 이 접근 방식은 창이 재설정되기 직전에 사용자가 한도에 도달할 수 있으므로 트래픽 급증으로 이어질 수 있습니다.

속도 제한 작동 방식

일반적으로 프로세스에는 다음이 포함됩니다.

추적: 특정 기간 내에 사용자(주로 userId) 또는 IP가 얼마나 많은 요청을 했는지 모니터링합니다.
임계값: 제한을 정의합니다(예: 시간당 요청 100개).
응답: 제한이 초과되면 경고를 보내거나 추가 요청을 차단합니다(일반적으로 429 요청이 너무 많음 HTTP 상태 코드 사용).

속도 제한 구현: 실제 예

이제 속도 제한과 작동 방식에 대한 기본적인 이해를 마쳤으므로 우리가 만들 프로젝트에 이를 구현해 보겠습니다.

속도 제한을 보여주는 두 개의 프로젝트를 만듭니다.

GET 요청 예시
POST 요청 예시

기술 스택

프런트엔드: React(Vite 사용)
백엔드: Express(Node.js 프레임워크)

GET 요청 예시

원하는 이름으로 폴더를 만들고 VS 코드나 사용하는 코드 편집기에서 엽니다.

만든 폴더 안에 frontend와 backend라는 두 개의 폴더를 더 만듭니다.

그런 다음 백엔드 폴더로 CD를 이동하고 npm init -y 명령을 입력하여 package.json 파일을 초기화하세요

그 후 백엔드 폴더 안에 다음 npm 패키지를 설치하세요 ??

npm install express cors express-rate-limit

npm install -D nodemon

이 기능:

express: 웹 서버를 생성하고 API 경로를 처리합니다
cors: 프런트엔드가 백엔드와 안전하게 통신할 수 있도록 합니다
express-rate-limit: 너무 많은 요청으로부터 API를 보호합니다
nodemon: 개발 중에 서버를 자동으로 다시 시작합니다(그래서 우리는 D를 사용합니다)

그런 다음 속도 제한을 설정하는 데 사용할 index.js(원하는 대로 가능) 파일을 만듭니다.

잠시 설명할 이 코드를 복사하여 붙여넣은 후

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

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

각 부분의 역할은 다음과 같습니다.

처음 두 줄은 필요한 패키지를 가져옵니다
app = express()가 서버를 생성합니다
리미터는 다음과 같이 구성됩니다.
- windowMs: 15분 기간을 설정합니다(15 × 60 × 1000밀리초)
- 최대: 해당 창에서 IP 주소당 5개의 요청을 허용합니다
- message: 한도를 초과했을 때 사용자에게 표시되는 오류 메시지

그런 다음:

app.use(limiter)는 모든 경로에 속도 제한을 적용합니다
환영 메시지를 보내는 간단한 테스트 경로를 '/api/data'에 생성합니다
마지막으로 포트 5000에서 서버를 시작합니다

사용자가 동일한 IP에서 15분 동안 API에 100회 이상 접속하면 API에 액세스하는 대신 오류 메시지가 표시됩니다.

이제 어떻게 작동하는지 알았으니 package.json에 추가하여 자동 재시작을 활성화하겠습니다. ??

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

백엔드는 여기까지입니다.

프런트엔드를 설정할 차례입니다.

새 터미널을 열고 CD를 프론트엔드 폴더에 넣고 ??를 실행하세요.

npm install express cors express-rate-limit

npm install -D nodemon

다음 지침을 따르세요. TypeScript를 모른다면 JavaScript를 선택하라고 조언해 드리겠습니다.
필요하지 않은 일부 파일을 제거하여 약간의 정리 작업을 수행할 수 있습니다. 내 모습은 이렇습니다

The Basics of Rate Limiting: How It Works and How to Use It

완료되면 App.jsx를 열고 제가 설명할 코드를 붙여넣으세요 ??

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

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

현재 상황은 다음과 같습니다.

데이터 관리를 위한 useState와 API 요청을 위한 axios를 가져옵니다
두 가지 상태 변수를 만듭니다.
- response: 성공적인 API 응답을 저장합니다
- error: 오류 메시지를 저장합니다
fetchData 함수:
- 버튼을 클릭하면 호출됩니다
- API에서 데이터 가져오기 시도
- 응답 또는 오류 상태 업데이트
- try/catch를 사용하여 성공 및 오류 처리
UI에 표시되는 내용은 다음과 같습니다.
- 제목
- 요청을 실행하는 버튼
- API 응답(성공한 경우)
- 빨간색 오류 메시지(요청이 실패한 경우) 15분 이내에 버튼을 너무 많이 클릭하면 백엔드 제한으로 인해 속도 제한 오류 메시지가 표시됩니다!

이것이 GET 요청 예시의 전부입니다. 다음 예시로 넘어가겠습니다

POST 요청 예시

이 예에서는 첫 번째 예의 코드를 주석 처리하고 이 코드를 붙여넣을 수 있습니다 ??

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

첫 번째 예와 대부분의 코드가 동일하다는 것을 알 수 있지만 여기에는 몇 가지 주요 차이점이 있습니다. ??

양식 데이터를 처리하기 위해 bodyParser를 추가했습니다
양식 제출을 처리하는 POST 엔드포인트 생성

이 코드를 프런트엔드에도 붙여넣으세요

  npm create vite@latest .

여기서는 단순히 양식을 통해 서버에 요청하고 있습니다. 이것이 GET 예시와 어떻게 다른지 살펴보겠습니다.

단일 버튼 대신 양식을 사용합니다
formData로 양식 상태를 관리합니다.
handleInputChange로 입력 변경 사항을 처리합니다.
GET 대신 POST 요청을 사용합니다
녹색으로 성공 메시지 표시

이 양식에서는 15분 안에 5번의 제출이 허용됩니다. 그 이후에는 사용자에게 속도 제한 오류 메시지가 표시됩니다.

결론

자 여러분, 이 기사를 마치신 것을 축하드립니다 ?. 이제 속도 제한이 어떻게 작동하는지, 특히 돈이 관련된 대규모 프로젝트에서 작업하는 경우 프로젝트에서 속도 제한을 사용해야 하는 이유에 대한 아이디어를 가지셨기를 바랍니다. 궁금하신 점은 댓글로 편하게 질문해주세요. 즐거운 코딩 되셨나요?

위 내용은 속도 제한의 기본: 작동 방식 및 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript typescript json npm express Resource if for while select try catch Error Token auto using finally copy JS function this input idea http ui gpt axios

성명：

이전 기사：ES6에서 함수 매개변수를 구조분해할 때 루트 객체 이름을 유지하는 방법은 무엇입니까?다음 기사：ES6에서 함수 매개변수를 구조분해할 때 루트 객체 이름을 유지하는 방법은 무엇입니까?