본문 바로가기

React

 (115)
[React] 소셜로그인-FaceBook2 (code,accessToken얻기) SDK 사용하지 않고 직접 페이스북에서 code, accessToken을 얻고 싶었다. 아래 두 사이트를 참고하여 코드를 작성했다. 페이스북은 정보가 너무 없어서 찾느라 고생했다.😵 https://developers.facebook.com/docs/facebook-login/guides/advanced/manual-flow 로그인 플로 직접 빌드 - Facebook 로그인 - 문서 - Meta for Developers 사용자 로그인 유도 사용자가 앱에 로그인하지 않았거나 Facebook에 로그인하지 않은 경우 로그인 대화 상자를 사용하여 앱과 Facebook에 모두 로그인하도록 메시지를 표시할 수 있습니다. Facebook에 developers.facebook.com https://teserre.tis..
[React] 소셜로그인 - 네이버2 (SDK) code, token을 얻고 싶었음) 해결방안은 아래 공식문서 node.js https://developers.naver.com/docs/login/api/api.md 네이버 로그인 API 명세 - LOGIN 네이버 로그인 API 명세 네이버 로그인 API는 네이버 로그인 인증 요청 API, 접근 토큰 발급/갱신/삭제 요청API로 구성되어 있습니다. 네이버 로그인 인증 요청 API는 여러분의 웹 또는 앱에 네이버 developers.naver.com URL 설정 export const NAVER_AUTH_URL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${NAVER_CLIENT_ID}&redirect_uri=${NA..
[React] 소셜로그인- 네이버 (사이트 API등록) https://developers.naver.com/docs/login/web/web.md Web 애플리케이션 - LOGIN 네이버 로그인은 서버 사이드 언어인 PHP나 Java로 개발한 웹 애플리케이션에도 적용할 수 있습니다. 또한 프런트엔드에서 사용하는 JavaScript를 사용해도 적용할 수 있습니다. API 호출 예제 예제 developers.naver.com 공식사이트API 참고 https://developers.naver.com/apps 애플리케이션 - NAVER Developers developers.naver.com 방법 아래 참고) https://codebibimppap.tistory.com/12 [JAVA] 네이버 소셜 로그인 REST API 적용하기 Java SpringBoot 환경에..
[React] 소셜로그인 -구글2 (인가코드 받기 참고) 웹 서버 애플리케이션용 OAuth 2.0 사용 | Authorization | Google for Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 웹 서버 애플리케이션용 OAuth 2.0 사용 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분 developers.google.com 아래는 참고 사이트의 내용) 구글은 처음 전송하는 부분에서 카카오와 네이버랑은 조금 차이가 있습니다. 카카오와 네이버는 response type, client id, redirect uri를 받았다면, 구글은 추가로 scope을 받습니다. https://accounts.google.com/o/oauth2/v2/auth..
[React] 소셜로그인 -구글1 (사이트 API 등록) https://www.traderharu.com/2021/08/10/%EA%B5%AC%EA%B8%80-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-api-%ED%82%A4-%EB%B0%9C%EA%B8%89-%EB%B0%A9%EB%B2%95/ 구글 소셜 로그인 API 키 발급 방법 - TraderHaru 구글 소셜 로그인 기능을 구현하기 위해 API키를 발급 받는 방법에 대해 그림과 함께 상세하게 설명 해 두었습니다. 구글 OAuth 키 발급에 시간을 낭비하지 말자!! www.traderharu.com 아래내용은 위 블로그 내용) 구글 소셜 로그인 API 키 발급 방법 01. 구글 개발자 사이트로 이동 https://console.developers.google.co..
[React] .env 적용안되는 오류 react 에서 숨기고자 하는 url 같은 것을 따로 .env 파일에 작성하면 안보인다. 1. .env 파일을 생성하고 코드를 작성한다.(REACT_APP으로 시작하기) REACT_APP_KAKAO_REST_API_KEY=~~~ 2. 사용하는 파일에서 선언한것을 이용해 사용하면 된다.(process.env.~) const KAKAO_REST_API_KEY = process.env.REACT_APP_KAKAO_REST_API_KEY; >>err 적용이 안되서 나중에 보니 VS CODE를 껐다 켜야 적용된다. 꼭 .env파일을 작성 후에는 다시 켜자..!!!!!
[React] Emotion CSS(인라인) 사용하려면 주석을 이용(CRA) error message You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used. You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can h..
[React] MUI 모달창 만들기 아래 블로그 내용 참고하여 만들었음. https://cocoder16.tistory.com/84 리액트 모달창 만들기 2가지 방법 방법 1. 직접 모달창 컴포넌트 만들기 먼저 모달창으로 사용할 UI 컴포넌트를 만들기 위해 Modal.jsx 파일을 생성합니다. * Modal.jsx function Modal() { return ( Modal ); } 이 모달 컴포넌트를 렌더링할 부모 cocoder16.tistory.com https://mui.com/material-ui/react-modal/ React Modal component - Material UI The modal component provides a solid foundation for creating dialogs, popovers, ligh..

티스토리툴바