Vue 3 실전: API 데이터 페칭

const{createApp,ref,onMounted}=Vue;
createApp({
  setup(){
    const posts=ref([]);const loading=ref(false);const error=ref(null);
    const fetchData=async()=>{
      loading.value=true;error.value=null;
      try{
        const res=await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3');
        if(!res.ok)throw new Error('HTTP '+res.status);
        posts.value=await res.json();
      }catch(e){error.value=e.message;}
      finally{loading.value=false;}
    };
    onMounted(fetchData);
    return{posts,loading,error,fetchData};
  },
  template:`<div>
    <div style='display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;'>
      <div style='color:#10b981;font-size:9px;letter-spacing:0.2em;'>API FETCH</div>
      <button @click='fetchData' style='background:#333;color:#888;border:none;padding:4px 10px;cursor:pointer;font-size:10px;font-family:monospace;'>RELOAD</button>
    </div>
    <div v-if='loading' style='color:#f59e0b;font-size:11px;'>LOADING...</div>
    <div v-else-if='error' style='color:#10b981;font-size:11px;'>ERROR: {{error}}</div>
    <div v-else>
      <div v-for='p in posts' :key='p.id' style='padding:8px;background:#0a0a0a;margin-bottom:6px;'>
        <div style='color:#f59e0b;font-size:10px;margin-bottom:4px;'>#{{p.id}} {{p.title.substring(0,30)}}...</div>
        <div style='color:#555;font-size:10px;'>{{p.body.substring(0,60)}}...</div>
      </div>
    </div>
  </div>`
}).mount('#api-out');