웹 개발에서 Fetch API는 어떻게 작동합니까?

Fetch API는 JavaScript에서 network request를 만드는 더 유연하고 강력한 방법을 제공하는 현대적인 웹 API입니다. 이전의 XMLHttpRequest 기술을 계승하도록 설계되었으며 Promise 기반의 더 직관적이고 읽기 쉬운 문법을 제공합니다. Fetch API를 사용하면 server에 비동기 HTTP request를 만들고 response를 더 구조적으로 처리할 수 있습니다.

Fetch API와 XMLHttpRequest의 중요한 차이 중 하나는 Fetch API가 Promise를 반환한다는 것입니다. 이 덕분에 callback 함수에 의존하지 않고 비동기 코드를 더 쉽게 다룰 수 있습니다. 그 결과 특히 여러 비동기 작업을 순서대로 처리할 때 더 깔끔하고 유지 관리하기 쉬운 코드가 됩니다.

또한 Fetch API는 streaming 데이터와 다양한 유형의 콘텐츠 처리에 대한 더 나은 지원을 포함하여 HTTP response를 처리하는 더 포괄적이고 유연한 방법을 제공합니다. XMLHttpRequest는 request를 구성하고 처리하는 데 더 많은 단계가 필요합니다. 한편 Fetch API는 더 적은 코드 줄과 더 현대적인 접근 방식으로 같은 결과를 얻을 수 있게 합니다. 다만 XMLHttpRequest는 fetch에 없는 기본 upload 진행률 event를 여전히 제공합니다.

XMLHttpRequest는 더 복잡하고 덜 직관적일 수 있습니다. 이에 반해 Fetch API는 단순성과 효율성에 초점을 둔 현대 웹 개발의 현재 요구를 충족하도록 설계된 더 현대적인 솔루션입니다. 따라서 Fetch API는 더 효율적이고 미래 지향적인 코드를 작성하려는 많은 개발자가 선호하는 선택입니다.

JavaScript의 Fetch API는 앞으로 완료될 작업을 나타내는 Promise 객체를 반환하여 비동기 작업을 처리하도록 설계되었습니다. fetch request를 보내면 network에서 리소스를 가져오기 시작하며, JavaScript는 request가 완료되기를 기다리면서 다른 작업을 계속 실행합니다.

fetch request가 완료되면 연결된 Promise 객체는 fulfilled 또는 rejected됩니다. server가 response를 반환하면 status code와 관계없이 항상 fulfilled되며, 예를 들어 network 오류나 중단된 request로 request가 실패할 때만 rejected됩니다. 이를 통해 개발자는 .then()과 .catch() 같은 method 또는 동등한 async/await 문법으로 각각 성공과 실패를 처리하여 데이터를 사용할 수 있을 때 무엇을 할지 정의할 수 있습니다. 이 비동기 패턴은 애플리케이션의 반응성을 유지하고 network request에 차단되지 않고 여러 작업을 동시에 처리할 수 있게 합니다.

XMLHttpRequest 같은 이전 기술은 비동기를 더 복잡하게 처리해야 합니다. 이에 반해 Fetch API는 JavaScript에서 network request를 다루는 더 현대적이고 간소화된 접근 방식을 제공하여 개발자가 깔끔하고 유지 관리하기 쉬운 코드를 더 쉽게 작성할 수 있게 합니다.

Fetch API는 세 가지 핵심 장점을 결합하여 웹 애플리케이션에서 HTTP request를 처리하는 현대적이고 효율적인 접근 방식을 제공합니다.

• 단순화된 문법: Fetch API는 Promise 기반의 더 현대적이고 읽기 쉬운 문법을 사용하여 XMLHttpRequest 같은 이전 방법보다 코드를 작성하고 이해하기 쉽게 만듭니다. 비동기 작업을 callback 함수 없이 처리할 수 있으므로 복잡성이 줄고 코드를 유지 관리하기 쉬워집니다.
• 현대적 기능의 기본 지원: Fetch API는 streaming 데이터, CORS(Cross-Origin Resource Sharing) 처리, AbortController로 request를 취소하는 기능 등 많은 현대 웹 기능을 기본 지원합니다. 이를 통해 개발자는 third-party 라이브러리나 복잡한 우회 방법에 의존하지 않고 더 고급이고 반응성 있는 애플리케이션을 구축할 수 있습니다.
• 오류 유형의 명확한 구분: Fetch API는 network 장애와 HTTP 오류 response를 명확히 구분합니다. Promise는 request 자체가 실패할 때만 rejected됩니다. 한편 404나 500 같은 HTTP 오류 상태는 response.ok로 확인할 수 있는 일반 response로 도착합니다. XMLHttpRequest도 비슷하게 동작하지만 별도의 event로 오류를 알리므로 흐름을 따라가기가 더 어렵습니다.

단순화된 문법, 현대적 기능의 기본 지원, 명확한 오류 처리의 조합은 Fetch API를 더 효율적이고 유지 관리하기 쉬운 웹 애플리케이션을 구축하려는 개발자에게 강력한 도구로 만듭니다. interceptor와 자동 JSON 변환처럼 더 많은 내장 기능이 필요한 경우 일부 개발자는 대신 Axios 라이브러리를 선택합니다.

JavaScript에서 Fetch API로 작업할 때는 견고하고 사용자 친화적인 애플리케이션을 위해 오류와 예외를 올바르게 처리하는 것이 중요합니다. 다음은 Fetch API를 사용할 때 오류와 예외를 효과적으로 처리하는 몇 가지 방법입니다.

• Network 오류: Fetch API는 network 오류에서만 rejected되는 Promise를 반환합니다. 이는 server에 연결할 수 없는 경우처럼 network 연결에 문제가 있는 상황을 처리하려면 catch()를 사용해야 한다는 의미입니다.
• HTTP status code: Fetch API는 HTTP 오류 status code(예: 404 또는 500)를 오류로 취급하지 않습니다. 이러한 오류를 식별하고 적절히 처리하려면 response.ok를 수동으로 확인해야 합니다.
• JSON parsing 오류: response를 JSON으로 변환할 때 데이터가 유효한 JSON이 아니면 parsing 오류가 발생할 수 있습니다. 이는 try-catch block 안에서 response.json()을 await하여 처리할 수 있습니다.
• Timeout: Fetch API에는 자체 timeout 옵션이 없습니다. timeout은 request를 실제로 취소하는 AbortController 또는 AbortSignal.timeout()으로 구현할 수 있습니다. Promise.race() 기반 접근 방식은 결과를 기다리는 것만 멈춥니다. 한편 request 자체는 계속 진행됩니다.
• 사용자 피드백: 사용자 경험을 향상시키려면 오류가 발생할 때 문제와 다음 단계를 설명하는 메시지나 알림 같은 피드백을 사용자에게 제공해야 합니다.

전반적으로 Fetch API를 사용할 때 오류와 예외를 올바르게 처리하면 애플리케이션의 안정성과 사용자 경험을 모두 향상시킬 수 있습니다. 이러한 방법을 구현하면 애플리케이션이 예기치 않은 문제를 원활하게 처리하는 데 도움이 됩니다.

Fetch API로 데이터를 보내려면 fetch()를 호출할 때 추가 options 객체를 전달합니다. 이 객체는 POST나 PUT 같은 method를 설정하며, 데이터는 body field에 넣습니다.

JSON을 보낼 때는 JSON.stringify()로 객체를 text로 변환하고 Content-Type header를 application/json으로 설정하여 server가 데이터를 읽는 방법을 알게 합니다. 양식 데이터와 file은 FormData 객체로 보낼 수 있으며, 브라우저는 이를 자동으로 multipart/form-data로 보냅니다. response는 다른 호출과 같이 처리하며, fetch는 400이나 500 같은 HTTP status code에 대해 오류를 발생시키지 않으므로 response의 ok 속성을 확인하는 것이 중요합니다.

Fetch API는 웹 애플리케이션에서 network request를 만드는 현대적이고 유연한 방법이지만, 이 기술을 사용할 때는 보안 고려 사항에 주의가 필요합니다. Fetch API는 간단하고 직관적으로 설계되었지만, 잠재적인 보안 위협으로부터 보호하기 위해 보내고 받는 데이터가 올바르게 처리되도록 할 책임을 개발자에게 요구합니다.

Fetch API를 사용할 때 주요 보안 고려 사항 중 하나는 CORS(Cross-Origin Resource Sharing) 처리입니다. 브라우저는 fetch에 same-origin policy를 적용하며, 이는 애플리케이션이 load된 origin이 아닌 다른 origin으로의 request는 response를 읽기 전에 server가 올바른 CORS header를 보내야 한다는 의미입니다. CORS는 same-origin policy의 통제된 완화이며, 그 자체로 보호 메커니즘이 아닙니다. 지나치게 허용적인 구성은 권한 없는 사이트에 리소스를 노출할 수 있습니다. Cross-Site Scripting(XSS)과 Cross-Site Request Forgery(CSRF)에 대한 보호에는 output encoding, Content Security Policy, SameSite cookie, CSRF token 같은 별도의 조치가 필요합니다.

또한 Fetch API로 보내고 받는 모든 데이터를 검증하고 정제하는 것이 중요합니다. 여기에는 사용자 입력에 애플리케이션이나 사용자를 위협하는 데 악용될 수 있는 악성 코드가 없도록 하는 것이 포함됩니다. 브라우저의 검사는 우회될 수 있으므로 검증은 항상 server에서도 이루어져야 합니다. 엄격한 검증과 정제 검사를 구현하면 개발자는 보안 침해 위험을 최소화할 수 있습니다.

XMLHttpRequest 같은 이전 기술도 있습니다. 이에 반해 Fetch API는 network request에 더 현대적인 접근 방식을 제공하지만, 여전히 개발자가 보안 관행에 주의를 기울여야 합니다. 필요한 보안 조치를 이해하고 구현하면 개발자는 애플리케이션이 잠재적 위협에 대해 견고하고 회복력 있도록 할 수 있습니다.