Notion URL Shortener

Title

2022-02-03

이메일 인증은 password가 없어도 되지만, 이메일로 로그인 가능한 token을 가진 링크를 전송하고 나서, 해당 token의 유효성을 검사할 로직이 필요하기 때문에, 데이터베이스가 필요하다.

Public 노션 데이터베이스는 키가 필요 없는지?
- Public 이어도 키가 필요하다.
- 환경변수로 노션 토큰을 삽입하거나 삽입하지 않거나로 판단해야 할 듯.
  - GET 요청에 대해서는 토큰이 필요하다.
  - PUBLIC 일지아닐지에 대해 환경 변수 세팅
NEXT_PUBLIC_ : 기본적으로 환경 변수는 Node.js 환경에서만 사용할 수 있으므로 브라우저에 노출하지 않는다. 브라우저에 변수를 노출하려면 변수에 접두사(NEXT_PUBLIC_)를 붙여야 한다.
읽기 권한 (무제한), 쓰기 권한 (토큰 기반 or 무제한)
- 네이밍
  - 서버 사이드에서 토큰을 인증을 위해 사용할 것인지 플래그
  - ky의 URLSearchParams
React 토큰 기반 인증 구현
- 처음부터 컴포넌트, 리듀서를 다른 파일로 나누고 하다 보니, 점점 복잡해지는 것 같다.
- 일단 한페이지에서부터 구현하고 잘게 쪼개는 방법이 맞는 것 같다.

토큰 기반 인증 추상화
@react-hookz/web > useLocalStorage
- initializeWithStorageValue: false 로 설정하여 SSR에서도 서버와 브라우저 간에 초기 값을 동일하게 사용.
애니메이션 유지하도록 수정

누군가 관심을 보이고 discussion을 남김
error 메시지가 노출되지 않는 현상 해결
- local에서는 response.statusText가 정상적으로 보이나, vercel에 배포된 환경에서는 response.statusText가 빈 문자열인 현상이 있었음.
- localhost는 기본적으로 http/1.1 이다.
- http/2에서는 statusText를 지원하지 않는다.
  - Response.statusText - Web APIs | MDN (mozilla.org)
그 외 Vercel 배포 환경을 로컬에서 정확히 재현하는 방법을 잘 모르겠다. node 14 버전으로 빌드하고 로컬 실행해도 다른 결과가 있을 때가 있다.
- Preview 배포에 환경 변수 설정하여 __DEV__ 일 때 로그 찍는 방법.