curl을 JavaScript(으)로 변환
curl2code는 네이티브 fetch API를 사용하여 curl 명령을 JavaScript 코드로 변환합니다. 모든 과정은 완전한 개인 정보 보호를 위해 WebAssembly를 통해 브라우저에서 로컬로 실행됩니다. 서버 측 Node.js 코드가 필요한 경우 curl to Node.js 변환기를 사용해 보세요. 타입 안정성을 원하신다면 curl to TypeScript 변환기를 확인하세요. 아래는 일반적인 HTTP 패턴에 대한 실용적인 예제입니다.
브라우저에서 curl을 복사하는 방법
- 1
DevTools 열기
F12 또는 Ctrl+Shift+I를 눌러 브라우저 개발자 도구를 엽니다.
- 2
Network 탭으로 이동
Network 탭을 클릭하고 HTTP 요청을 트리거하는 동작을 수행합니다.
- 3
cURL로 복사
요청을 마우스 오른쪽 버튼으로 클릭 → Copy → Copy as cURL을 선택합니다. 그런 다음 위에 붙여넣으세요.
자주 묻는 질문 (FAQ)
Fetch API란 무엇인가요?
Fetch API는 HTTP 요청을 만들기 위해 모든 브라우저에 내장된 현대적인 Promise 기반 인터페이스입니다. 오래된 XMLHttpRequest를 더 깔끔하고 강력한 API로 대체합니다. Fetch는 스트리밍, 요청/응답 객체, CORS를 지원하며 async/await와 자연스럽게 통합됩니다. 별도의 설치가 필요 없으며 전역에서 사용할 수 있습니다. curl2code는 JavaScript 변환 시 Fetch를 기본 출력으로 사용합니다.
Fetch, XMLHttpRequest, jQuery.ajax 중 무엇을 사용해야 하나요?
Fetch는 현대적인 표준이므로 새로운 프로젝트에 권장됩니다. XMLHttpRequest는 오래되었지만 여전히 모든 곳에서 작동하며 기본적으로 진행률 이벤트를 지원합니다. jQuery.ajax는 프로젝트에 이미 jQuery가 포함된 경우 편의성을 더해줍니다. 서버 측 JavaScript의 경우 curl to Node.js 변환기를 참조하세요. 타입 안정성을 원한다면 curl to TypeScript를 시도해 보세요.
Fetch에서 인증을 어떻게 처리하나요?
Authorization 옵션에 headers 헤더를 전달하세요: fetch(url, { headers: { "Authorization": "Bearer token" } }). Basic 인증의 경우 btoa(user + ':' + pass)로 자격 증명을 인코딩합니다. curl2code는 -u 및 -H 'Authorization: ...' 플래그를 자동으로 감지합니다.
Fetch로 multipart 폼 데이터를 어떻게 보내나요?
FormData 객체를 생성하고 body로 전달하세요: fetch(url, { method: "POST", body: formData }). Content-Type을 수동으로 설정하지 마세요. 브라우저가 multipart 경계(boundary)를 자동으로 추가합니다. curl2code는 -F 플래그를 FormData로 변환합니다.
Fetch에서 에러 처리는 어떻게 하나요?
Fetch는 HTTP 에러가 아닌 네트워크 실패 시에만 reject됩니다. 본문을 읽기 전에 항상 response.ok 또는 response.status를 확인하세요. try/catch와 함께 async/await로 감싸면 네트워크 에러와 파싱 에러를 한 곳에서 처리할 수 있습니다.
Fetch와 함께 async/await를 어떻게 사용하나요?
Fetch는 Promise를 반환하므로 const response = await fetch(url)를 사용한 뒤 const data = await response.json()을 호출하세요. 에러 처리를 위해 try/catch 블록으로 감싸는 것이 좋습니다. 이는 .then() 체이닝보다 깔끔하며 현대 JavaScript에서 권장되는 패턴입니다.
Fetch 요청에 타임아웃을 어떻게 설정하나요?
AbortController를 사용하세요. 컨트롤러를 생성하고 fetch에 { signal: controller.signal }을 전달한 뒤, controller.abort()으로 일정 시간 후 setTimeout를 호출합니다. 최신 브라우저는 더 간단한 한 줄 코드인 AbortSignal.timeout(5000)도 지원합니다. curl의 --max-time이 이 패턴에 매핑됩니다.
Fetch에서 CORS 문제를 어떻게 처리하나요?
CORS는 Fetch 자체가 아닌 브라우저에 의해 강제됩니다. mode: 'cors'(기본값)를 설정하고 서버가 적절한 Access-Control-Allow-Origin 헤더를 보내는지 확인하세요. 자격 증명(쿠키)의 경우 credentials: 'include'를 추가합니다. CORS는 서버 측 코드에는 적용되지 않습니다. 이에 대해서는 curl to Node.js 변환기를 참조하세요.
JavaScript에서 JSON 바디를 포함한 POST 요청을 보내는 방법은 무엇인가요?
curl2code를 사용하여 curl -X POST -H "Content-Type: application/json" -d '{"key":"value"}' URL과 같은 curl POST 명령어를 JavaScript로 변환하세요. 생성된 코드는 fetch(url, { method: 'POST', body: JSON.stringify(data), headers: {'Content-Type': 'application/json'} })를 사용합니다. curl2code는 JSON 콘텐츠가 포함된 -d/--data 플래그를 자동으로 감지하고 fetch 코드에 적절한 Content-Type 헤더를 설정합니다.
JavaScript에서 Bearer 토큰 인증을 추가하는 방법은 무엇인가요?
curl -H "Authorization: Bearer YOUR_TOKEN" URL을 curl2code에 입력하면 headers: { 'Authorization': 'Bearer YOUR_TOKEN' }와 같은 인증 헤더가 포함된 fetch 코드가 생성됩니다. curl2code는 -H "Authorization: Bearer ..." 및 --oauth2-bearer 플래그 모두에서 Bearer 토큰을 감지합니다. Basic auth의 경우 -u user:pass를 사용하세요.
JavaScript에서 Content-Type 헤더를 설정하는 방법은 무엇인가요?
curl2code는 curl -H "Content-Type: application/json" URL을 적절한 헤더가 포함된 fetch 코드로 변환합니다: headers: { 'Content-Type': 'application/json' }. -d 데이터의 경우 curl은 기본적으로 application/x-www-form-urlencoded를 사용하며, -F 폼 업로드의 경우 multipart/form-data를 사용합니다. curl2code는 각각을 올바른 fetch API에 매핑합니다.