전역변수 지역변수 대부분 지역변수로 설정하는 것이 좋음 전역 변수 -> 손자 컴포넌트 같은 경우에 사용, 무분별한 사용으로는 디버깅하기 힘들며 변할 우려가 있음 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 }..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

이 글만 읽는다면 배포할 수 있길 바라면서 1. AWS 인스턴스 생성 1.1. 인스턴스 시작 1.2. 보안 그룹 설정 1.3. 탄력적 IP 설정 2. putty + nginx 리액트 배포 2.1. putty로 서버 접속하기 2.2. nodejs 설치하기 (버전유의) 2.3. git clone 받기 2.4. npm 업그레이드하기 2.5. nginx 설치하기 2.6. 서버실행하기 서론 shareIT 프로젝트를 하면서 nginx를 이용한 React 배포를 담당하였습니다. 미래의 내가 이것만 읽고 배포하면 얼마나 좋을까요. 숙련자를 위한 nginx 코드모음집 아래에 업데이트 예정 토끼를 따라가면서 하나씩 해보시면 배포하실 수 있을 겁니다 ! ☘️ 행운이 있길 바라면서 진행 단계가 넘어갈 때마다 클로버를 두겠습니..