프론트엔드 개발에 Swagger 방식이 필요한 이유는 무엇입니까?
12165 단어 typescriptfrontendwebdevswagger
이 기사의 제목에서 묻는 질문은 현대 프로젝트에서도 상당히 현실적입니다. 프론트엔드 개발에서 우리는 Swagger를 100% 사용하지 않기 때문입니다.
내가 일했던 러시아의 큰 IT 회사에서 Swagger에 대해 알지도 못하고(그건 사실입니다) 그게 좋지 않습니다. 내가 일하는 현재 회사는 Swagger 스키마를 통해 클라이언트와 서버 간의 모든 상호 작용을 구축합니다. Swagger 클라이언트를 사용하면 유형 검사와 모든 엔드포인트를 가져옵니다.
프런트 엔드 프로젝트를 개발할 때 일부 팀은 서버에 대한 모든 요청을 수동으로 만들고 Swagger 스키마를 보고 유형 및 끝점을 선언합니다. 이미 준비된 솔루션 codogenerator가 있으므로 수행할 필요가 없습니다.
코드 생성기 🖨
현재 일하고 있는 회사에서는 Swagger 스키마 기반의 자체 프론트엔드 코드 생성기 API 모듈을 사용하고 있기 때문에 개인적인 용도로 사용할 수 없고 검색 준비 솔루션이 너무 어려웠습니다.
예를 들어 npm에서 찾은 내용은 다음과 같습니다.
api-client-generator - Angular 서비스를 생성하지만 React 애플리케이션이 있으면 어떻게 됩니까?
swagger-taxos-codegen - TypeScript Api 모듈을 생성하지만 프로젝트에
axios 이 필요합니다.@ps-aux/swagger-codegen - 내가 찾고 있는 것일 수 있지만 설명이 없습니다. 그게 바이러스라면? :)
swagger-api-ts-generator - 이것이 프론트엔드 개발용인지 확실하지 않습니다.
@openapitools/openapi-generator-cli -
Dart , Angular 또는 심지어 Flow 와 같은 다양한 생성기 사례를 지원하는 정말 유용한 도구입니다. 그러나 그것은 나에게 필요하지 않은 많은 수의 출력 파일을 생성하고 (typescript-fetch 생성기) 또한 자신의 도구를 만들고 싶은 유혹을 받았습니다.요청을 생성하는 데 Fetch API을 사용하고 Angular 서비스 또는 axios와 같은 추가 항목이 없는 도구에서 API 모듈을 가져오고 싶었기 때문에 이것과 다른 모든 준비된 솔루션은 내 요구에 적합하지 않았습니다.
이런 식으로 나는 자신의 코드 생성기에서 작업을 시작하고 그에게 가장 간단하고 분명한 이름을 부여했습니다 -
swagger-typescript-api swagger-typescript-api 🎉
아카코드 / swagger-typescript-api
Swagger 체계를 통한 TypeScript API 생성기
swagger-typescript-api
swagger 체계를 통해 API를 생성합니다.
OA 3.0, 2.0, JSON, yaml 지원
생성된 API 모듈은 Fetch Api 또는 Axios을 사용하여 요청합니다.
here 또는 our slack(#swagger-typescript-api 채널)에서 질문할 수 있는 모든 질문
👀 예
찾을 수 있는 모든 예here
📄 사용법
Usage: sta [options]
Usage: swagger-typescript-api [options]
Options:
-v, --version output the current version
-p, --path <path> path/url to swagger scheme
-o, --output <output> output path of typescript api file (default: "./")
-n, --name <name> name of output typescript api file (default: "Api.ts")
-t, --templates <path> path to folder containing templates
-d, --default-as-success use "default" response status code as success response too.
some swagger schemas use "default" response status code
as success response type by default. (default: false)
-r, --responses generate additional information about request responses
also add typings for bad responses (default: false)
--union-enums generate all "enum" types as union types (T1 | T2
…
I'll tell right away about his benefits over other alternatives:
- Supports Swagger 2.0, OA 3.0, and also file formats
json,yaml - Generated code not have any additional dependencies (like
axios). Just generate API module and enjoy. - Good types parsing from schema.
- Have extra features to use generated code in NodeJS environment.
- Flexible - we can override any method or property of generated API class.
- Not highly specialized - It could work for Angular applications and for React
- Good support - I have Slack channel, where I'll answer at any questions based this tool.
- Ability to use custom codegenerator templates based on ETA syntax
그것이 필요한 이유는 무엇입니까? 🤷♂️
Before at all it's type checking, which in my humble opinion very important in frontend development. TypeScript will give information that you send wrong typed structure to the server and it should be fixed.
Next case it is no needs to write endpoints manually. It should to reduce count of problems of interaction between client and server.
사용 방법 🚀
It's real simple. Just put it to console:
npx swagger-typescript-api -p path-or-url/to-your-swagger/schema.json -o src
-p, --path <path> path/url to swagger scheme
-o, --output <output> output path of typescript api file (default: "./")
-n, --name <name> name of output typescript api file (default: "Api.ts")
-t, --templates <path> path to folder containing templates
-d, --default-as-success use "default" response status code as success response too.
some swagger schemas use "default" response status code
as success response type by default. (default: false)
-r, --responses generate additional information about request responses
also add typings for bad responses (default: false)
--union-enums generate all "enum" types as union types (T1 | T2 | TN) (default: false)
--route-types generate type definitions for API routes (default: false)
--no-client do not generate an API class
--enum-names-as-values use values in 'x-enumNames' as enum values (not only as keys) (default: false)
--js generate js api module with declaration file (default: false)
--extract-request-params extract request params to data contract (default: false)
Also combine path params and query params into one object
--module-name-index <number> determines which path index should be used for routes separation (default: 0)
(example: GET:/fruites/getFruit -> index:0 -> moduleName -> fruites)
--module-name-first-tag splits routes based on the first tag
--modular generate separated files for http client, data contracts, and routes (default: false)
--disableStrictSSL disabled strict SSL (default: false)
--clean-output clean output folder before generate api. WARNING: May cause data loss (default: false)
--axios generate axios http client (default: false)
--single-http-client Ability to send HttpClient instance to Api constructor (default: false)
--silent Output only errors to console (default: false)
--default-response <type> default type for empty response schema (default: "void")
예를 들어:
npx swagger-typescript-api -p http://js2me.pw/api/v1/swagger.json -o src
더 많은 예를 찾을 수 있습니다here.
읽어 주셔서 감사합니다!
Reference
이 문제에 관하여(프론트엔드 개발에 Swagger 방식이 필요한 이유는 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/js2me/why-swagger-schemes-are-needed-in-frontend-development-2cb4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
