강의

멘토링

커뮤니티

개발 · 프로그래밍

/

웹 개발

Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기

Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기는 JWT 기반 인증 및 소셜 로그인(Kakao/Google)을 포함한 실전형 로그인 시스템을 직접 구현하며 프론트엔드와 백엔드 인증 흐름을 깊이 이해할 수 있도록 설계된 강의입니다. 프론트엔드는 React.js, 백엔드는 Spring Boot를 기반으로 구성되며, 실제 서비스 환경에서 사용되는 Access Token + Refresh Token 방식, HttpOnly Cookie, Redux를 활용한 사용자 상태 관리, Role 기반 권한 처리, 소셜 로그인 연동까지 하나씩 따라하며 익힐 수 있습니다.

(4.6) 수강평 13개

수강생 156명

난이도 초급

수강기한 무제한

  • 영넨
실습 중심
실습 중심
백엔드이해하기
백엔드이해하기
리액트감잡기
리액트감잡기
로그인
로그인
소셜로그인
소셜로그인
실습 중심
실습 중심
백엔드이해하기
백엔드이해하기
리액트감잡기
리액트감잡기
로그인
로그인
소셜로그인
소셜로그인

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

4.6

5.0

오일중

100% 수강 후 작성

안녕하세요 답변도 거의 바로바로해주시고 강의도 너무 길지않고 적당하고 너무 좋았습니다. 감사합니다!

5.0

east0321

61% 수강 후 작성

로그인에 대해서 쉽게 접근할 수 있었어요. 로그인 처리에 대해 궁금하시다면 이 강의 보면 좋을 거 같아요. 코드 자체만 제공 받고 어떤 매커니즘인지만 알아도 이 정도 가격은 괜찮은 것 같습니다.

5.0

이탁곤

61% 수강 후 작성

처음 리엑트 하는데 친절하게 차근차근 알려줘서 좋았습니다. 실수하는 부분은 편집 했으면 하는 아쉬움이 있습니다. 시간은 금이기 때문에...

수강 후 이런걸 얻을 수 있어요

  • Spring Boot 환경에서의 Spring Security 설정 및 JWT 로그인 구현

  • React에서 Axios와 Redux를 활용한 비동기 로그인/회원가입 처리

  • Access Token + Refresh Token 구조 및 자동 재발급 로직 구현

  • 로그인 유지(자동 로그인) 및 Redux 상태 초기화 문제 해결법

  • 사용자 권한(Role)에 따른 페이지 접근 제어 및 보호 처리

  • 소셜 로그인 (카카오/구글) 연동 및 인가 코드 → JWT 처리 흐름

  • JWT의 Payload에서 유저 정보를 꺼내어 Redux에 저장하고 활용하는 방법

  • HttpOnly 쿠키를 통한 Refresh Token 보안 처리 및 백엔드 로그아웃 처리

Spring Boot & React.js로 배우는 실전형 로그인 (+소셜) 서비스 구현하기 🔐

이 강의에서는 Spring Boot와 React.js를 활용하여 JWT 기반 로그인 시스템소셜 로그인(Kakao, Google)을 구현해봅니다. 이론보다는 실습 위주로 강의가 진행 됩니다!
프론트엔드와 백엔드의 인증/인가 구조를 직접 다뤄보며, 토큰 기반 인증 시스템의 전체 흐름을 실습 중심으로 이해할 수 있도록 구성했습니다.

HttpOnly 쿠키, Access/Refresh Token 관리, 자동 로그인 유지, 권한(Role)에 따른 접근 제어,
소셜 로그인 리디렉션 처리까지 — 실전 서비스에서 꼭 필요한 인증 로직을 함께 구현하며
초보 개발자도 프론트·백엔드 인증의 핵심 구조를 체득할 수 있습니다.

🎯 이 강의는 이런 것을 배워요

  • POSTMAN을 사용하여 JWT 기반 로그인 / 회원가입 API 설계 및 구현

  • Spring Security를 활용한 API 인증 구조 구축

  • React.js에서 Redux를 활용한 로그인 상태 관리

  • Access Token + Refresh Token을 활용한 인증/인가 흐름

  • 토큰 만료 시 자동 재발급 (Refresh) 처리 로직

  • 로그인 유지 (자동 로그인) 및 로그아웃 처리

  • 사용자 권한(Role)에 따른 관리자/일반 사용자 페이지 분기

  • 카카오 / 구글 소셜 로그인 연동 및 리디렉션 처리

  • HttpOnly Cookie를 활용한 보안 강화 전략


이런 분들께 추천해요

  • 실전형 JWT 로그인/소셜 로그인 구조를 만들고 싶은 분

  • 프론트와 백엔드를 직접 구현하며 인증 흐름을 이해하고 싶은 웹 개발자

  • 토큰 인증, 자동 로그인, 권한 분기까지 경험하고 싶은 분

  • 나만의 로그인 기능이 포함된 서비스를 직접 만들어보고 싶은 분

  • 포트폴리오에 보안이 고려된 로그인 시스템을 추가하고 싶은 분

이런 내용을 배워요.

Spring Boot를 이용한 로그인 API 구현

  • Spring Security 설정

  • JWT 발급 및 검증 로직 작성

  • 사용자 권한(Role)에 따른 분기 처리

  • Refresh Token을 HttpOnly Cookie로 관리

React.js를 활용한 사용자 인터페이스 제작

  • 로그인/회원가입 페이지 제작

  • Redux를 이용한 로그인 상태 관리

  • Axios로 로그인/회원가입/자동 로그인 처리

  • 관리자 전용 페이지 접근 제어

  • 소셜 로그인 버튼 UI 및 인가 코드 처리 로직

수강 전 참고 사항

실습 환경

  • 운영 체제: Windows / macOS

  • 개발 툴: IntelliJ, VS Code, MySQL Workbench, PostMan

  • 백엔드: Spring Boot 3.x

  • 프론트엔드: React 18

학습 자료

  • 노션 링크로 제공해 드립니다!

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • Spring Boot + React.js를 활용한 풀스택 인증 구조를 처음부터 끝까지 구현해보고 싶은 분

  • JWT 인증 방식과 토큰 구조에 대한 실무 감각을 익히고 싶은 웹 개발자

  • 카카오/구글 소셜 로그인을 프로젝트에 직접 적용해보고 싶은 분

  • 토이 프로젝트 이상의 인증/인가 구조를 실전 프로젝트에 녹이고 싶은 분

  • 프론트와 백엔드 인증 흐름을 명확하게 이해하고 싶은 웹 개발 입문자~중급자

선수 지식,
필요할까요?

  • Java + Spring Boot 기본 구조 이해

  • React.js 기초 컴포넌트 구조와 상태 관리(useState, useEffect 등)

  • Axios를 통한 API 호출 기본

  • > 단, 강의는 입문자도 따라올 수 있도록 단계별로 차근차근 진행되며, 필요한 부분은 코드와 흐름을 함께 설명합니다.

안녕하세요
입니다.

520

수강생

59

수강평

13

답변

4.5

강의 평점

3

강의

웹 개발을 하다가 게임 개발에 빠져 살고 있는 개발자 입니다!

항상 배우는 마음가짐으로!

커리큘럼

전체

31개 ∙ (4시간 55분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

13개

4.6

13개의 수강평

  • 용우님의 프로필 이미지
    용우

    수강평 5

    평균 평점 5.0

    5

    32% 수강 후 작성

    • 김종진님의 프로필 이미지
      김종진

      수강평 4

      평균 평점 5.0

      5

      32% 수강 후 작성

      • 토니님의 프로필 이미지
        토니

        수강평 1

        평균 평점 4.0

        4

        74% 수강 후 작성

        소셜 로그인 쪽 부분 설명은 부족한 거 같습니다

        • 이현우님의 프로필 이미지
          이현우

          수강평 1

          평균 평점 5.0

          5

          32% 수강 후 작성

          • 송한빈 (참지못해)님의 프로필 이미지
            송한빈 (참지못해)

            수강평 1

            평균 평점 5.0

            5

            32% 수강 후 작성

            ₩12,100

            영넨님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!