모던자바스크립트 41장 스터디

 

모던자바스크립트 스터디 17일차이다.

 

41장 타이머

오늘은 위 단원을 공부하고 모르는것을 정리했다.

 

---

 

# 쓰로틀링과 디바운싱

1. 디바운싱 

• 용도: 사용자의 반복적인 요청을 제어하고, 일정 시간 동안 특정 동작이 최대 횟수로 제한하는 데 사용
• 예시 시나리오: 사용자의 스크롤 이벤트에 따라 계속해서 서버에 요청이 가는 것을 방지하기 위해 스크롤 이벤트를 쓰로틀링하거나  자동 완성 기능에서 키 입력에 대한 검색 요청을 일정 시간 간격으로 제한하는 데 사용

2. 쓰로틀링 

• 용도: 연이어 발생하는 이벤트 중 마지막 이벤트를 기준으로 일정 시간이 지난 후에만 동작을 수행하도록 하는 데 사용
• 예시 시나리오: 검색 입력란에서 키 입력이 발생할 때, 마지막 키 입력 이후 일정 시간 동안 다른 키 입력이 없을 경우에만 검색 요청을 보내는 등의 상황에 활용

 

두 개념이 서로 비슷하면서 다른데 디바운싱은 요청이 들어오는대로 받아주지만 결국 실행하는건 가장 마지막 요청이고, 쓰로틀링은 요청을 한 번에 하나만 들어주고 아직 현재 실행하고 있는 턴이 종료되지 않은 상태라면 어떤 요청도 받아들이지 않는다.

---

# lodash 예시

 

npm install lodash @types/lodash

 

 

import { throttle, debounce } from 'lodash';

// 쓰로틀링 함수
const throttledFunction = throttle((req: express.Request, res: express.Response) => {
  res.send('Throttled Request');
}, 1000); // 1초에 한 번 실행

// 디바운싱 함수
const debouncedFunction = debounce((req: express.Request, res: express.Response) => {
  res.send('Debounced Request');
}, 1000); // 마지막 이벤트 이후 1초 동안 다른 이벤트가 없으면 실행

 

 

---

# express-rate-limit 활용

 

백엔드에서 스트롤링은 매우 중요하다.

쓰로틀링은 일반적으로 요청의 빈도를 제한함으로써 과도한 트래픽이나 부하를 방지하는 데 사용된다.

 

npm install express-rate-limit

 

import express from 'express';
import rateLimit from 'express-rate-limit';

const app = express();

// 쓰로틀링을 적용할 미들웨어
const limiter = rateLimit({
  windowMs: 60 * 1000, // 1분 동안
  max: 5, // 최대 5번의 요청 허용
  message: 'Too many requests from this IP, please try again after a minute.',
});

// 미들웨어를 모든 경로에 적용
app.use(limiter);

 

// 특정 엔드포인트에만 쓰로틀링 미들웨어 적용
app.get('/one', limiter, (req, res) => {
  res.send('Throttled Request');
});

// 다른 엔드포인트에는 쓰로틀링이 적용되지 않음
app.get('/other', (req, res) => {
  res.send('Unthrottled Request');
});

 

위처럼 express 미들웨어에 적용하면, API 엔드포인트에 대해 IP 주소당 횟수에 대한 동일한 제한을 적용하게 된다.

 

ip주소를 어떻게 아는지는 아래를 참고

express-rate-limit 미들웨어는 기본적으로 클라이언트의 IP 주소를 추출하여 각 요청에 대한 고유한 식별자로 사용한다.
이는 Express.js의 req.ip 속성을 통해 이루어진다.
미들웨어는 각 클라이언트의 IP 주소를 추적하여 해당 IP 주소에서의 요청 횟수를 제한한다.

 

 

---

 

# 참고

 

https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1%EA%B3%BC-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-e02f6bb14627