Nuxt에서 컨텍스트 요청

소개

Nuxt는 최근 NodeJS AsyncLocalStorage를 사용한 비동기 컨텍스트 지원이라는 실험적인 기능을 도입했습니다.
이 향상된 기능을 통해 개발자는 중첩된 비동기 함수 전반에 걸쳐 컨텍스트를 관리하는 방법을 단순화할 수 있지만 더 많은 기능이 있습니다!

"실험적" 레이블은 플랫폼 전반에서 지원이 제한되어 있다는 점에 유의하는 것이 중요합니다. 그러나 NodeJS를 사용하면 안정적이므로 해당 환경에서 작업하는 개발자에게 신뢰할 수 있는 옵션이 됩니다.

https://nuxt.com/docs/guide/going-further/experimental-features#asynccontext

NodeJS의 AsyncLocalStorage를 사용하면 비동기 작업 전체에서 일관되게 데이터를 저장하고 액세스할 수 있습니다. 컨텍스트를 유지하므로 사용자 세션이나 요청별 정보와 같은 데이터를 더 쉽게 관리할 수 있습니다.

AsyncContext는 무엇을 해결합니까?

• 비동기 작업 전반에 걸친 컨텍스트 일관성: AsyncContext는 기능 계층을 통해 수동으로 전달하지 않고도 모든 비동기 호출 전반에 걸쳐 컨텍스트 데이터에 계속 액세스할 수 있도록 보장합니다.
  
  

• 보일러플레이트 코드 줄이기: 반복적인 컨텍스트 전달 논리를 제거하여 코드베이스를 단순화합니다.
  
  

일관적인 요청 컨텍스트를 유지하는 것은 Nuxt 이전에도 NodeJS 애플리케이션에서 어려운 일이었습니다.

문제가 있는

한 가지 사용 사례는 웹사이트를 통해 고객 경로를 추적하는 로깅 시스템을 구현하는 것이었습니다. 이를 달성하려면 각 고객의 여정을 일관되게 추적할 수 있도록 모든 로그 항목에 상관 관계 ID를 포함해야 했습니다.

이 문제는 여러 레이어로 구성된 더 많은 애플리케이션 로직이 있을 때 이러한 레이어 아래로 컨텍스트를 전달해야 한다는 것입니다.

예제를 살펴보겠습니다.

nuxt-demo-async-context/
├── public/
│   └── favicon.ico
├── server/
│   ├── api/
│   │   ├── index.ts
│   │   └── users.ts
│   ├── middleware/
│   │   └── correlationId.middleware.ts
│   ├── repository/
│   │   └── user.repository.ts
│   ├── service/
│   │   └── user.service.ts
│   └── utils/
│       └── logger.ts
├── .gitignore
├── README.md
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── tsconfig.json
└── yarn.lock

파일 구조 및 코드 초안

1. [id].ts

export default defineEventHandler((event) => {
  const id = event.context.params.id;
  const { correlationId } = event.context;
  try {
    const user = userService.getUserById(id, correlationId);
    return {
      user,
      message: `User with ID ${id} retrieved successfully`
    };
  } catch (error) {
    return {
      statusCode: 404,
      message: `User with ID ${id} not found`
    };
  }
});

1. userRepository.ts

// This would typically interact with a database
const users = new Map<string, { id: string; name: string; email: string }>();

export default {
  findById(id: string) {
    return users.get(id) || null;
  },

  save(user: { id: string; name: string; email: string }) {
    users.set(user.id, user);
    return user;
  }
};

이 문제는 우리가 요청 컨텍스트인 CorrelationId 변수를 모든 레이어에 전달한다는 것입니다. 이는 모든 함수가 CorrelationId 변수에 대한 종속성을 갖는다는 것을 의미합니다.

이제 모든 애플리케이션 로직에서 이 작업을 수행해야 한다고 상상해 보세요.

전역 변수에 이런 종류의 논리를 설정하지 마세요. NodeJS는 모든 사용자에 대한 모든 요청 간에 이 컨텍스트를 공유합니다.

해결책

AsyncContext가 이 문제를 해결할 수 있습니다!

Nuxt에서 실험적인 기능인 asyncContext를 활성화하면

이제 어디서나 이벤트에 접속하실 수 있습니다.

이 상관 관계 ID를 이벤트에 전달하여 애플리케이션 어디에서나 사용할 수 있는 미들웨어를 만들 수 있습니다.

서버/미들웨어/correlationId.ts

nuxt-demo-async-context/
├── public/
│   └── favicon.ico
├── server/
│   ├── api/
│   │   ├── index.ts
│   │   └── users.ts
│   ├── middleware/
│   │   └── correlationId.middleware.ts
│   ├── repository/
│   │   └── user.repository.ts
│   ├── service/
│   │   └── user.service.ts
│   └── utils/
│       └── logger.ts
├── .gitignore
├── README.md
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── tsconfig.json
└── yarn.lock

이제 다음과 같은 작업을 수행할 수 있습니다.

export default defineEventHandler((event) => {
  const id = event.context.params.id;
  const { correlationId } = event.context;
  try {
    const user = userService.getUserById(id, correlationId);
    return {
      user,
      message: `User with ID ${id} retrieved successfully`
    };
  } catch (error) {
    return {
      statusCode: 404,
      message: `User with ID ${id} not found`
    };
  }
});

더 이상 요청이나 매개변수를 로거에 전달할 필요가 없습니다.

이 기술을 적용하여 사용자 컨텍스트를 얻을 수 있으며 이는 일반적인 사용 사례입니다.

결론

AsyncContext는 Nuxt 애플리케이션의 컨텍스트 관리를 단순화하여 상용구 코드를 줄이고 비동기 작업 전반에 걸쳐 일관성을 보장합니다.

요청 컨텍스트나 사용자 서비스와 같은 서비스에 대한 종속성 주입을 구현하면 더 나아갈 수 있습니다.

이 접근 방식은 레이어 간의 결합을 줄이고 종속성을 최소화하여 코드베이스를 더욱 모듈화하고 유지 관리 및 테스트가 가능하게 만듭니다.

추가 자료

PoC는 https://github.com/marc-arnoult/nuxt-demo-async-context에서 확인할 수 있습니다

AsyncContext를 구현하는 방법과 Nuxt의 다른 실험적 기능을 탐색하는 방법에 대한 자세한 내용은 공식 문서를 확인하세요.
https://nodejs.org/api/async_context.html

위 내용은 Nuxt에서 컨텍스트 요청의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!