IT/React
IT 및 일상을 공유합니다.
[React] GitHub 로그인 구현하기
GitHub 개발자 애플리케이션 등록 Github developers 해당 주소로 이동하여 깃허브(GitHub) 앱을 생성합니다. 이번 포스팅에서는 프론트에서 GitHub 로그인 버튼을 생성해 서버로 인가코드를 보내주는 방법에 대해서 알아보겠습니다. Homepage URL : 프론트 도메인 주소를 입력합니다. Authorization callback URL : 인가코드를 받을 콜백(redirect) URL을 입력합니다. GitHub OAuth Client Key (클라이언트 키) Client ID Client secrets 발급(Generate a new client secret 버튼) 서버(백엔드)에서 Client ID와 인가코드와 Client secrets 키로 AccessToken을 발급받습니다. ..
[React] 카카오(Kakao) 로그인 구현해보기
React 카카오 로그인을 구현해보려고 합니다. Nuxt 프레임워크에서 구현해 본 적이 있기 때문에 로그인 프로세스 과정이나 백엔드와 어떻게 통신할지에 대해서는 기본적으로 숙지된 상태입니다. 그런데 리액트로 아직 익숙지 않아 정교하게 구현은 못했지만 간단하게 구현해서 설명해보고자 합니다.REST API 방식으로 URL을 통해서 인가코드를 받아 로그인 과정을 하는 방법과, JavaScript Key를 사용하여 react-kakao-login 라이브러리로 구현하는 방법을 알아보겠습니다. Kakao Developers 문서 카카오 개발자 공식문서에 카카오 로그인에 대한 전체적인 프로세스가 나와있으니 한번 참고하시면 됩니다. 전체적인 흐름을 이해하려면 문서를 꼼꼼하게 읽어 보시는 걸 추천드립니다. 저도 먼저 구..
[React] 구글 로그인(Google Login) 리액트(React)에서 구현해보자
기존에 사용하던 웹용 구글 로그인 라이브러리가 중 2023년 3월 31일 일자로 중단될 예정이라 새로운 웹용 Google ID 서비스 솔루션 을 사용하여 진행해 보기로 한다 새로운 웹용 Google 로그인 문서 Google JavaScript API로 로그인 참조 | Authentication | Google Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 Google JavaScript API로 로그인 참조 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세 developers.google.com 프로젝트 생성 (구글 클라우드 플랫폼) Google 클라우드 플랫폼 로그인 Google 클라우..
React 시작하기
React란? 웹 프레임워크로, 자바스크립트 라이브러리의 하나로써 사용자 인터페이스를 만들기 위해 사용된다. 즉 현재 많이 활용되고있는 웹.앱의 View를 개발할 수 있도록 하는 라이브러리이다. React의 특징? 1. Data Flow 2. Component 기반 구조 3. Virtual Dom 4. Props and State 5. JSX - Data Flow React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. 단방향은 이처럼 관리하기 쉬운 특징뿐만 아니라 버추얼 돔(Virtual DOM)과 궁합이 잘 맞다. 뷰를 통째로 바꾸어주는 역할을 하기 때문에 단방향 데이터 방식은 DOM을 갱신할 때 큰 장점이 있다. - Component 구조 React는 UI(View)를 여러 ..