✏️ 무엇을 배웠나
1. git pull 되돌리는 방법
git reflog
git reset --hard HEAD@{번호}git reflog를 입력하면 아래 같은 화면이 나온다.
브랜치 변경사항이 기록된 건데 여기서 pull한 직전 상태로 돌아가고 싶다면
HEAD@{1}로 돌아가면 된다.
2. firebase에서 displayName말고 닉네임이 필요할 때
글을 올린 사람의 닉네임을 UI에 렌더링하고 싶었다. 회원가입할 때 email, password, nickname을 받기로 했는데 nickname값을 displayName에 넣어줘도 null값으로 나왔다. 회원가입 로직에서 profile을 업데이트해주려고 했는데 그것도 실패했다. 뭔가 올바른 방법이 아닌 것 같아서 users 데이터베이스에 직접 접근해 uid로 쿼리를 보내 nickname을 빼오려고 했다. 시도는 성공!
이 과정에 우여곡절이 많은데, 관련해서는 나중에 따로 글을 쓰자. 나중을 위해 뭐가 안 됐고 왜 안 됐는지 적어두려고 한다.
3. 토스트 UI 구현하기
댓글 창에서 필수로 입력할 값을 빼먹었거나 댓글 등록이 성공했을 때 피드백을 주고 싶었다. 모달을 직접 꺼야 하니까 UX에 도움이 안 될 거 같아 토스트 UI를 구현하기로 결정했다.
토스트 UI 구현은 처음이라 우선 사용할 수 있는 라이브러리를 검색해보니까 비교적 간단해보이는 걸 찾았다. expo 홈페이지에서도 소개하고 있는 라이브러리인 react-native-root-toast.
api를 콜하는 방식과 react-native 모달처럼 컴포넌트 방식, 2가지 방식 중 골라서 사용할 수 있고 나는 컴포넌트 방식을 사용했다. 기존 코드에서 다루기 더 편해서 그렇게 했는데 api콜 방식으로 했을 때는 토스트 메시지가 자동으로 사라지는 기능이 있는데 컴포넌트 방식에서는 없다. setTimeout으로 해결해줬는데 깃헙에 있는 문서를 보니까 문서에도 원래 나와 있는 내용이었다. 뭔가 뿌듯한 지점.
그리고 커스터마이징도 가능한데, 토스트 창 크기를 조절하는 속성은 제공되지 않고 애니메이션이 조금 딱딱해서 아쉬웠다. 토스트 창 크기는 크기를 지정한 styled 컴포넌트를 토스트 컴포넌트 안에 넣어서 강제로 토스트 메시지 창을 늘려버렸다. 뭔가 무식한 방법인 거 같긴 한데, 원하는 대로 나왔으니까 됐지 뭐.
토스트 메시지 위치를 어디로 할지 고민을 했다. 하단에서 나오는 경우 타자를 치는 손가락들 때문에 안 보였고, 상단에서 나오는 경우에는 그림이 예쁘긴 했지만 시선을 올려야 해서 은근 불편했다. 일단은 편해야 한다고 생각해서 화면 중앙에 뜨게 만들었다. 타자 치는 시선 가까이 배치하니까 바로 보이고 좋았다. 지금 다시 보니까 이것도 마음에 안 드는데... 하 여튼 스샷 찍은 이미지 남기고 오늘은 얼른 자야지. 벌써 2시 피곤해.
🥵 무엇이 어려웠나
1. 살아 숨쉬는 것
🔎 더 알고 싶은 것 / 보완이 필요한 것
1. 파이어베이스와 리액트 쿼리를 섞어 쓰는 방법
🏷️ 오늘의 코멘트
맥주 한 캔 마시러 갑니다
