• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Node.js, Express 게시판 리액트와 express 연결

리액트와 express 연결

5 글 보임 - 1 에서 5 까지 (총 5 중에서)
  • 글쓴이
  • #82945

    김준기
    참가자
    => 표시가 질문입니다.
    
    리액트 마이페이지 진입시 서버에서 session data를 받아오려고 하는데요
    React - NavberComponent
    <Nav.Link href="http://localhost:8080/mypage">Mypage</Nav.Link>
    
    Nav바에서 Mypage를 클릭해서 서버로 요청을 보내면
    

    -------------------------------------------------------------------------------------------------------------------

    Server.js
    app.get("/mypage", 로그인했니, function (요청, 응답) { 
      console.log(요청.user);                                            =>여기서는 서버 터미널에 session data가 뜨는데
      응답.redirect("http://localhost:3000/mypage");             //mypage로 redirect하기 - 정상작동
    });
    function 로그인했니(요청, 응답, next) {
      if (요청.user) {
        next();
      } else {
        응답.redirect("http://localhost:3000/tologin");                    //로그인이 필요하다는 페이지 - 정상작동
      }
    }
    
    app.get("/session", function (요청, 응답) {                   //mypage로 진입하면 useEffect로 session data를 get요청 받기
      console.log(요청.user);                                          =>왜 여기서는 서버 터미널에 undefined라고 뜰까요?
      // Send user data as JSON
      응답.json(요청.user);
    });
    이렇게 redirect로 리액트에서 라우터한 mypage로 이동하게 해놨는데요

    -----------------------------------------------------------------------------------------------------------------------------------------

    React - Mypage
    function Mypage() {
      var [data, setData] = useState([]);
      //서버에서 데이터 가져오기
      useEffect(() => {
        axios
          .get("http://localhost:8080/session")                               //session data를 get요청 하기
          .then((result) => {                                                       //console 창에 result값이 뜨기는함
            console.log(result.data);
            setData(result.data);
          })
          .catch(() => {
            console.log("실패");
          });
      }, []);
      return (
        <div>
          <h4>마이페이지</h4>{" "}
        </div>
      );
    }
    export default Mypage;
    
    
    #82965

    codingapple
    키 마스터
    리액트 페이지 이동은 리액트라우터 문법 씁시다 
    app.get("/session", 로그인했니, function(){} 추가해보거나 
    app.get("/session", 코드를 passport 설정 밑으로 옮깁시다  
    
    #83037

    김준기
    참가자
    맨 위에 라우터는 생략하고 올렸습니다.
    
    GPT도 말씀해주신대로 하라고 해서 똑같이 해봤는데 대체 왜 안될까요 ㅠㅠㅠ
    
    /session 중간에 '로그인했니'를 삽입하는 거에서는 아예 클라이언트에서 결과값을 받지 못했습니다.
    
    오늘 하루 종일 GPT랑 같이 해결하려고 했는데도 해결이 안됩니당.....
    깃헙에서 잠시 봐주실 수 있을까요...??
    
    https://github.com/junkimkim/kvproject/tree/main
    
    server.js   //Node.js 서버
    react_router_1/src/components/NavBarElement.js    //NavBar 컴포넌트
    react_router_1/src/mypage.js     // 마이페이지
    요 세 파일입니다.
    
    server.js에서     응답.json({ message: "No session data" }); 까지는 클라이언트에서 뜨고 있는데, 
    app.get("/session', 에 '요청.user'에 세션 데이터가 담기지 않고 있습니다.
    
    
    
     
    #83084

    codingapple
    키 마스터
    깃헙에 DB접속 URL같은거 올리면 안됩니다 
    리액트사용시 서버와 ajax요청으로만 통신하는게 좋습니다 로그인도 그렇게 하고 로그인시 쿠키 잘 생성되나 확인해봅시다
    #83088

    김준기
    참가자
    알겠습니당~
    ajax로 해볼게용!
5 글 보임 - 1 에서 5 까지 (총 5 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠