React / Spring 통신

앞서 React로 만들어 놓았던 웹 페이지와 Spring의 통신

 

react 파일에 설치

 

npm install axios

axios → node기반 js 프로젝트에서 http 통신시켜줌

npm install react-cookie
cookie 로그 남길 때 

 

이전에 만들어 둔 회원가입 페이지 연동

 console.log('axios 이전☆')

    // js는 비동기 처리 → 작업 중 대기 시간을 기다리지 않고 따로 작동시켜놓고 다음 작업으로 넘어감
    // 통신을 위한 axios, post : backend의 주소 담기, then : 작업 처리, catch : 에러 처리
    //? 1. 비동기 처리 (then 방법)
    axios.post(SIGN_UP_URL, data)
    .then((response) => {
      const { result, message, data } = response.data as ResponseDto<SignUpresponseDto>; 

      if(result) setLoginView(true);
      else alert(message);
      
    })
    .catch((error) => { 
      console.log(error.response.status);
    });

    // await : 작업이 끝날 때 까지 기다리기 → 동기 처리
    // 호출되는 함수의 매개변수 앞에 async 붙여서 동기처리 해줘야됨
    // 도중에 에러 터지면 다음 작업 실행하지 않음
    // const response = await axios.post("http://localhost:4040/auth/sign-up", data);

    console.log('axios 이후★')

 

로그인 페이지 연동

axios.post(SIGN_IN_URL, data)
      .then((response) => {
        const { result, message, data } = response.data as ResponseDto<SignInResponseDto>;

        if (result && data) {
          const { token, expiredTime, ...user } = data;
          //? 로그인 처리
          //? 쿠키에 로그인 데이터 (Token) 보관
          const now = new Date().getTime();
          const expires = new Date(now + expiredTime);
          setCookie('accessToken', token, { expires });

          //? 스토어 유저 데이터 보관
          setUser(user);
          navigator('/');

          alert('로그인 성공');
        }
        else alert('로그인 정보가 잘못되었습니다.');
      })
      .catch((error) => { // 에러 처리는 여기에 한 번에 다 몰아서하는 것 보단 할 수 있는 건 위에서 걸러주고 들어오기?
        console.log(error.message);
      });

 

axios로 통신하려면 react / spring 두 군데다 서버켜줘야한다.

난 하나의 창으로 2개 다 키려니 실행이 안되서 창 2개 켜서 실행시켜주었음