Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
개발 · 프로그래밍

/

웹 개발

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

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

(4.8) 수강평 6개

수강생 108명

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

이런 걸 배울 수 있어요

  • 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 로그인/소셜 로그인 구조를 만들고 싶은 분

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

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

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

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

이런 내용을 배워요.

화면 캡처 2025-07-08 220532

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

  • Spring Security 설정

  • JWT 발급 및 검증 로직 작성

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

  • Refresh Token을 HttpOnly Cookie로 관리

화면 캡처 2025-07-08 220619

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

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

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

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

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

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

수강 전 참고 사항

✅ 실습 환경

  • 운영 체제: Windows / macOS

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

  • 백엔드: Spring Boot 3.x

  • 프론트엔드: React 18

학습 자료

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

화면 캡처 2025-07-08 220707

이런 분들께
추천드려요

학습 대상은
누구일까요?

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

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

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

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

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

선수 지식,
필요할까요?

  • Java + Spring Boot 기본 구조 이해

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

  • Axios를 통한 API 호출 기본

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

안녕하세요
입니다.

382

명

수강생

35

개

수강평

9

개

답변

4.6

점

강의 평점

3

개

강의

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

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

커리큘럼

전체

31개 ∙ (4시간 55분)

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

수강평

전체

6개

4.8

6개의 수강평

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

    수강평 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

            영넨님의 다른 강의

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

            Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기강의 썸네일

            Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기

            영넨

            Spring Boot와 React.js로 초간단 게시판을 손쉽게 구축하는 실전 강의! 이 강의는 이론은 덜고, 실습에 집중하여 빠르게 완성하는 웹 애플리케이션 개발 과정을 담았습니다.

            입문

            입문

            Spring Boot, react.js, JPA

            Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기강의 썸네일

            Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기

            영넨

            React.js + Node.js 롤 전적 검색 사이트 만들기강의 썸네일

            React.js + Node.js 롤 전적 검색 사이트 만들기

            영넨

            이 강의는 Riot Games API를 활용하여 React.js와 Node.js를 이용한 '리그 오브 레전드 전적 검색 사이트'를 직접 만들어보는 실습 중심 강의입니다. 수강생은 기본적인 API 사용법부터, 프론트엔드(React.js)와 백엔드(Node.js, Express.js) 연동, 전적 데이터 시각화, 그리고 op.gg 스타일의 UI 구현까지 프로젝트를 단계별로 따라하면서 실습을 통해 자연스럽게 배우게 됩니다. 복잡한 이론보다는 코드 중심으로 '직접 따라 만들기'를 통해 빠르게 결과물을 경험할 수 있습니다.

            입문

            입문

            React, Node.js, api

            React.js + Node.js 롤 전적 검색 사이트 만들기강의 썸네일

            React.js + Node.js 롤 전적 검색 사이트 만들기

            영넨

            비슷한 강의

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

            ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0강의 썸네일

            ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0

            개발자Park

            외국기업,대기업에서 주로 사용하는 ASP.NET Core를 다룹니다.

            초급

            초급

            ASP.NET Core, C#, MVC

            ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0강의 썸네일

            ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0

            개발자Park

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

            코드캠프

            수백명의 개발자를 배출한 ‘진짜’ 부트캠프의 완벽한 프론트엔드 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [코드캠프]가 준비했습니다 :)

            입문

            입문

            React, Next.js, GraphQL

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

            코드캠프

            누구보다 빠르게 배우는 Nginx + Docker + Springboot 서버 무중단 배포강의 썸네일

            누구보다 빠르게 배우는 Nginx + Docker + Springboot 서버 무중단 배포

            Neo

            이 강의는 Nginx, Docker, Spring Boot를 활용한 서버 무중단 배포 방법을 실습 중심으로 빠르게 익힐 수 있도록 설계되었습니다. 실무에서 자주 사용되는 Blue-Green 배포를 누구보다 빠르게 배워보세요!

            초급

            초급

            Kotlin, Docker, Spring Boot

            누구보다 빠르게 배우는 Nginx + Docker + Springboot 서버 무중단 배포강의 썸네일

            누구보다 빠르게 배우는 Nginx + Docker + Springboot 서버 무중단 배포

            Neo

            [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일

            [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

            닭강정

            React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

            초급

            초급

            React, Electron, GUI

            [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일

            [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

            닭강정

            [개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발강의 썸네일

            [개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발

            Dowon Lee

            이 강의는 Spring Boot를 이용해서 RESTful Web Services 애플리케이션을 개발하는 과정에 대해 학습하는 강의으로써, REST API 설계에 필요한 기본 지식에 대해 학습할 수 있습니다.

            초급

            초급

            Spring Boot, REST API

            [개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발강의 썸네일

            [개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발

            Dowon Lee

            누구보다 빠르게 배우는 풀스택 게시판 만들기강의 썸네일

            누구보다 빠르게 배우는 풀스택 게시판 만들기

            Neo

            이 강의에 서버(Java+Springboot) 와 프론트(React, ReactNative, Flutter, Android, iOS)를 모두 담았습니다. 이 강의로 풀스택 게시판 만드는 경험을 진행해보세요

            입문

            입문

            React, React Native, iOS

            누구보다 빠르게 배우는 풀스택 게시판 만들기강의 썸네일

            누구보다 빠르게 배우는 풀스택 게시판 만들기

            Neo

            누구보다 빠르게 배우는 Springboot + iOS RestAPI 게시판 만들기강의 썸네일

            누구보다 빠르게 배우는 Springboot + iOS RestAPI 게시판 만들기

            Neo

            누구보다 빠르게 배우는 Springboot + iOS RestAPI 게시판 만들기 Springboot 로 CRUD 서버를 개발하고 iOS로 나만의 게시판을 만들어보세요!

            입문

            입문

            iOS, Kotlin, Spring Boot

            누구보다 빠르게 배우는 Springboot + iOS RestAPI 게시판 만들기강의 썸네일

            누구보다 빠르게 배우는 Springboot + iOS RestAPI 게시판 만들기

            Neo

            손에 익는 Next.js - 공식 문서 훑어보기강의 썸네일

            손에 익는 Next.js - 공식 문서 훑어보기

            하조은

            공식 문서로 최신 Next.js를 배워봅니다. 문제 해결의 도구로써 Next.js가 필요한 이유를 이해하실 수 있어요!

            초급

            초급

            Next.js, next.js13, React

            손에 익는 Next.js - 공식 문서 훑어보기강의 썸네일

            손에 익는 Next.js - 공식 문서 훑어보기

            하조은

            Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기강의 썸네일

            Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기

            영넨

            Spring Boot와 React.js로 초간단 게시판을 손쉽게 구축하는 실전 강의! 이 강의는 이론은 덜고, 실습에 집중하여 빠르게 완성하는 웹 애플리케이션 개발 과정을 담았습니다.

            입문

            입문

            Spring Boot, react.js, JPA

            Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기강의 썸네일

            Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기

            영넨

            누구보다 빠르게 배우는 Springboot + React RestAPI 게시판 만들기강의 썸네일

            누구보다 빠르게 배우는 Springboot + React RestAPI 게시판 만들기

            Neo

            누구보다 빠르게 배우는 Springboot + React RestAPI 게시판 만들기 Springboot 로 CRUD 서버를 개발하고 React로 나만의 게시판을 만들어보세요!

            초급

            초급

            React, Kotlin, REST API

            누구보다 빠르게 배우는 Springboot + React RestAPI 게시판 만들기강의 썸네일

            누구보다 빠르게 배우는 Springboot + React RestAPI 게시판 만들기

            Neo

            풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)강의 썸네일

            풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

            정재남

            React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

            초급

            초급

            REST API, GraphQL, React

            풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)강의 썸네일

            풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

            정재남

            인프라공방 - 그럴듯한 서비스 만들기강의 썸네일

            인프라공방 - 그럴듯한 서비스 만들기

            이동규

            본 과정은 현업과 비슷하게, 인프라를 구성해가며 필요한 지식을 학습하고 적용하는 단계로 진행합니다.

            초급

            초급

            네트워크, Linux, Spring Boot

            인프라공방 - 그럴듯한 서비스 만들기강의 썸네일

            인프라공방 - 그럴듯한 서비스 만들기

            이동규

            React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)강의 썸네일

            React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

            도도(코딩루팡)

            1시간안에 끝내는 React기반의 GPT AI서비스 강의 수강 후 나만의 AI GPT SASS 솔루션을 만들어 보세요.

            초급

            초급

            React, ChatGPT, JavaScript

            React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)강의 썸네일

            React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

            도도(코딩루팡)

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

            코드캠프

            웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

            초급

            초급

            React, Next.js, expo

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

            코드캠프

            실전에서 바로 써먹는 Elasticsearch 입문 (검색 최적화편)강의 썸네일

            실전에서 바로 써먹는 Elasticsearch 입문 (검색 최적화편)

            JSCODE 박재성

            비전공자 입장에서도 쉽게 이해할 수 있고, 실전에서 바로 적용 가능한 'Elasticsearch 입문' 강의를 만들어봤습니다!

            초급

            초급

            Spring Boot, Elasticsearch, devops

            실전에서 바로 써먹는 Elasticsearch 입문 (검색 최적화편)강의 썸네일

            실전에서 바로 써먹는 Elasticsearch 입문 (검색 최적화편)

            JSCODE 박재성

            iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

            iOS/Android 앱 개발을 위한 실전 React Native - Basic

            Wintho

            Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

            초급

            초급

            React Native, React, ES6

            iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

            iOS/Android 앱 개발을 위한 실전 React Native - Basic

            Wintho

            [C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part6: 웹 서버강의 썸네일

            [C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part6: 웹 서버

            Rookiss

            게임 개발에 필요한 웹서버에 대한 전반적인 내용을 최신 ASP.NET Core (Blazor, WebAPI)를 이용해 학습하는 강의입니다.

            초급

            초급

            REST API, ASP.NET Core, Web API

            [C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part6: 웹 서버강의 썸네일

            [C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part6: 웹 서버

            Rookiss

            공식문서로 배우는 실전 타입스크립트강의 썸네일

            공식문서로 배우는 실전 타입스크립트

            어쩔코딩

            타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

            입문

            입문

            TypeScript, JavaScript, ES6

            공식문서로 배우는 실전 타입스크립트강의 썸네일

            공식문서로 배우는 실전 타입스크립트

            어쩔코딩

            Node.js로 웹 크롤링하기강의 썸네일

            Node.js로 웹 크롤링하기

            제로초(조현영)

            네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

            중급이상

            중급이상

            JavaScript, Node.js, 웹 크롤링

            Node.js로 웹 크롤링하기강의 썸네일

            Node.js로 웹 크롤링하기

            제로초(조현영)

            레디스의 모든 것 (feat. Node.js)강의 썸네일

            레디스의 모든 것 (feat. Node.js)

            yongsoocho

            레디스 A to Z로 레디스 첫 시작을 탄탄하게! 고등학생이 봐도 완벽히 이해할 수 있는 쉽고 재밌는 레디스의 모든 것

            입문

            입문

            Redis, Node.js

            레디스의 모든 것 (feat. Node.js)강의 썸네일

            레디스의 모든 것 (feat. Node.js)

            yongsoocho