강의

N
챌린지

멘토링

N
클립

로드맵

개발 · 프로그래밍

/

웹 개발

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개

수강생 176명

난이도 초급

수강기한 무제한

  • 영넨
실습 중심
실습 중심
백엔드이해하기
백엔드이해하기
리액트감잡기
리액트감잡기
로그인
로그인
소셜로그인
소셜로그인
React
React
Node.js
Node.js
REST API
REST API
Spring Boot
Spring Boot
login
login
실습 중심
실습 중심
백엔드이해하기
백엔드이해하기
리액트감잡기
리액트감잡기
로그인
로그인
소셜로그인
소셜로그인
React
React
Node.js
Node.js
REST API
REST API
Spring Boot
Spring Boot
login
login
토스랩
네이버 Labs
다우기술
사람인
케이티

케이티

임직원들도 이 강의를 듣고 있어요!

토스랩
네이버 Labs
다우기술
사람인
케이티

케이티

임직원들도 이 강의를 듣고 있어요!

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

4.6

5.0

east0321

61% 수강 후 작성

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

5.0

오일중

100% 수강 후 작성

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

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

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

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

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

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

이런 내용을 배워요.

화면 캡처 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 호출 기본

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

안녕하세요
입니다.

561

명

수강생

66

개

수강평

13

개

답변

4.4

점

강의 평점

3

개

강의

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

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

커리큘럼

전체

31개 ∙ (4시간 55분)

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

수강평

전체

13개

4.6

13개의 수강평

  • 오일중님의 프로필 이미지
    오일중

    수강평 2

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

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

    • east0321님의 프로필 이미지
      east0321

      수강평 6

      ∙

      평균 평점 5.0

      5

      61% 수강 후 작성

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

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

        수강평 5

        ∙

        평균 평점 5.0

        5

        32% 수강 후 작성

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

          수강평 4

          ∙

          평균 평점 5.0

          5

          32% 수강 후 작성

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

            수강평 1

            ∙

            평균 평점 5.0

            5

            32% 수강 후 작성

            영넨님의 다른 강의

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

            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 롤 전적 검색 사이트 만들기

            영넨

            비슷한 강의

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

            비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

            비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

            Jay

            내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

            초급

            초급

            HTML/CSS, JavaScript, REST API

            비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

            비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

            Jay

            차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)강의 썸네일

            차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

            Indie Coder

            빠른 속도를 자랑하는 Node.js 프레임워크 fastify 와 orm Prisma 그리고 Typescirpt를 활용한 최신 Node.js 백엔드 REST API를 학습하는 코스

            초급

            초급

            Node.js, TypeScript, Prisma

            차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)강의 썸네일

            차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

            Indie Coder

            Node.js에 TypeScript 적용하기(feat. NodeBird)강의 썸네일

            Node.js에 TypeScript 적용하기(feat. NodeBird)

            제로초(조현영)

            Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

            중급이상

            중급이상

            웹앱, TypeScript, Node.js

            Node.js에 TypeScript 적용하기(feat. NodeBird)강의 썸네일

            Node.js에 TypeScript 적용하기(feat. NodeBird)

            제로초(조현영)

            Spring Boot, AWS로 백엔드 서비스 한 사이클 완성하기강의 썸네일

            Spring Boot, AWS로 백엔드 서비스 한 사이클 완성하기

            한조각

            스프링부트, MySQL, Docker, AWS EC2, RDS 로 백엔드 서비스의 한 사이클을 완성해봅니다. 애플리케이션 배포를 통해 성취감을 얻고, API 개발시 현업에서 서버 개발자가 마주하는 문제와 그 해결법을 다룹니다.

            초급

            초급

            AWS, MySQL, Docker

            Spring Boot, AWS로 백엔드 서비스 한 사이클 완성하기강의 썸네일

            Spring Boot, AWS로 백엔드 서비스 한 사이클 완성하기

            한조각

            한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지강의 썸네일

            한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

            이정환 Winterlood

            개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 18시간 분량의 All-in-one 강의!

            초급

            초급

            JavaScript, React, Node.js

            한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지강의 썸네일

            한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

            이정환 Winterlood

            Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)강의 썸네일

            Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

            도도(코딩루팡)

            Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

            초급

            초급

            Next.js, supabase, React

            Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)강의 썸네일

            Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

            도도(코딩루팡)

            @시코 - TypeScript 제대로 배우기(초중급)강의 썸네일

            @시코 - TypeScript 제대로 배우기(초중급)

            시니어코딩

            깊이있는 수업으로 최고의 웹 개발자가 되기 위한 타입스크립트 강좌입니다. 완강 했을 때 타입스크립트의 본질을 꿰뚫을 수 있어, 다음으로 배우게 될 리액트와 넥스트, 네스트 등의 고수가 될 수 있습니다.

            초급

            초급

            TypeScript, React, JavaScript

            @시코 - TypeScript 제대로 배우기(초중급)강의 썸네일

            @시코 - TypeScript 제대로 배우기(초중급)

            시니어코딩

            하루만에 만드는 나만의 비주얼 노벨 게임강의 썸네일

            하루만에 만드는 나만의 비주얼 노벨 게임

            Neo

            React, Javascript, SpringAI, Springboot를 통해서 나만의 비주얼 노벨 게임을 만들어 보세요. SpringAI와 React 를 통하여 웹기반 비주얼 노벨 게임을 만드는 법을 알려드립니다! Neo + Essential

            초급

            초급

            React, Spring Boot, 인공지능(AI)

            하루만에 만드는 나만의 비주얼 노벨 게임강의 썸네일

            하루만에 만드는 나만의 비주얼 노벨 게임

            Neo

            SpringAI + React로 만들어보는 나만의 감정일기 서비스강의 썸네일

            SpringAI + React로 만들어보는 나만의 감정일기 서비스

            Neo

            SpringAI + React로 만들어보는 나만의 감정일기 서비스 Neo + Essential과 함께 만들어보는 4번째 프로젝트 시간입니다!

            초급

            초급

            React, Kotlin, Spring Boot

            SpringAI + React로 만들어보는 나만의 감정일기 서비스강의 썸네일

            SpringAI + React로 만들어보는 나만의 감정일기 서비스

            Neo

            김일한의 리액트(React) 개발자를 위한 실습을 통한 입문 과정강의 썸네일

            김일한의 리액트(React) 개발자를 위한 실습을 통한 입문 과정

            소프트캠퍼스

            본 과정은 리액트를 이용하여 프론트 웹을 개발할 수 있는 방법에 대해 학습합니다. 리액트를 위한 자바스크립트 핵심문법, CDN 기반 리액트 개발, NPM 기반 리액트 개발 방법 학습 합니다.

            입문

            입문

            React, JavaScript, HTML/CSS

            김일한의 리액트(React) 개발자를 위한 실습을 통한 입문 과정강의 썸네일

            김일한의 리액트(React) 개발자를 위한 실습을 통한 입문 과정

            소프트캠퍼스

            웹에서 다루는 네트워크 통신 - 기초부터 HTTP, SSE, WebSocket 그리고 WebRTC P2P 통신까지강의 썸네일

            웹에서 다루는 네트워크 통신 - 기초부터 HTTP, SSE, WebSocket 그리고 WebRTC P2P 통신까지

            이사님은

            다양한 통신 기법들에 대해 배우고 차이점을 이해하면, 가장 적합한 통신 방법을 선택하고 구현하는 능력을 키울 수 있습니다.

            입문

            입문

            JavaScript, React, Java

            웹에서 다루는 네트워크 통신 - 기초부터 HTTP, SSE, WebSocket 그리고 WebRTC P2P 통신까지강의 썸네일

            웹에서 다루는 네트워크 통신 - 기초부터 HTTP, SSE, WebSocket 그리고 WebRTC P2P 통신까지

            이사님은

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)강의 썸네일

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

            코드캠프

            10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

            중급이상

            중급이상

            React, Next.js, cursor

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)강의 썸네일

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

            코드캠프

            GitHub Copilot으로 경험하는 바이브코딩(feat. Java, Spring)강의 썸네일

            GitHub Copilot으로 경험하는 바이브코딩(feat. Java, Spring)

            코드브릿지

            기업에서 현업 개발자들이 사용하는 코파일럿! 코파일럿 사용 꿀팁부터 유닛 테스트, API 통합 테스트까지 바이브 코딩으로! 현업 노하우로 10배 빠른 디렉터로 도약하세요.

            입문

            입문

            Java, Spring, Spring Boot

            GitHub Copilot으로 경험하는 바이브코딩(feat. Java, Spring)강의 썸네일

            GitHub Copilot으로 경험하는 바이브코딩(feat. Java, Spring)

            코드브릿지

            [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

            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회고록 서비스 개발 (원데이 클래스)

            도도(코딩루팡)

            [Season 2] Spring AI 실전: Multi AI 에이전트 시스템 개발강의 썸네일

            [Season 2] Spring AI 실전: Multi AI 에이전트 시스템 개발

            박매일

            Spring AI Router Pattern + RAG + MCP를 활용한 '지능형 협업' 전문가 에이전트 팀 구축 단일 에이전트를 넘어 아키텍처로: 라우터 패턴과 에이전트 격리(Isolation) 설계의 정석

            초급

            초급

            Spring Boot, RAG, AI Agent

            [Season 2] Spring AI 실전: Multi AI 에이전트 시스템 개발강의 썸네일

            [Season 2] Spring AI 실전: Multi AI 에이전트 시스템 개발

            박매일

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

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

            yongsoocho

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

            입문

            입문

            Redis, Node.js

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

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

            yongsoocho

            1시간만에 치킨콤보값으로 배우는 서버 배포강의 썸네일

            1시간만에 치킨콤보값으로 배우는 서버 배포

            Neo

            치킨콤보값으로 스프링부트를 수동배포 -> 도커로 배포 -> Github Action CI/CD 순으로 배포과정을 배웁니다!

            초급

            초급

            AWS, Docker, Spring Boot

            1시간만에 치킨콤보값으로 배우는 서버 배포강의 썸네일

            1시간만에 치킨콤보값으로 배우는 서버 배포

            Neo

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

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

            JSCODE 박재성

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

            초급

            초급

            Spring Boot, Elasticsearch, devops

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

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

            JSCODE 박재성

            실전 jOOQ! Type Safe SQL with Java강의 썸네일

            실전 jOOQ! Type Safe SQL with Java

            설동민

            jOOQ를 통해 Type Safe한 SQL의 강력함을 경험해보세요!

            중급이상

            중급이상

            Java, jooq, SQL

            실전 jOOQ! Type Safe SQL with Java강의 썸네일

            실전 jOOQ! Type Safe SQL with Java

            설동민