본문 바로가기

전체 글164

리쿠르탐_createBrowserRouter 적용 라우터를 정리하고 싶었다. 찾아보니 v6.4에 새로운 router가 추가됐다. 그래서 createBrowserRouter를 접목하고자 했다. function App() { const location = useLocation(); const isHome = location.pathname === "/"; return ( {isHome ? : null} ); } export default App; v6.4에는 다음과 같은 새로운 router가 추가되었다. createBrowserRouter 동적 페이지에 적합 검색엔진 최적화 github-pages 배포 어려움 createMemoryRouter createHashRouter 정적 페이지에 적합 검색 엔진으로 읽지 못함 github-pages 배포 쉬움 cre.. 2023. 12. 26.
종속성 충돌 발생 타입스크립트 버전과 다른 패키지 간의 충돌이라 생각했다. npm list typescript 이 코드로 타입스크립트의 버전을 확인하고 호환되는 버전인지 확인 그 결과, 🌟뾰로롱🌟 우선 error log를 보면 typescript@5.3.3 설치 완료. react-scripts와 @typescript-eslint/eslint-plugin등이 해당 버전과 호환되지 않는다는 말씀 => 타입스크립트 버전이나 종속성 패키지 버전을 조정 필요 해결 방법 이것 저것 해보다가, 계속 되는 오류에 기존 패키지를 모두 제거하고 다시 설치했다 npm uninstall typescript react-scripts @typescript-eslint/eslint-plugin npm install typescript@4.5.4 r.. 2023. 12. 25.
React 모바일웹 화면 딱맞게 구현 1. App.js에 코드 작성 function setScreenSize() { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", `${vh}px`); } useEffect(() => { setScreenSize(); }); 사용자가 접속할 때 이 함수가 사용자의 뷰포트 높이를 계산하고, 그 값을 --vh라는 css 변수에 저장해준다. 1) window.innerHeight * 0.01; => 현재 브라우저의 뷰포트 높이 X 0.01 = 뷰높이의 1% 왜 1%를 알아야합니까? 주로 모바일 기기에서 발생하는 주소 표시줄과 같은 상단의 브라우저 ui영역이나 하단의 내비게이션 바와 같은 ui 영역 때문 .. 2023. 12. 25.
petDairy_.env 파일 문제 [.env] # 카카오톡 KAKAO_CLIENT_ID=** KAKAO_CALLBACK_URL=** [social.tsx] const KAKAO_CLIENT_ID = process.env.KAKAO_REST_API_KEY; const KAKAO_CALLBACK_URL = process.env.KAKAO_CALLBACK_URL; const kakaolink = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${KAKAO_CALLBACK_URL}&response_type=code`; 클라이언트 컴포에서 환경변수를 호출했지만 브라우저 콘솔에는 undefined가 출력이 됐다. 왜 이런 문제가 생긴걸까? 변수 이.. 2023. 12. 24.

티스토리툴바