Joonas' Note

1. 실제로 현재 git config 에 origin 이 없어서 발생하는 오류일 수 있다. 아래 명령어로 remote.origin 주소가 올바르게 설정되어있는 지 확인하고, git remote -v 없다면 아래와 같이 배포하고자 하는 git repository의 주소를 추가한다. git remote set-url origin https://.... 2. origin 설정은 분명 잘 되어있는데 안되는 경우 Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option). npm 과 관련한 모듈과 ..

아래의 글을 먼저 읽고 진행하시는 것을 추천한다. [FastAPI + React] 소셜 로그인 구현하기 - 구글 로그인 아래 글에서 이어지는 내용입니다. [FastAPI + React] 소셜 로그인 구현하기 - 이메일 로그인 아래 글에서 이어지는 내용이다. [FastAPI + React] 소셜 로그인 구현하기 - 기본 환경 구축 들어가기 전에 Reac blog.joonas.io 들어가기 전에 Google, GitHub, Microsoft 등은 FastAPI Users에서 친절하게 구현을 미리 해주었습니다. 하지만 카카오와 같은 국내 기업들에 대한 로그인은 구현되어 있지 않다. 그래서 이 글에서는 클래스를 오버라이딩해서, 기존에 작성한 FastAPI Users와 완전히 호환되는 로그인을 구현한다. Fast..

아래 글에서 이어지는 내용입니다. [FastAPI + React] 소셜 로그인 구현하기 - 이메일 로그인 아래 글에서 이어지는 내용이다. [FastAPI + React] 소셜 로그인 구현하기 - 기본 환경 구축 들어가기 전에 React는 CRA(Create React App)를 통해 생성한 어플리케이션을 사용하며, 여기서는 5.0.1 버전을 사 blog.joonas.io 들어가기 전에 FastAPI에서 구글 로그인을 지원하는 많은 패키지들이 있다. 우리가 설치한 FastAPI Users에서도 지원하는 방법이 있다. 하지만 이제까지 검색해서 확인한 방법들은 상황이 달랐다. FastAPI 에서 라우팅을 한다고 가정하고 작성된 방법들이 많았었고, 그래서 구글 인증 후에 돌아오는 redirection에 문제가 ..

아래 글에서 이어지는 내용입니다. [FastAPI + React] 소셜 로그인 구현하기 - 기본 환경 구축 들어가기 전에 React는 CRA(Create React App)를 통해 생성한 어플리케이션을 사용하며, 여기서는 5.0.1 버전을 사용했다. 나머지 모듈들은 package.json에서 확인할 수 있다. FastAPI는 0.83.0 버전을 사용했고,. blog.joonas.io 이 글의 목표 Backend는 FastAPI users를 사용해서 라우팅까지 전부 간단하게 구현이 끝났다. 그럼 API에서 생성된 유저 관련 라우터들을, 아래와 같이 React에서 사용할 수 있도록 연동해보자. 전체 내용 앞으로 구현할 내용은 간단하다. 리액트에서 폼을 만들어서, 백엔드의 로그인 엔드포인트로 요청하면, 받은 ..

들어가기 전에 React는 CRA(Create React App)를 통해 생성한 어플리케이션을 사용하며, 여기서는 5.0.1 버전을 사용했다. 나머지 모듈들은 package.json에서 확인할 수 있다. FastAPI는 0.83.0 버전을 사용했고, 그 외에 필요한 패키지들과 버전은 requirements.txt에 적혀있다. 이 글에서는 백엔드로는 RESTful한 API 서버를 FastAPI로 구축하고, 프론트는 React를 별도로 실행한다. 두 프레임워크 모두 기본적인 내용만 다루어도 글이 너무 길어지므로, 각 프레임워크의 기본 예제를 모두 사용했다는 것을 가정하고 글을 작성할 예정이다. React 한국어 튜토리얼 - https://ko.reactjs.org/tutorial/tutorial.html F..

localStorage에 저장해야하는 기능이 필요해서 redux-persist를 사용하고 있었다. 하지만 모든 reducer가 localStorage에 저장되어야 하는 것은 아니었기 때문에, 분리하여 관리하고 싶었다. 즉, 일부는 localStorage를 store로, 일부는 redux에서 생성한 store를 사용하는 것이다. Context API를 쓰기에는 Provider를 추가하고 다른 곳에서 쓸 수 있게 작업하는 것도 필요해서 꼭 이렇게까지 해야할까 생각하고 있었는데, 후배가 문서의 nested-persists를 읽어보니 설정을 reducer마다 구분하여 지정할 수 있다고 하였다. https://www.npmjs.com/package/redux-persist#nested-persists redux-..