Weeeeey Weeeeey

이미지를 업로드 하기 위해 cloudinary 라는 CDN 을 사용해당 api에서는 위젯과 같은 컴포넌트를 제공하지만 ui가 딱히 예쁘다는 생각이 들진 않아서 따로 사용하지 않고 upload api를 통해서 이미지 파일을 올리기로 함.  ( 문서 링크 )end point는 아래와 같음https://api.cloudinary.com/v1_1/:cloud_name/:action이것을 통해 직접 입력한 값은 const endPoint = `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload`;https://www.postman.com/cloudinaryteam/programmable-media/..

setInterval() 과 useSWR() 은 모두 데이터를 실시간으로 가져오는 방법이지만, 동작 방식과 목적이 다르다. setInterval() setInterval()은 매번 데이터를 가져오기 위해 API에 요청을 보내는 방식이다. 즉, 호출 횟수가 늘어날수록 서버에 부하가 증가한다. 또한 호출 간격을 지정하더라도 정확히 유지하지 못할 수 있고, 데이터를 가져오다 문제가 발생하면 예외가 발생한다. useSWR() useSWR은 데이터를 캐싱하고, 필요에 따라 API에 요청을 보내 데이터를 가져오는 방식이다. 이 방법은 API 요청 횟수가 줄어들고, 가져온 데이터를 캐싱하여 다음 요청시 캐시된 데이터를 리턴함. 호출 실패시에 적절한 에러 처리 가능함 setInterval() && useSWR() =>..

무엇을 선택할까? 결론적으로 말하자면 개발 환경에 따라 다르겠지만 React 프로젝트를 진행할경우 Axios 를 선호하는 경향이 있다고 한다. Axios는 크로스 브라우징에 신경을 많이 쓴 모듈이고 기능또한 우수하기 때문. 어떻게보면 fetch의 상위 호환 Axios 장단점 장점 response timeout 처리 방법이 있다 (fetch 에는 x) promise 기반이라 다루기 쉽다 크로스 브라우징에 신경을 많이 써서 브라우저 호환성 뛰어남 단점 모듈 설치를 해줘야한다. Fetch 장단점 장점 내장 라이브러리여서 별도의 import 및 설치 x promise 기반 프레임워크가 불안정할때 사용하기 좋다 (내장 라이브러리이니까) 단점 internet Exporloer의 경우에 fetch를 지원하지 않는 버..

Fetch HTTP 파이프라인을 구성하는 요청 & 응답 등의 요소를 JS에서 접근하고 조작할 수 있는 인터페이스 제공 네트워크 리소스를 비동기적으로 가져옴 XMLhttpRequest 에 대한 좋은 대체제 요청 fetch("https://example.com/movies.json") .then((res) => res.json()) .then((data) => console.log(data)); 응답은 Response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없다. Response는 HTTP 응답 본문을 그대로 포함하지는 않음 => Response는 HTTP응답 전체를 나타내는 객체이기 떄문 JSON 본문 컨텐츠를 추출하기 위해서는 json() 메소드를 호출해야함. json()은 응답 본문 텍..