09.11

• 코테 스터디 문제 풀기
  • 백준 추천문제 5개
  • 프로그래머스 Lv.3 2개

09.08

• Buddies
  • feat
    • PWA 설정을 진행했다. 적용 전에는 웹 브라우저 기반이라 밑에 주소 표시줄이 떠서 화면이 약간 잘려 스크롤을 해야 했었는데, 적용 후에는 하나의 어플처럼 작동한다. 아직 완벽하지는 않아서 차차 해결할 예정~
  • fix
    • 구글 로그인 시도가 차단되는 현상 ➡️ 도메인 주소로 URI를 설정하지 못해서 발생 (해결)
    • 카카오 로그인 무한 루프 ➡️ 로그인 기능은 문제 없으나 코드의 실행 순서 문제 (해결)
    • 채팅 높이 짤림 ➡️ 웹 브라우저의 주소 표시줄 때문에 발생. PWA 적용하면 발생하지 않음 (해결)
    • 구글 로그인 로직을 전반적으로 수정했다. 기존에는 Firebase Authentication을 signWithPopup으로 진행했지만, 모바일에서는 redirect로 사용하는 것이 좋다고 한다. 그래서 signInWithRedirect로 수정했다. 하지만, NextAuth와 redirect를 함께 사용하기에는 리액트의 LifeCycle에 무한루프가 걸려서 다른 방법을 생각해야 했다.
      결국 signInWithCredential로 진행했다. 기존에는 LoginSection에서 수행하던 Firebase Authentication을 NextAuth의 signIn callback 안에서 수행하도록 했다. (해결)
      • signInWithCredential도 문제(단점)이 있다. popup, redirect는 로그인이 완료되면 firebase의 indexedDB에 로그인 정보가 저장된다. 그에 따라 auth.currentUser에 접근이 가능하다. 하지만 signInWithCredential은 indexedDB에 저장되지 않아, auth.currentUser에 접근이 불가능하다.
        • 이것이 왜 문제인가? 회원탈퇴 기능에는 auth.currentUser에 먼저 접근해야 하기 때문이다.(로그인 상태 유지는 cookie로 handle중이기 때문에 문제는 없다.)
    • '비회원으로 이용하기' 모달이 슬라이드와 겹치는 문제를 수정했다.(z-index를 어떻게 설정해서 해결했는데, 기존 코드와 똑같은 것 같은데 갑자기 해결됐다..)
  • need to think
    • 결국 회원탈퇴 기능을 위해서는 redirect로 구글 로그인을 수행해야 한다. 기존 문제점을 해결할 수 있는 로직을 생각해야 한다.
    • 카카오 로그인은 현재 popup 형식으로 로그인을 수행한다. 모바일에서는 redirect가 권장되는 만큼, 이 기능도 수정을 생각해야 한다.
    • 스플래쉬 화면 렌더링 로직 수정. react의 LifeCycle 때문에 불가피하게 세션이 존재함에도 스플래쉬 화면이 잠깐 보여졌다가 메인 컴포넌트가 보여지게 된다. 수정이 필요하다. 아니면 다른 렌더링 방식을 생각해야 한다.
    • 유저 페이지는 4가지의 다른 배경 색을 가진다.(이전 메인 페이지에서 어떤 챗봇을 선택했느냐에 따라 색깔이 달라짐.) 이는 전역 상태 관리로 해결할 수 있을 것 같은데, 페이지를 새로고침해도 변하지 않아야 하므로 redux-persist를 사용하면 될 것같다. 근데 이렇게 까지 해야할까?

PWA 적용 후

메인페이지	유저페이지	설정페이지

09.07

• Buddies 백엔드 구현 진행
  • feat
    • 대화내역 저장하기 in Firestore
    • 이전 대화내역 불러오기 from Firestore
  • fix
    • 기존에 cookie와 firestore에 유저 정보를 저장할 때 uid를 사용했었다. 이를 email로 변경했다. Why?
      • uid는 민감한 정보라고 생각해서 쿠키에 넣는건 옳지 않다고 판단.
      • uid의 이중성 ➡️ 현재 NextAuth로 OAuth 로그인을 처리하고, Firebase에 로그인한 유저의 정보를 저장한다. NextAuth에서 반환하는 uid와 Firebase에서 반환한 uid가 서로 다르다.
        대화내역을 불러오는 기능은 Server-side에서 수행하는데, Firebase의 auth.currentUser는 SSR에서 사용이 불가능해서 uid를 가져올 수 없었다. 또한, 대화를 저장할 때도 uid로 저장할 경로를 탐색하는데, uid가 서로 다르기 때문에 항상 동일한 값인 email을 사용해야 했다. 이를 위해 NextAuth의 getServerSession를 사용했다.(=> route에서 사용 가능, server-side에서 동작)
      • 비회원의 대화 내역 저장에 대해서 고민했다. 일단, 비회원의 유저 정보를 살펴보면 대부분의 정보(email 포함)가 null로 설정되어있다. 구별할 수 있는 방법은 uid 하나 뿐인데 이마저도 auth.currentUser를 사용할 수 없어서 구별할 방법이 없었다. 이는 유저 정보를 저장할 때도 문제인데, email로 유저 정보를 저장하는 기존의 기능과 충돌했다. (비회원은 이메일 정보가 없기 때문)
        그래서, 비회원이 로그인 할 때는 randomUUID를 부여해서 유저정보를 저장하도록 했고, 대화내역은 비회원이라면 저장하지 못하도록 예외 처리를 수행했다.
      • firestore에서 문서를 불러올 때, 필드에 아무런 값이 없다면 문서 자체를 없다고 인식한다. 문서를 불러올 때, 필드에 임의의 값을 추가하고 하위 경로를 탐색해야 했다. 또 다른 방법으로는, firestore 콘솔에서 필드에 값을 추가하고 삭제하면 문서를 제대로 인식한다. (근데 이건 비효율적이니, 필드에 값을 추가하는 코드를 작성하자.)
  • Chore
    • 반응형 처리
    • 사용하지 않는 코드 삭제(나중에 쓰이지 않을까? 하는 생각에 쉽게 삭제하지 못했는데 결국 삭제했다.)
• Buddies 배포 시도
  • Error
    • Firebase invalid/api-key error 발생
    • There is a problem with the server configuration. NextAuth
    • Please define a secret in production. ➡️ .env에 NEXT_AUTH='값' 추가
    • 배포 버전에서 채팅 시, timestamp가 이상하게 찍혀서 대화내역이 firestore에 올바르게 저장되지 않음.
• Buddies 배포 완료
  • Need to fix
    • 카카오톡 로그인 해도 홈으로 넘어가지 않음.
    • 구글 로그인 차단됨.
    • 로고 svg, 캐릭터 svg 저해상도
    • 채팅화면 높이 짤림 ➡️ iPhone 12 mini, iPhone 13 mini 기준
    • 페이지 전환 속도가 느림. (딜레이 심함)
• 경제신문스크랩 2회분

09.06

• Buddies 캘린더 모듈 스타일 추가

09.05

• JWT 개념 공부
• 블록 게임 문제 다시 보기
• 경제신문스크랩

09.04

• 2019 KAKAO BLIND RECRUITMENT 복습
  • 후보키 ✅
  • 블록 게임 ✅
• 경제신문스크랩

09.03

• portfolio 수정

09.02

• weather-NextJS 개발기 작성
• weather-NextJS Readme 작성

09.01

• weather-NextJS 구현 끝내기
• 경제신문스크랩