Fast Fetch Snippets 🚀
React 및 TypeScript 환경에서 Fetch API를 가장 빠르고 정확하게 작성할 수 있도록 도와주는 VS Code 확장 프로그램입니다.
반복적인 fetch 문법 작성 시간을 줄이고, try-catch나 headers 설정을 실수 없이 작성하세요.
Features ✨
| Prefix (단축어) |
Description (설명) |
fget |
에러 핸들링과 JSON 파싱이 포함된 GET 요청 템플릿 |
fpost |
Headers와 Body(stringify)가 자동 설정된 POST 요청 템플릿 |
fetch |
HTTP Method(GET, POST, PUT 등)를 선택할 수 있는 범용 템플릿 |
fheader |
Content-Type과 인증 토큰이 포함된 Header 객체 |
Usage Examples 💡
1. GET Request (fget)
fget을 입력하면 데이터 조회에 필요한 기본 코드가 자동 완성됩니다.
// 입력: fget
const res = await fetch("url");
if (!res.ok) throw new Error("Failed to fetch");
const data = await res.json();
2. POST Request (fpost)
fpost를 입력하면 가장 번거로운 headers 설정과 JSON.stringify 감싸기를 자동으로 처리해 줍니다.
// 입력: fpost
const res = await fetch('url', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (!res.ok) throw new Error('Failed to fetch');
const result = await res.json();
3. Custom Method Selection (fetch)
fetch를 입력하면 Dropdown 메뉴가 나타나 원하는 HTTP Method를 선택할 수 있습니다.
// 입력: fetch -> Method 선택 (GET, POST, PUT, DELETE, PATCH)
const res = await fetch('url', {
method: 'PUT', // 드롭다운에서 선택 가능
headers: {
'Content-Type': 'application/json',
},
});
fetch 함수 내부나 axios 설정 등에서 헤더 객체만 따로 필요할 때 유용합니다.
// 입력: fheader
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer token'
},
Installation 📦
- VS Code를 엽니다.
Ctrl+P (Mac: Cmd+P)를 누릅니다.ext install fast-fetch-snippets를 입력합니다. (배포 후 검색 가능)
Requirements
VS Code 1.60.0 이상
Release Notes
1.0.0
- Initial release of Fast Fetch Snippets
- Added
fget, fpost, fetch, fheader snippets
