728x90 반응형 분류 전체보기145 [JS/오류해결] Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream already read 문제 상황 fetch를 사용하고, 응답을 받을 때 response.json()을 사용한다. 이때 response.json()을 2번 사용하면 오류가 발생한다. fetch('https://www.naver.com/') .then((response) => { console.log(response); if (response.ok) { console.log(response.json()); return response.json(); // 오류 발생 } }); 원인 response.json()은 HTTP 응답에서 JSON 데이터를 추출하기 위한 메서드이다. 이 메서드는 해당 HTTP 응답의 body를 읽어서 JSON 객체로 변환해 주는 역할을 한다. HTTP 응답의 body는 일반적으로 string으로 전송되고, .. 2023. 4. 16. [React] 값을 수정할 때 페이지가 번쩍 거리는 현상 제거하기 페이지가 번쩍 거리는 현상 위의 동영상에서 확인할 수 있듯이 Todo를 수정하고 제출했을 때 뭔가 번쩍 거리는 듯한 느낌이 있다. 일단 결론부터 말하면, 투두를 수정할 때 updateTodoApi를 호출하게 되는데 updateTodoApi는 또 getTodoApi를 호출하고 있었기 때문이다. 여기서 updateTodoApi는 데이터를 수정할 때 발생하고, getTodoApi는 화면에 그릴 데이터를 가져올 때 발생한다. 처음에 이러한 방식으로 코드를 작성한 이유는 서버에 데이터를 저장하고 있기 때문에 수정한 데이터를 화면에 보여주기 위해서 getTodoApi를 계속해서 호출해야겠다고 생각했기 때문이다. 하지만 그러면 제목처럼 화면이 번쩍인다. 그 이유는, 통신을 하고 난 후에 화면에 데이터를 그리기 때문에.. 2023. 4. 15. localStorage.getItem()을 상수로 빼서 사용하면 동작하지 않는 이유 localStorage.getItem()을 여러 페이지에서 사용하고 있었다. 중복되는 코드를 제거하기 위해 리팩터링을 하고 있었기 때문에 localStorage.getItem() 또한 상수로 빼서 관리를 하려고 했었다. 그럼 따로 정의해 둔 변수명을 사용하여 localStorage의 값을 가져오면 되니깐 엄청 편하겠다!라고 생각했던 것이다. 결론적으로 제목과 같이 localStorage.getItem()을 상수로 빼서 사용하면 안 된다. 첫 번째 이유는 값을 가져올 수 없기 때문이다. 아래 코드에서 console.log(access_token) 값은 null이 되는 것을 확인할 수 있다. 이를 해결하기 위해서는 window.localStorage.getItem()을 사용하면 원하는 값을 가져올 수 있다... 2023. 4. 15. [컴퓨터 네트워크/스터디] 네트워크 레이어 1. 컴퓨터 네트워크에 대해서 설명해 주세요. ☝🏻 컴퓨터 네트워크가 무엇인지 간략하게 설명해보기 핵심 키워드: 웹, WWW, 인터넷 ✌🏻 컴퓨터 네트워크에 대해 좀 더 자세히 설명해보기 핵심 키워드: 라우터, 호스트, 클라이언트, 서버, IP주소, 스위치, 스위칭 🤟🏻 네트워크에서 컴퓨터들이 어떻게 데이터를 주고 받는지 설명해보기 핵심 키워드: 회선교환방식, 패킷교환방식 ☝🏻 1단계 답변 컴퓨터 네트워크는 데이터를 주고받기 위해 서로 다른 컴퓨터들이 통신망을 통해 연결된 체계입니다. 전 세계가 연결되어 있는 네트워크 중 하나는 인터넷입니다. 인터넷은 컴퓨터 네트워크가 수없이 모여서 이루어진 컴퓨터 네트워크 시스템입니다. 인터넷 서비스의 종류 중의 하나인 WWW는 World Wide Web의 약자로 인터.. 2023. 4. 13. [React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하는 법 주로 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하지만, 종종 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하고 싶은 경우가 있다. 부모 컴포넌트 import React, { useState } from "react"; import Child from "./components/Child"; function Parent() { const [todoList, setTodoList] = useState([]); return ; } export default Parent; 자식 컴포넌트 mport React, { useState } from "react"; function Child({ parentFunction }) { const [data, setData] = useState(2); parentFu.. 2023. 4. 12. 이전 1 ··· 11 12 13 14 15 16 17 ··· 29 다음 728x90 반응형
