1-06 Svelte 개발환경 준비하기

App.svelte의 디폴트 내용을 전부 지워주고 <h1>Hello</h1> 만 입력하고 새로고침

CORS Policy에 의해 요청이 거부되었다

• FastAPI에 CORS 예외 URL을 등록하여 해결 가능

Fetch API 사용하기

HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JS에서 접근하고 조작할 수 있는 인터페이스를 제공함

async function logJSONData() {
  const response = await 
  fetch("<http://example.com/movies.json>");
  
  const jsonData = await response.json();
  console.log(jsonData);
}

<aside> ⚠️ fetch 함수(비동기적)의 또 다른 사용법

<script>
  async function hello() {
    const res = await fetch("<http://127.0.0.1:8000/hello>");
    const json = await res.json();

    if (res.ok) {
      return json.message;
    } else {
      alert("error");
    }
  }

  let promise = hello();
</script>

{#await promise}
  <p>...waiting</p>
{:then message}
  <h1>{message}</h1>
{/await}

</aside>