[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 기존 React + Spring Boot 소셜 로그인 코드 삭제하기

기존에 리액트와 스프링부트 지식이 없는 상태에서 인터넷에서 찾은 지식만으로 프로젝트를 만들었더니, 스프링 프로젝트를 켜지 않으면 리액트 프로젝트도 수정할 수 없는 매우 귀찮은 상태가 돼 버렸다.

어차피 앞으로 진행할 프로젝트의 백엔드 부분은 node.js와 express를 사용하게 될 테니 스프링부트 코드는 이제 쓸모가 없는 상황이다. 따라서 프로젝트를 다시 시작하기 전에 가장 먼저 해야 할 것이 리액트와 스프링부트 연동을 해제하는 일이었다.

 

 

인텔리제이 Run 활성화

스프링부트 실행 시 run 활성화가 되어 있지 않아서 구글링을 통해 해결방법을 찾아보았다. 아래 블로그를 보고 해결했다.

[JAVA] intellij Run 비활성화 시 해결 방법

(혹시나 다시 스프링부트를 다루게 될지도 모르니 미리 저장해둔다.)

 

 

소셜 로그인 관련 코드 삭제

이제 해야하는 일은 로그인 관련 로직을 전부 삭제하는 일이다.

이전에 미리 소셜 로그인 구현 과정을 포스팅해 놓았고, 덕분에 소셜 로그인 구현 코드를 추적하기가 용이했다.

[React/Spring Boot/MySQL] 리액트+스프링부트 OAuth2 Google, Facebook, Github 소셜로그인 구현 일지 (스프링 구

해당 포스팅을 확인하며 로그인과 관련된 코드는 모두 삭제했다.

진입을 못 하게 막아놨던 부분이 router.jsx 부분이었는데 막혀있던 부분을 전부 해제했다.

 

router.jsx

import React, { useEffect, useState } from "react";
...
import LoadingIndicator from "../components/common/LoadingIndicator";
import OAuth2RedirectHandler from "../components/user/oauth2/OAuth2RedirectHandler";
import { getCurrentUser } from "../components/util/APIUtils";
import { ACCESS_TOKEN } from "../components/constants";

function AppRouter() {
  const [loginInfo, setloginInfo] = useState({
    authenticated: false,	//로그인 여부
    currentUser: null,	//로그인 유저
    loading: true,	//로딩o
  });

  useEffect(() => {	//useEffect: 컴포넌트 렌더링 시 특정작업을 실행
    getCurrentUser()
      .then((response) => {
        setloginInfo({
          currentUser: response,
          authenticated: true,	//로그인o
          loading: false,	//로딩x
        });
      })
      .catch((error) => {
        setloginInfo({
          loading: false,
        });
      });
  }, []);

  //로그아웃 함수
  const handleLogout = () => {
    localStorage.removeItem(ACCESS_TOKEN);	//ACCESS_TOKEN을 제거한다.
    setloginInfo({
      authenticated: false,	//로그인x
      currentUser: null,	//로그인 유저를 null로 setting
    });
    if (alert("로그아웃되었습니다.")) {
    }
    document.location.href = "/";	//초기화면으로 이동
  };

  if (loginInfo.loading) {	//loading이 true이면 로딩화면을 보여준다.
    return <LoadingIndicator />;
  }
  return (
    <div>
      <Router>
      	{/*로그인이 되어 있으면 사이드바에 사용자 정보를 set하고, logout 버튼을 활성화시킨다.
        로그인 되어 있지 않을 시 아무런 액션도 실행하지 않는다.*/}
        {loginInfo.authenticated ? <Sidebar userInfo={loginInfo} logoutAction={handleLogout} /> : <></>}
        <Routes>
          <Route exact path="/" element={<LoginPage userInfo={loginInfo} />} />
          <Route path="/main" element={<Dashboard userInfo={loginInfo} />} />
          ...
          <Route path="/oauth2/redirect" element={<OAuth2RedirectHandler />}></Route>
          <Route path="/signup" element={<SignUpPage userInfo={loginInfo} />} />
          <Route path="/login" element={<LoginPage userInfo={loginInfo} />} />
        </Routes>
      </Router>
    </div>
  );
}

export default AppRouter;

import React, { useEffect, useState } from "react";
...

function AppRouter() {
  const [loginInfo, setloginInfo] = useState({
    authenticated: false,
    currentUser: "임시",
    loading: false,
  });

  if (loginInfo.loading) {
    return <LoadingIndicator />;
  }

  return (
    <div>
      <Router>
        <Sidebar userInfo={loginInfo} />
        <Routes>
          <Route path="/" element={<Dashboard userInfo={loginInfo} />} />
          <Route exact path="/login" element={<LoginPage userInfo={loginInfo} />} />
          <Route path="/inex" element={<AccountBookPage />} />
          <Route path="/calendar" element={<CalendarPage />} />
          <Route path="/friendlist" element={<FriendListPage />} />
          <Route path="/challenge" element={<ChallengePage userInfo={loginInfo.currentUser} />} />
          <Route path="/community" element={<CommunityPage userInfo={loginInfo.currentUser} />} />
          <Route path="/setting" element={<SettingPage userInfo={loginInfo.currentUser} />} />
          <Route path="/oauth2/redirect" element={<OAuth2RedirectHandler />}></Route>
          <Route path="/signup" element={<SignUpPage userInfo={loginInfo} />} />
          <Route path="/login" element={<LoginPage userInfo={loginInfo} />} />
        </Routes>
      </Router>
    </div>
  );
}

export default AppRouter;

 

 

이후에 로그인/회원가입 페이지의 인증 로직도 제거한 후에, 시작 화면을 대시보드로 변경했다.

이렇게만 진행해도 백엔드 없이 잘 돌아간다.

이제 지저분하게 작성해 놓았던 코드들을 정리하고 필요없는 페이지를 삭제하여 프론트엔드 초안을 완성할 예정이다.