Nuxt fetch() 컴포넌트 데이터가 업데이트가 안돼요

Nuxt2에서 아래와 같이 fetch 속성을 사용하려고 하였는데, 컴포넌트 데이터가 업데이트가 되지 않았습니다. async fetch({ $api }) { try { const { data } = await $api.getUserList(); this.list = data; } catch (e) { console.log('error', e) } }, 원인 fetch는 nuxt 2.12 버전 이후로 업데이트가 되었습니다. fetch hook을 사용하려면 fetch안의 파라미터를 넣으면 안됩니다. 파라마터를 넣으면, 업데이트 이전의 fetch가 동작해서 컴포넌트가 업데이트 되지 않습니다. 해결방법 fetch 파라미터를 지우고, this를 통해서 데이터 구성요소를 업데이트 하면 정상 작동합니다. async f..

• format_list_bulleted Develop/Nuxt
• · 2023. 11. 18.
• textsms

자바스크립트 - fetch 이용해서 Ajax 비동기 통신 하기

fetch fetch API를 이용하면 서버와 브라우저를 비동기적으로 통신할 수 있습니다. fetch API 이전에는 XMLHttpRequest를 이용해서 통신을 하였습니다만, 너무 어렵고 복작해서 주로 jQuery 라이브러리를 많이 사용하였습니다. 현재는 fetch로 브라우저 window 객체에 내장 되어 있어서 다른 라이브러리 없이 비동기 통신을 할 수 있습니다. fetch 사용법 fetch(URL, Options); Get 방식 호출 기본적으로 Options 값이 없으면 GET 방식으로 호출됩니다. response는 json()으로 변경하면 요청한 데이터를 가지고 올 수 있습니다. fetch("https://jsonplaceholder.typicode.com/posts").then(function(..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 21.
• textsms

Request with GET/HEAD method cannot have body 오류 해결 방법

오류 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. fetch("https://jsonplaceholder.typicode.com/posts", { body: JSON.stringify({id: 1}) }).then(function(response) { return response.json(); }) 자바스크립트에서 fetch 호출 시 위와 같은 에러가 발생하였습니다. 원인 GET 방식의 호출인데, body에 값을 넣어서 발생하였습니다. GET 방식은 읽기 전용이기 때문에 body 값을 가질 수가 없습니다. 해결방법 1. 읽기 전용이 아닌 ..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 21.
• textsms

Axios란? 설치하기, 사용법, fetch와 차이점

Axios란? Axios는 자바스크립트에서 HTTP 통신을 쉽게 처리할 수 있도록 만든 라이브러리입니다. Node.js 와 브라우저에서도 사용할 수 있습니다. Axios에는 많은 기능들이 있어서, 쉽고 편리하게 데이터를 가져올 수 있어서 개발자들이 많아 사용하는 방법입니다. Axios 설치하기 npm install axios npm을 이용해서 설치 후 사용 가능합니다. Axios 사용법 node.js 환경에서는 선언해야 합니다. const axios = require('axios'); get 호출 axios.get('https://jsonplaceholder.typicode.com/todos/1') .then((response) => { // 요청 성공 시 처리 console.log(response.da..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 12.
• textsms

Nuxt asyncData / fetch 설명 차이점 무엇을 사용하는 것이 좋을까?

Nuxt에서 데이터를 가져오는 방법이 두 가지 있습니다. asyncData fetch Nuxt에서 클라이언트 사이드 방식이 mounted()를 통해서 데이터를 호출할 수는 방식을 지원하긴 합니다. 하지만 서버 측에서 데이터를 렌더링 하는 앱을 만들기 위해서는 위 두 가지 훅을 사용해야 합니다. asyncData 페이지 내에서만 사용 가능 비동기적으로 생성되는 데이터일 때 사용 생성한 데이터는 data()로 생성한 데이터와 병합 data()와 차이 없음 단지 동기 / 비동기 차이 this 사용 불가능 async asyncData({ params }) { const response = await fetch(`https://api.example.com/data/${params.id}`); const data ..

• format_list_bulleted Develop/Nuxt
• · 2023. 7. 24.
• textsms