Router 썸네일형 리스트형 [React] 로그인 여부 확인 - Auth [Node.js] Auth 기능 만들기 (tistory.com) [Node.js] Auth 기능 만들기 https://youtu.be/OGVsnbEbSLM?si=Wvx3Btu8ptwH0WYH 본 포스팅은 John Ahn님의 유튜브 강의를 참고하였습니다. 웹 서비스에서는 로그인 여부에 따라 접속할 수 있는 페이지가 있고, 회원만 사용할 수 있는 페이지 pufrontend.tistory.com 서버에서 만든 Auth 기능을 만들었었습니다. 클라이언트에도 적용시킬 차례입니다. hoc 폴더를 만들고 Auth.js 파일을 만들어 줍니다. import React, { useEffect } from 'react'; import Axios from 'axios'; import { useDispatch } from 'r.. 더보기 [React] 투두리스트 로그인 구현하기2 이번 시간에는 리액트 라우터 돔의 라우팅을 통해 메인페이지, 로그인, 회원가입 페이지를 분리해보도록 하겠습니다. 먼저 app.js에 루트(경로)들을 만들어 줍니다. import {BrowserRouter, Routes, Route} from "react-router-dom"; import를 해주고 function App() { return ( ); } 루트를 만듭니다. import React, { useState } from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; const TodoTemplateBlock = styled.div` width: 512px; height: 7.. 더보기 [React] useNavigate를 사용해 상세페이지 만들기 안녕하세요! 오늘은 버튼을 누르면 상세페이지로 이동하게 만들어 보는 시간을 가져보겠습니다. 출발해 볼까요 : - ) 위에 보시면 있는 노란색 버튼을 누르면 각각 과자페이지, 라면페이지 등으로 이동하는 기능을 구현해 보겠습니다. 먼저 상세페이지를 만들려면 React-Router-Dom이라는 것을 사용하는 것이 일반적입니다. 이걸 먼저 설치해 줍시다. 새 터미널을 여시고 npm install react-router-dom@6를 입력해 주시면 됩니다. 설치가 완료되면 index.js로 이동합니다. import {BrowserRouter} from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root... 더보기 이전 1 다음
