승요 코로그

소셜 로그인은 사용자가 각 소셜 플랫폼(구글, 카카오, 네이버)에 저장된 계정을 통해 빠르고 안전하게 로그인할 수 있도록 지원한다. 이 글에서는 구글, 카카오, 네이버 소셜 로그인의 백엔드 구현 과정에서 각 파일들을 설명하고, 전체적인 흐름을 정리해 보겠다.   폴더 구조Google, Kakao, Naver 소셜 로그인 구현을 마친 프로젝트 폴더 구조는 아래와 같다.   주요 파일 설명src└── main ├── java │ └── com.example.Profee │ ├── config │ │ ├── SecurityConfig.java # CORS 및 인증 정책 설정 │ │ └── SwaggerConfig.java # API..

Phaser.js로 Click Pals 프론트를 개발하기 위해 VS Code와 Node.js, Phaser.js를 설치하고 GitHub에 업로드하는 과정이다.Phaser는 고사하고 게임을 처음 개발해보는 만큼 세세하게 기록하고 공유하려 한다.    1. 개발 환경 준비Node.js와 npm 설치Node.js 공식 웹사이트에서 LTS(Long Term Support) 버전을 다운로드하여 설치한다.설치 후 아래 명령어로 Node.js와 npm이 설치되었는지 확인한다.node -vnpm -v Visual Studio Code 설치VS Code 공식 웹사이트에서 MacOS용 설치 파일을 다운로드하고 설치한다.  2. Git 설치 및 설정Git 설치 및 사용자 정보 설정Git 공식 웹사이트에서 MacOS용 Git..

error: Error: Unable to resolve module ./App.js from /Users/[사용자이름]/Profee_Client/android/Profee_Client/index.js: None of these files exist:  * App.js(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)  * App.js  4 |  5 | import {AppRegistry} from 'react-native';> 6 | import App from './App.js';    |..

Settings file '/Users/[사용자이름]/Profee_Client/android/settings.gradle' line: 2 Error resolving plugin [id: 'com.facebook.react.settings'] > Included build '/Users/[사용자이름]/Profee_Client/node_modules/@react-native/gradle-plugin' does not exist. * Try: > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. * Exce..

Android Studio에서 에뮬레이터를 실행하다보면 간혹 검은 화면에서 시간이 지나도 앱이 실행되지 않는 경우가 있다.    해결 방법이럴때는 간단한 해결방법이 있다.먼저 실행중인 에뮬레이터를 종료한다. 그리고 Android Studio 우측에서 Device Manager 아이콘을 누른 후, 사용하던 에뮬레이터의 더보기 아이콘(점 세 개)을 누르고 'Cold Boot'를 눌러주면 된다.   그러면 에뮬레이터가 다시 정상적으로 작동하는 것을 확인할 수 있다.

이어서 빠르게 Naver 소셜 로그인을 구현하려고 한다.Naver 소셜 로그인도 동일하게 Google 때 구현해놓았던 틀을 기반으로 아주 간단하게 추가하므로 기반 코드가 없다면 아래 포스팅을 참고하면 좋겠다. [SpringBoot] Google 소셜 로그인 구현: OAuth2.0 & Spring Security 활용코드 구현에 앞서, 소셜 로그인 개념은 아래 포스팅을 참고하면 좋겠다. Spring Security & OAuth2.0 & JWT Token 소셜로그인 개념 정리Spring Security 란?Spring Security는 애플리케이션의 보안을 담당하는 프레seung-yo.tistory.com     폴더 구조동일하게 이전 포스팅을 따라 틀을 갖춰 놓았다면 따로 추가할 필요가 없다. Nav..

Google 소셜 로그인에 이어 Kakao 소셜 로그인을 구현하려고 한다.Kakao 소셜 로그인은 Google 때 구현해놓았던 틀을 기반으로 아주 간단하게 추가하므로 기반 코드가 없다면 아래 포스팅을 참고하면 좋겠다. [SpringBoot] Google 소셜 로그인 구현: OAuth2.0 & Spring Security 활용코드 구현에 앞서, 소셜 로그인 개념은 아래 포스팅을 참고하면 좋겠다. Spring Security & OAuth2.0 & JWT Token 소셜로그인 개념 정리Spring Security 란?Spring Security는 애플리케이션의 보안을 담당하는 프레seung-yo.tistory.com   폴더 구조Kakao 소셜 로그인은 이전 포스팅을 따라 틀을 갖춰 놓았다면 따로 추가할 필..

Google 소셜 로그인 테스트 중 다음과 같은 오류를 만났다.  [ 액세스 차단됨: 이 앱의 요청이 잘못되었습니다 ] 400 오류: redirect_uri_mismatch 오류 세부정보를 누르면 이런 화면을 볼 수 있다.  이 메시지는 Google OAuth 2.0 정책을 준수하지 않았기 때문에 Google 로그인이 차단되었다는 뜻이다. 특히, redirect_uri(리디렉션 URI)와 관련된 문제인데, 이 문제를 해결하려면 Google Cloud Console에서 URI 관련 설정을 추가해야 한다.   해결 방법GCP > 콘솔 > 프로젝트(Profee) > 사용자 인증 정보 > 생성했던 OAuth 2.0 클라이언트 ID 로 이동하여 승인된 리디렉션 URI 에 아래 URI를 추가하면 된다.http://..

코드 구현에 앞서, 소셜 로그인 개념은 아래 포스팅을 참고하면 좋겠다. Spring Security & OAuth2.0 & JWT Token 소셜로그인 개념 정리Spring Security 란?Spring Security는 애플리케이션의 보안을 담당하는 프레임워크로, 사용자의 인증(로그인)과 권한(접근 제어)을 관리해준다. 예를 들어, 누가 애플리케이션에 접근할 수 있는지, 어떤seung-yo.tistory.com   폴더 구조Google 소셜 로그인의 전체적인 프로젝트 폴더와 파일 구조는 다음과 같다. 편의상 src 폴더부터 캡쳐했다.     소셜 로그인 요청 Redirect 처리 (Google)1. 소셜 로그인 타입을 구분할 Enum 클래스 생성먼저, 소셜 로그인 유형을 구분하기 위해 SocialLo..

Xcode 에서 RN 프로젝트를 열려고 했을 때 다음과 같은 에러가 발생했다.   해결 방법RN 폴더가 아니라, 더 들어가서 ios 폴더 안의 workspace 파일을 선택하면 프로젝트가 정상적으로 열린다. 😀반드시 .xcworkspace 파일을 선택해서 열어야 한다.   더보기Reference: [에러] xcode에서 React Native프로젝트가 안열리는 현상 (Could not open file 에러)xcode에서 프로젝트를 여니 아래와 같은 창이 뜨며 열리지 않았다.RN폴더를 선택하는 것이 아니라 더 들어가서 ios 폴더를 선택하면 열린다!velog.io