JavaScript에서 단일 스레드 함정을 피하는 방법-JS 튜토리얼-php.cn

How to Avoid the Single-Threaded Trap in JavaScript

JavaScript는 종종 단일 스레드로 설명되는데, 이는 한 번에 하나의 작업을 실행한다는 의미입니다. 그러나 이는 HTTP 응답이나 데이터베이스 요청과 같은 비동기 작업을 기다리는 동안 다른 작업을 처리할 수 없는 상태에서 모든 코드 조각이 완전히 격리되어 실행된다는 것을 의미합니까? 대답은 아니요! 실제로 JavaScript의 이벤트 루프와 Promise를 사용하면 다른 코드가 계속 실행되는 동안 비동기 작업을 효율적으로 처리할 수 있습니다.

진실은 자바스크립트가 실제로 단일 스레드라는 것입니다. 그러나 이 작동 방식을 잘못 이해하면 일반적인 함정에 빠질 수 있습니다. 그러한 함정 중 하나는 특히 경쟁 조건을 유발하지 않고 공유 리소스에 대한 액세스를 제어하려고 할 때 API 요청과 같은 비동기 작업을 관리하는 것입니다. 실제 사례를 살펴보고 잘못된 구현이 얼마나 심각한 버그로 이어질 수 있는지 살펴보겠습니다.

데이터를 업데이트하려면 백엔드 서비스에 로그인해야 하는 애플리케이션에서 버그를 발견했습니다. 로그인하면 앱은 지정된 만료 날짜가 있는 액세스 토큰을 받게 됩니다. 이 만료 날짜가 지나면 업데이트 엔드포인트에 새로운 요청을 하기 전에 다시 인증해야 했습니다. 로그인 엔드포인트는 5분마다 최대 1개의 요청으로 제한되는 반면, 업데이트 엔드포인트는 동일한 5분 기간 내에 더 자주 호출되어야 했기 때문에 문제가 발생했습니다. 로직이 올바르게 작동하는 것이 중요했지만 로그인 엔드포인트가 5분 간격 내에 가끔 여러 번 트리거되어 업데이트 엔드포인트가 작동하지 않게 되었습니다. 모든 것이 예상대로 작동하는 경우도 있었지만, 이러한 간헐적인 버그는 처음에는 보안에 대한 잘못된 인식을 심어 시스템이 제대로 작동하는 것처럼 보일 수 있어 더욱 심각한 위험을 초래했습니다._

이 예를 설명하기 위해 다음 서비스가 포함된 매우 기본적인 NestJS 앱을 사용하고 있습니다.

AppService: 때로는 작동하고 때로는 작동하지 않는 나쁜 버전과 항상 제대로 작동하도록 보장되는 좋은 버전이라는 두 가지 변형을 시뮬레이션하는 컨트롤러 역할을 합니다.
BadAuthenticationService: 잘못된 버전에 대한 구현
GoodAuthenticationService: 좋은 버전을 구현합니다.
AbstractAuthenticationService: GoodAuthenticationService와 BadAuthenticationService 간의 공유 상태를 유지하는 역할을 담당하는 클래스입니다.
LoginThrottleService: 백엔드 서비스에 대한 로그인 엔드포인트의 조절 메커니즘을 시뮬레이션하는 클래스입니다.
MockHttpService: HTTP 요청을 시뮬레이션하는 데 도움이 되는 클래스
MockAwsCloudwatchApiService: AWS CloudWatch 로깅 시스템에 대한 API 호출을 시뮬레이션합니다.

여기서 모든 클래스의 코드를 표시하지는 않겠습니다. GitHub 저장소에서 직접 찾을 수 있습니다. 대신, 로직이 올바르게 작동하기 위해 무엇을 변경해야 하는지에 대해 구체적으로 집중하겠습니다.

나쁜 접근 방식:

@Injectable()
export class BadAuthenticationService extends AbstractAuthenticationService {
  async loginToBackendService() {
    this.loginInProgress = true; // this is BAD, we are inside a promise, it's asynchronous. it's not synchronous, javascript can execute it whenever it wants

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com/login`, {
          password: 'password',
        }),
      );

      return response;
    } finally {
      this.loginInProgress = false;
    }
  }

  async sendProtectedRequest(route: string, data?: unknown) {
    if (!this.accessToken) {
      if (this.loginInProgress) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        return this.sendProtectedRequest(route, data);
      }

      try {
        await this.awsCloudwatchApiService.logLoginCallAttempt();
        const { data: loginData } = await this.loginToBackendService();
        this.accessToken = loginData.accessToken;
      } catch (e: any) {
        console.error(e?.response?.data);
        throw e;
      }
    }

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com${route}`, data, {
          headers: {
            Authorization: `Bearer ${this.accessToken}`,
          },
        }),
      );

      return response;
    } catch (e: any) {
      if (e?.response?.data?.statusCode === 401) {
        this.accessToken = null;
        return this.sendProtectedRequest(route, data);
      }
      console.error(e?.response?.data);
      throw e;
    }
  }
}

로그인 후 복사

이것이 나쁜 접근 방식인 이유:

BadAuthenticationService에서 loginToBackendService 메소드는 로그인 요청을 시작할 때 this.loginInProgress를 true로 설정합니다. 그러나 이 방법은 비동기식이므로 로그인 상태가 즉시 업데이트된다는 보장은 없습니다. 이로 인해 제한 한도 내에서 로그인 엔드포인트에 대한 여러 동시 호출이 발생할 수 있습니다.
sendProtectedRequest는 액세스 토큰이 없음을 감지하면 로그인이 진행 중인지 확인합니다. 그렇다면 함수는 1초 동안 기다린 후 다시 시도합니다. 그러나 이 시간 동안 다른 요청이 들어오면 추가 로그인 시도가 발생할 수 있습니다. 이로 인해 로그인 엔드포인트에 대한 여러 호출이 발생할 수 있으며, 이는 1분마다 한 번의 호출만 허용하도록 제한됩니다. 결과적으로 업데이트 엔드포인트가 간헐적으로 실패하여 시스템이 때때로 제대로 작동하는 것처럼 보일 때 예측할 수 없는 동작과 잘못된 보안 인식을 유발할 수 있습니다.

요약하면 문제는 비동기 작업을 부적절하게 처리하는 데 있으며, 이는 애플리케이션의 논리를 깨뜨릴 수 있는 잠재적인 경쟁 조건으로 이어집니다.

좋은 접근 방식:

@Injectable()
export class GoodAuthenticationService extends AbstractAuthenticationService {
  async loginToBackendService() {
    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com/login`, {
          password: 'password',
        }),
      );

      return response;
    } finally {
      this.loginInProgress = false;
    }
  }

  async sendProtectedRequest(route: string, data?: unknown) {
    if (!this.accessToken) {
      if (this.loginInProgress) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        return this.sendProtectedRequest(route, data);
      }

      // Critical: Set the flag before ANY promise call
      this.loginInProgress = true;

      try {
        await this.awsCloudwatchApiService.logLoginCallAttempt();
        const { data: loginData } = await this.loginToBackendService();
        this.accessToken = loginData.accessToken;
      } catch (e: any) {
        console.error(e?.response?.data);
        throw e;
      }
    }

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com${route}`, data, {
          headers: {
            Authorization: `Bearer ${this.accessToken}`,
          },
        }),
      );

      return response;
    } catch (e: any) {
      if (e?.response?.data?.statusCode === 401) {
        this.accessToken = null;
        return this.sendProtectedRequest(route, data);
      }
      console.error(e?.response?.data);
      throw e;
    }
  }
}

로그인 후 복사

이것이 좋은 접근 방식인 이유:

GoodAuthenticationService에서는 로그인 로직을 효율적으로 처리할 수 있도록 loginToBackendService 메소드가 구성되어 있습니다. 주요 개선 사항은 loginInProgress 플래그 관리입니다. 액세스 토큰이 없음을 확인한 이후 및 비동기 작업이 시작되기 이전으로 설정됩니다. 이렇게 하면 로그인 시도가 시작되면 다른 로그인 호출이 동시에 이루어질 수 없으므로 제한된 로그인 엔드포인트에 대한 여러 요청을 효과적으로 방지할 수 있습니다.

데모 지침

저장소를 복제합니다.

@Injectable()
export class BadAuthenticationService extends AbstractAuthenticationService {
  async loginToBackendService() {
    this.loginInProgress = true; // this is BAD, we are inside a promise, it's asynchronous. it's not synchronous, javascript can execute it whenever it wants

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com/login`, {
          password: 'password',
        }),
      );

      return response;
    } finally {
      this.loginInProgress = false;
    }
  }

  async sendProtectedRequest(route: string, data?: unknown) {
    if (!this.accessToken) {
      if (this.loginInProgress) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        return this.sendProtectedRequest(route, data);
      }

      try {
        await this.awsCloudwatchApiService.logLoginCallAttempt();
        const { data: loginData } = await this.loginToBackendService();
        this.accessToken = loginData.accessToken;
      } catch (e: any) {
        console.error(e?.response?.data);
        throw e;
      }
    }

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com${route}`, data, {
          headers: {
            Authorization: `Bearer ${this.accessToken}`,
          },
        }),
      );

      return response;
    } catch (e: any) {
      if (e?.response?.data?.statusCode === 401) {
        this.accessToken = null;
        return this.sendProtectedRequest(route, data);
      }
      console.error(e?.response?.data);
      throw e;
    }
  }
}

로그인 후 복사

필요한 종속성을 설치합니다.

@Injectable()
export class GoodAuthenticationService extends AbstractAuthenticationService {
  async loginToBackendService() {
    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com/login`, {
          password: 'password',
        }),
      );

      return response;
    } finally {
      this.loginInProgress = false;
    }
  }

  async sendProtectedRequest(route: string, data?: unknown) {
    if (!this.accessToken) {
      if (this.loginInProgress) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        return this.sendProtectedRequest(route, data);
      }

      // Critical: Set the flag before ANY promise call
      this.loginInProgress = true;

      try {
        await this.awsCloudwatchApiService.logLoginCallAttempt();
        const { data: loginData } = await this.loginToBackendService();
        this.accessToken = loginData.accessToken;
      } catch (e: any) {
        console.error(e?.response?.data);
        throw e;
      }
    }

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com${route}`, data, {
          headers: {
            Authorization: `Bearer ${this.accessToken}`,
          },
        }),
      );

      return response;
    } catch (e: any) {
      if (e?.response?.data?.statusCode === 401) {
        this.accessToken = null;
        return this.sendProtectedRequest(route, data);
      }
      console.error(e?.response?.data);
      throw e;
    }
  }
}

로그인 후 복사

애플리케이션을 실행합니다:

git clone https://github.com/zenstok/nestjs-singlethread-trap.git

로그인 후 복사

요청 시뮬레이션:

잘못된 버전으로 두 가지 요청을 시뮬레이션하려면 다음을 호출하세요.

cd nestjs-singlethread-trap
npm install

로그인 후 복사

좋은 버전으로 두 가지 요청을 시뮬레이션하려면 다음을 호출하세요.

npm run start

로그인 후 복사

결론: JavaScript의 단일 스레드 함정 피하기

JavaScript는 단일 스레드이지만 Promise 및 이벤트 루프를 사용하여 HTTP 요청과 같은 비동기 작업을 효율적으로 처리할 수 있습니다. 그러나 특히 공유 리소스(예: 토큰)와 관련된 시나리오에서 이러한 약속을 부적절하게 처리하면 경쟁 조건 및 중복 작업이 발생할 수 있습니다.
핵심은 이러한 함정을 피하기 위해 로그인과 같은 비동기 작업을 동기화하는 것입니다. JavaScript가 뒤에서 멀티태스킹을 수행하는 경우에도 항상 코드가 진행 중인 프로세스를 인식하고 적절한 순서를 보장하는 방식으로 요청을 처리하는지 확인하세요.

아직 Rabbit Byte Club에 가입하지 않으셨다면 지금이 소프트웨어 애호가, 기술 창업자, 비기술 창업자로 구성된 활발한 커뮤니티에 참여할 수 있는 기회입니다. 우리는 함께 지식을 공유하고, 서로에게서 배우며, 차세대 대형 스타트업을 구축할 준비를 합니다. 지금 우리와 함께 혁신과 성장을 향한 흥미진진한 여정에 참여해 보세요!

위 내용은 JavaScript에서 단일 스레드 함정을 피하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!