Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- spring-boot
- react
- 리액트
- 인프런
- Python
- 모두의 파이썬
- Colaboratory 글자 깨짐
- googleColaboratory
- Do it 자바스크립트 + 제이쿼리 입문
- Concurrently
- node.js로 로그인하기
- react오류
- 따라하며 배우는 노드 리액트 기본 강의
- props
- Spring-Framework
- intellij
- vs code 내 node
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- 거북이 대포 게임
- 타자 게임 만들기
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- 모던자바스크립트
- 노드에 리액트 추가하기
- DB Browser
- 계산맞추기 게임
- 웹 게임을 만들며 배우는 리액트
- node.js 설치
- JS 개념
- 자바스크립트
Archives
- Today
- Total
프로그래밍 삽질 중
프로젝트 수정 7 - node.js로만 구성된 프로젝트에 리액트 추가(클라이언트 항목 : 로그아웃하기) 본문
* 현재 진행상황
- 프로젝트에 CRUD만 만든 상황
- fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단
- node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정
- 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분)
[로그아웃 만들기 - client 부분]
1. LandingPage에서 '로그아웃'버튼 만들기
2. 구글 크롬에서 확인하기
3. 로그인 -> 처음 페이지('localhost:3000/') -> 로그아웃 버튼 누르고 로그인 페이지로 이동하기
1. LandingPage에서 '로그아웃'버튼 만들기
import React, { useEffect } from "react";
import axios from "axios";
function LandingPage() {
useEffect(() => {
axios.get("/api/home").then((response) => console.log(response));
});
const onClickHandler = () => {
axios.get("/api/user/logout").then((response) => {
}
});
};
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh",
}}
>
<h2>시작페이지</h2>
<button onClick={onClickHandler}>로그아웃</button>
</div>
);
}
export default LandingPage;
2. 구글 크롬에서 확인하기
- 로그인 후 로그아웃 확인 가능함
3. 로그인 -> 처음 페이지('localhost:3000/') -> 로그아웃 버튼 누르고 로그인 페이지로 이동하기
- 로그인하지 않고 로그아웃만 누를 경우 로그아웃 안 된다고 알림 나오기
import React, { useEffect } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom"; //페이지 이동1
function LandingPage() {
const navigate = useNavigate(); //페이지 이동2
useEffect(() => {
axios.get("/api/home").then((response) => console.log(response));
});
const onClickHandler = () => {
axios.get("/api/user/logout").then((response) => {
// console.log(response.data);
if (response.data.success) {
navigate("/login"); //페이지 이동3
} else {
alert("로그아웃하는데 실패했습니다.");
}
});
};
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh",
}}
>
<h2>시작페이지</h2>
<button onClick={onClickHandler}>로그아웃</button>
</div>
);
}
export default LandingPage;
'과거 프로그래밍 자료들 > 프로젝트' 카테고리의 다른 글
[javascript] 여러가지 input 작성, scroll, object 길이 파악하기 (0) | 2022.08.09 |
---|---|
프로젝트 수정 8 - node.js로만 구성된 프로젝트에 리액트 추가(클라이언트 항목 : 인증하기) (0) | 2022.05.16 |
프로젝트 수정 6 - node.js로만 구성된 프로젝트에 리액트 추가(클라이언트 항목 : 회원가입하기) (0) | 2022.05.16 |
프로젝트 수정 5 - node.js로만 구성된 프로젝트에 리액트 추가(클라이언트 항목 : 구성 및 로그인하기) (0) | 2022.05.16 |
프로젝트 수정 4 - node.js로만 구성된 프로젝트에 리액트 추가(서버 항목 : 로그아웃) (0) | 2022.05.14 |