프론트(리액트)와 백엔드(스프링부트)연결

Yeeun·2025년 6월 4일

Springboot

SpringBoot

목록 보기

45/46

시험하는법

프론트엔드서버 켜고(securityoauth2jwtreact) npm start

백엔드서버 켜고 (SpringBootSecurityJWTOAuth2)

http://localhost:8080/login 들어가서 oauth 로그인 ( 구글로그인이나)

OAuth2SuccessHandler 보면 마지막에

response.sendRedirect("http://localhost:3000/oauth2/callback");
System.out.println("jwtToken:" + jwtToken);
response.setHeader(HttpHeaders.AUTHORIZATION, jwtToken);
라 되어있음. 즉, 이쪽으로 리다이렉트 해라고 되어있음.

그럼 3000번대 포트 App.js가 실행되고 여기에 있는 코드인 <Route path="/oauth2/callback" element={} /> 이거 실행.

프론트에 JwtCallback.js 보면 const res = await fetch("http://localhost:8080/api/jwtcallback", { 라 되어있으니

이때 백엔드 SecurityController 클래스의 이 메소드가 실행되어서 쿠키랑 토큰이랑 헤더에 다 담김
@PostMapping("/api/jwtcallback")
public ResponseEntity<?> jwtCallBack(HttpServletRequest request){
String jwtToken = null;
Cookie[] cookies = request.getCookies();
for(Cookie cookie : cookies) {
if(!cookie.getName().equals("jwtToken")) continue;
try {
jwtToken = URLDecoder.decode(cookie.getValue(),"utf-8");
}catch(Exception e) {
System.out.println(e.getMessage());
}
break;
}
return ResponseEntity.ok().header(HttpHeaders.AUTHORIZATION, jwtToken).build();
}

네비게이트 홈으로 가라 적혀있어 홈페이지뜸

네, 설명하신 흐름(백엔드 OAuth 로그인 → 3000번 포트로 리다이렉트 → /oauth2/callback에서 JWT 받기)은 전체적으로 맞습니다.
하지만 "로그인 처리중입니다..."가 안 뜨고 바로 홈페이지 글자가 뜨는 이유는 React 라우팅/렌더링 구조 또는 리다이렉트 타이밍 문제 때문일 가능성이 높습니다.

1. 설명하신 흐름 요약

백엔드에서 OAuth 로그인 성공
- response.sendRedirect("http://localhost:3000/oauth2/callback");
- response.setHeader(HttpHeaders.AUTHORIZATION, jwtToken);
프론트엔드(React)
- /oauth2/callback 경로에 `` 컴포넌트가 매핑됨
- JwtCallback.js에서 백엔드에 토큰 요청 → 토큰 저장 → navigate('/')로 홈으로 이동

2. "로그인 처리중입니다..."가 안 뜨는 이유

A. 리다이렉트가 너무 빨라서

JwtCallback 컴포넌트가 마운트되자마자 useEffect에서 토큰 요청 후
바로 navigate('/')로 홈으로 이동합니다.
이 과정이 매우 빠르게 일어나기 때문에
로그인 처리 중입니다...가 화면에 거의 보이지 않고
바로 홈페이지로 이동하게 됩니다.

B. 라우팅 구조 문제

만약 App.js에서 / 경로에 바로 `같은 컴포넌트를 매핑해두었다면 navigate('/')`가 실행되면서 즉시 홈 컴포넌트가 렌더링됩니다.
이때, "로그인 처리중입니다..."는 아주 잠깐 렌더링되거나,
React의 렌더링 최적화 때문에 아예 보이지 않을 수도 있습니다.

C. 추가 가능성: 라우팅/컴포넌트 등록 문제

만약 } />가
제대로 등록되어 있지 않거나,
`` 내부에서 에러가 발생해 곧바로 navigate가 실행되지 않는 경우
해당 경로에서 원하는 컴포넌트가 보이지 않을 수도 있습니다.
하지만, 콘솔에 "JWT 저장됨" 로그가 뜬다면 useEffect는 정상 동작한 것입니다.

3. 실제로 어떤 현상인가?

이미지를 보면 홈페이지 글자만 보이고,
콘솔에는 "JWT 저장됨: ..." 로그가 찍혀 있습니다.
즉, /oauth2/callback에 잠깐 들어왔다가
바로 /(홈)으로 이동한 상태입니다.

4. 만약 "로그인 처리중입니다..."를 보이게 하고 싶다면?

navigate('/')를 토큰 저장 후에 바로 실행하지 말고,
setTimeout 등으로 1초 정도 딜레이를 주면
"로그인 처리중입니다..."가 잠깐이라도 보입니다.

예시:

if (jwtToken) {
    localStorage.setItem('jwtToken', jwtToken);
    console.log('JWT 저장됨:', jwtToken);
    setTimeout(() => {
        navigate('/');
    }, 1000); // 1초 후 홈으로 이동
}