전역변수 지역변수 대부분 지역변수로 설정하는 것이 좋음 전역 변수 -> 손자 컴포넌트 같은 경우에 사용, 무분별한 사용으로는 디버깅하기 힘들며 변할 우려가 있음 react-Query staleTime, cacheTime : 설정 잘해서 비교할 것 staleTime -> data가 stale 되는 시점을 결정하는 시간 - 이 시간이 지나면 data가 stale 돼었다고 판단 - stale 됐다 -> 데이터가 오래되었으니 다시 fetch (refresh) Date stale - cache Time 지나지 않으면 cache에서 가져오고 - cahch Time이 지나면 -> HTTP request를 다시 날린다. - refetchOnMount: false 프론트엔드 TDD -> (멘토) 굳이 할 필요없지만, 면..

글씨체, 화면에서 굉장히 중요하지만 성능은? 다양한 폰트(Font)를 적용해야 할 때가 있다. ttf를 로컬로 다운받거나, import로 가져오거나 여러 방법이 있었다. 어떤 방식이 로딩 속도를 개선할 수 있는지 알아봤다. 로딩속도 woff2 > woff > ttf 웹폰트를 사용하는 방식 빠르고 편리한 웹폰트를 사용하는 방식이다. CDN : Contents Delivery Network (콘텐츠 전송 네트워크) CDN 네트워크 통신을 하면서 서버로부터 폰트를 가져온다. HTML의 Head 영역에 link를 연결하면 사용가능 하며 폰트를 불러올 때마다 통신을 해야한다. @import url('https://fonts.googleapis.com/css2?family=Grandiflora+One&display..

OAuth 2.0에서 프론트에서 리다이렉트 페이지를 어떻게 구현해야 하는지, 해당 페이지가 왜 필요한 건지 알아봤다. 결론적으로, 리다이렉션 페이지에서 로그인 성공/실패를 처리해야 한다. 사건의 발단 매번 간편하게 카카오톡 로그인 버튼을 사용하기 위해서 컴포넌트화하였다. SVG라 이미지를 등록하지 않아도 코드를 복붙하면 바로 카카오 로그인 버튼이 생겨난다. 리다이렉션 페이지는 로그인 성공페이지로 작업하였다. 아래는 문제의 코드이다. 코드 보기더보기import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import { BASE_URL }..

문제상황 프론트엔드라면 서버를 통해 API를 호출하면서 렌더링 문제를 마주하게 된다. useEffect와 useState를 통해 데이터를 설정해놔도 다시 호출하면서 다시 빈 데이터가 등록되거나 데이터가 사라지고 실시간 연동이 안되는 등 너무나도 코드가 지저분해지는 문제가 발생했다. 따라서 깔끔하게 API를 관리하는 방법의 필요성을 느꼈다. 특히 리액트는 컴포넌트별로 관리하기 때문에 개발을 하다보면 내부의 컴포넌트에 API를 호출하면서 중복호출 되는 경우가 생긴다. 깔끔하게 코딩하는 방법에 대해 알아보자. 아래의 글에서 API 요청 관리를 관리하는 사례가 적혀있다. 아래를 참고하여 작성하였다. https://github.com/Ubermensch0608/organize-api-requests GitHub ..

문제상황 아래 글에서 내용이 이어집니다. https://dingx2-story.tistory.com/101 [React] CORS from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is pr문제상황 Access to XMLHttpRequest at 'http://localhost:8080/booking/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource..

문제상황 Access to XMLHttpRequest at 'http://localhost:8080/booking/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 정리 0. 응답 패킷에 Access-Control-Allow-Origin 이 있는지 확인하기 1. package.json이나 setupProxy.js가 작동해서 3000포트가 아닌 것을 네트워크-요청URL에서 확인하기 => domain이 같아서 localhost:3000에서 데이터를 가져올 수 있는 경우가 있다. 이러면 백엔드에서..