setInterval을 react에서 사용하면서 생기는 문제를 만났습니다. 생각하지 못했던 경험이었고 이해하는데 헷갈린 부분이 많아 글로 정리해봤습니다. 코드는 아래와 같습니다. import React, { useState, useEffect } from "react"; function App() { const [count, setCount] = useState(0); setInterval(() => { setCount(count + 1); }, 1000); return ( {`${count}`} ); } export default App; 위 코드를 실행하면 setInterval로 인해 1초에 한번씩 count값이 1씩 올라갈줄 알았지만 생각처럼 실행되지 않았습니다. 위와 같이 숫자가 줄었다 커졌다 하..
이번 글에선 리액트에서 사용하는 대표적인 fetch라이브러리인 axios에 대해 알아보고 직접 공휴일 데이터를 호출해보겠습니다. 이번 글에선 공공데이터포털에서 휴일데이터를 받아와 출력해주는 프로젝트를 만들어보겠습니다. 또 리따배에서 만든 달력 프로젝트에 휴일을 표시하는 기능을 넣어주는 것도 좋을 것 같습니다. 우선 대부분 api는 get또는 post 방식으로 호출하게 되는데요. 이 둘의 차이를 먼저 간단하게 확인해보겠습니다. get과 post알아보기 api를 호출할 때 대표적으로 사용하는 방식인 get과 post에 대해 알아보겠습니다. 1. get 특징 : url뒤에 매개변수를 적어 서버에 전달한다. https:localhost/getdata?name=doyeon&age=29&nickname=doyeon..
React는 .env를 이용해 누군가 보면 안되는 데이터를 보관할 때 사용하는데요. apikeyr같은 중요한 값들을 따로 보관할 수 있도록 도와줍니다. .env 파일에 환경변수를 정의하여 변수로 받아오는 이유는 보안 뿐만 아니라 유지보수 측면에도 용이합니다. apikey를 예로 들었으니 api호출하는 경우를 유지보수측면에서 설명해보겠습니다. a.tsx는 유튜브 `url/search` 라는 곳에서 데이터를 받아와야하고 b.tsx는 유튜브 `url/channel` 이라는 곳에서 데이터를 받아와야합니다. 이런 경우 하드코딩을 하면 각 url위에 apikey를 넣게 되는데, apikey가 만료되거나 바꿔야하는경우 모든 파일을 훑어 apikey를 직접 찾고 바꿔줘야하는 불편함이있습니다. .env파일에 데이터가 저..
최근 포트폴리오 웹사이트를 만드는 중 문제가 생겨 애를 먹었습니다. 제가 운영하는 유튜브 채널의 데이터를 받아오기 위해 axios를 사용하는데 이렇게 정상적으로 글자가 나오지 않고 위 사진처럼 글자가 깨지는 현상이 있었습니다. status나 statusText,headers 등 대체적으로 모든 데이터가 제대로 들어왔으나 정작 중요한 response.data는 깨짐현상이 발생했습니다. axios가 아닌 fetch를 써도 정상적인 데이터가 나오지 않았습니다. 구글에 한글로 문제를 검색해도 한글 깨짐현상만 나올 뿐 근본적인 해결책을 찾지 못했습니다. 하지만 영어로 검색하니 바로 해결책이 나오더군요. Error response data nodejs · Issue #5298 · axios/axios Describ..
