프론트엔드로 가는 길/portfolio 제작 여정기 👩🏻💻16 리쿠르탐_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. 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. UGSM_Step page 데이터 저장 내가 짠 코드 1. userAddInfo const UserAddInfo = () => { const [userData, setUserData] = useState({ nickname: "", birth: "", gender: "" }); const [step, setStep] = useState(1); const [phone, setPhone] = useState(""); // 휴대폰 인증번호 const [phoneAuthNumber, setPhoneAuthNumber] = useState(""); // 휴대폰 번호 입력 const handlePhoneChange = (event: React.ChangeEvent) => { setPhone(event.target.value); }; // 휴대폰 인증번호.. 2023. 12. 23. 1. UGSM_단계별 페이지 이동 궁금한 게 생겼다. 단계별 페이지 이동을 step-wizard으로 가는 게 좋은가, 그냥 링크로 가는 게 좋은가 step-wizard로 설정 순차적으로 진행되기 때문에 오류를 방지 할 수 있는 점에서 step-wizard를 선택했다. const [step, setStep] = useState(1); // 최소, 최대 값 const updateStep = (newStep: number) => { setStep(Math.max(1, Math.min(newStep, 4))); }; const handleNextStepChange = () => { updateStep(step + 1); }; const handlePreviousStepChange = () => { updateStep(step - 1); }; 최.. 2023. 12. 21. 이전 1 2 3 4 다음
