Postman에서 Jamstack 어플리케이션을 구축하는 방법
A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup
—Mathias Biilmann, Co-Founder and CEO of Netlify
이런 유형의 체계 구조는 전단과 후단을 분리한다.따라서 Jamstack 사이트는 백엔드 웹 서버가 아닌 콘텐츠 납품 네트워크(CDN)에 배치되어 최종 사용자에 가까운 가장자리 서버에서 웹 콘텐츠를 신속하게 납품할 수 있고 API 노드는 서버가 없는 체계 구조에 위탁 관리할 수 있다.
지난 몇 년 동안 Jamstack은 정적 내용을 제공하는 사이트가 아니라 Jamstack에 대한 토론colorful debate, 심지어 자본화에 대한 토론을 불러일으켰다.당신의 기준이 무엇이든지 간에 이러한 정적 웹 응용 프로그램은 애호가와 전 세계 기업에서 매우 유행한다.이들의 성장은 또한 왕성하게 발전하는 API 경제의 진일보한 추진을 받아 API 경제는 어떠한 종류의 제3자 서비스와 열쇠 납부 해결 방안을 제공할 수 있다.
Jamstack을 처음 접한 개발자에게 Postman의 간략한 예시를 통해 JAM의 모든 부분이 어떻게 작동하는지 알아보도록 하겠습니다.
Postman에서 Jamstack 어플리케이션을 구축하는 4단계
Jamstack 아키텍처의 모듈식 및 결합 해제 기능은 모든 구성 요소를 지원하는 일련의 도구를 의미합니다.예를 들어 대부분의 Jamstack 응용 프로그램은 JavaScript 웹 프레임워크를 이용하여 개발한 것이다. 예를 들어 Next.js와 Gatsby이다.그리고 Vercel와Netlify 등의 서비스를 사용하여 배치하고 콘텐츠 납부망(CDN)에 위탁 관리한다.
Postman에서 간단한 Jamstack 어플리케이션을 구축하고 호스팅하는 데 사용할 코드 예제the Postman documentation for the visualizer를 사용합니다.그리고 잼을 자세히 볼게요.
1. 컬렉션 만들기: Postman에서
Jamstack라는 새 컬렉션을 만듭니다.그리고 GET라는 집합에 API call 요청을 추가합니다. 요청 URL은 {{url}}/data입니다.
2. 예시 응답 추가: 요청한 넘침 메뉴(...)를 선택하고
e.g.라는 예시 응답을 추가합니다(Example data.이 예시 응답은 아날로그 서버에서 되돌아옵니다.예제 응답의 Body 탭(하단)에서 드롭다운 메뉴에서 데이터 유형JSON을 선택합니다.다음 자리 표시자 JSON을 추가합니다.Postman 문서에서 복사하려면 // 문자와 앞의 , 문자로 시작하는 주석 줄을 삭제하여 JSON이 올바르게 작동하도록 하십시오.[
{
"name": "Alice",
"email": "[email protected]"
},
{
"name": "Jack",
"email": "[email protected]"
}
]
Content-type 와 값 application/json 이 있는 제목을 추가합니다.마지막으로 응답 상태 코드200 OK를 추가합니다.
3. 아날로그 서버 추가: 집합
Jamstack을 선택하여 집합add a new mock server에 넘치는 메뉴(...)를 집합Mock data이라고 합니다.Postman이 아날로그 서버 생성을 완료하면 Postman이 만든 Mock data라는 새 환경을 선택합니다.요청 URL{{url}}에 마우스를 놓고 활성 환경에서 읽고 있는 값을 봅니다.
4. 시각적 데이터: 요청
API call을 선택하고 아날로그 서버에서 돌아오는 예시 데이터를 보기 위해 요청을 보냅니다.아날로그 서버에서 되돌아오는 데이터를 업데이트하려면 예시 응답 본문e.g.을 편집할 수 있습니다.우리는 the Postman documentation for the visualizer의 코드 예시를 계속 사용할 것이다.[테스트] 탭에서 템플릿 문자열을 나타내는 HTML 테이블에 다음 코드를 추가합니다.var template = `
<table bgcolor="#FFFFFF">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
{{#each response}}
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
</tr>
{{/each}}
</table>
`;
// Set visualizer
pm.visualizer.set(template, {
// Pass the response body parsed as JSON as `data`
response: pm.response.json()
});
관찰과 학습
최종 품목으로 이동하려면 이 예제 컬렉션과 환경을 작업공간으로 이동합니다.
다음 절에서 우리는 이 예의 방해를 분석하고 모든 구성 요소를 강화하는 방법을 생각하자.
잼 자세히 봐.
JavaScript
테스트 스크립트에서 호출된
pm.visualizer.set() 함수 실례화 visualization 를 사용합니다.Postman sandbox는 사전 요청 또는 테스트 스크립트에서 사용할 수 있는 다른 JavaScript 함수와 라이브러리에 대한 액세스를 제공합니다.또한 other ways of using external libraries의 pm.sendRequest()와 같은 함수를 사용하여 외부 CDN 라이브러리에 가져올 수 있다.API
Postman cloud의 아날로그 서버를 사용하여 아날로그 API를 호출하여 데이터를 저장합니다.이렇게 하면 데이터를 빠르게 편집하고 변경 사항을 Postman에 저장하여 업데이트를 "배치"할 수 있습니다.만약에 우리가 좋아하는 제3자 서비스를 찾거나 맞춤형 API를 만들면 우리는 API를 교환해서 호출할 수 있다.실제로 우리는 임의의 여러 API를 호출하여 데이터를 합성하고 계산을 실행하여 우리의 맞춤형 서비스를 만들 수 있다.
값을 올리다
CSS를 사용하여 스타일을 설정할 수 있는 HTML 템플릿 문자열을 시각화했습니다.Handlebar 템플릿 언어를 사용하여 HTML을 생성할 수도 있습니다.태그를 직접 작성하지 않으려면 배달부 커뮤니티의 다른 구성원이 만든 other visualizations을 검색하십시오.마찬가지로 템플릿 문자열의 스크립트 태그를 사용하여 외부 CDN 라이브러리를 가져올 수 있습니다.
운영 애플리케이션으로 확장
우리 해냈어!Postman에서 완전한 Jamstack 어플리케이션을 개발, 배포 및 호스팅하는 것이 가능합니다.그러나 이것은 단지 간단한 예일 뿐이다.경우에 따라 타사 서비스를 사용하거나 서버 아키텍처가 없는 자체 API를 호스팅하여 아날로그 데이터를 교환할 수도 있습니다.또는 Postman에서 HTML을 시각화하지 않고 웹 브라우저에서 사용할 수도 있습니다.Jamstack 애플리케이션을 지원하는 일련의 도구, 기술 및 워크플로우
Jamstack 아키텍처를 사용하면 구현에서 창의성을 얻을 수 있습니다.JavaScript와 API를 사용하면 상상력에만 국한된 상호 작용으로 데이터를 동적으로 추출할 수 있습니다.왕성하게 발전하는 API 경제는 이런 동태적 행위의 선택이 빠르게 증가하고 있음을 의미한다.
Reference
이 문제에 관하여(Postman에서 Jamstack 어플리케이션을 구축하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/postman/how-to-build-a-jamstack-application-in-postman-h19텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
