스파르타코딩클럽 내일배움캠프 79일차

오늘 일과 간단 요약

1. 오전 스크럼
2. 카카오 로그인 구현 ☞ 기능 삭제하기로 결정
3. header, 모달창 css
4. 모달 라이브러리 회의

 

 

 

 

 

 

 

카카오 로그인 기능 삭제

지난 주 토요일에 카카오 로그인을 구현하신 B반 분을 만나서 질문 왕창 했었다. 어떤 식으로 구현하는지 물어보니까 바로 블로그 링크를 주셔서 주말 내내 그 코드를 보면서 공부했었다. 사실 카카오 로그인 구현 자체는 토요일에 바로 성공했는데, local storage에 저장된 id이다 보니 firebase에 실제로 저장되지 않아서 여러 문제가 생겨 보류했었고 오늘 다시 시도해보았다. 전제는 오늘 3시까지 해보고 안될 것 같으면 바로 삭제하는 걸로.

 

그래서 결론은....카카오/네이버 로그인 기능을 빼기로 했다.

 

구현해주신 걸 토대로 해보는데, 일단 firebase 연결하려면 유료여서 결제를 해야 했었고 그래서 연결하지 않고 구현하는 걸 했었다. 그렇게 하고 나니 카카오 로그인이 성공적으로 되고 token도 제대로 잘 받아와졌다. 그런데 문제는, localstorage에 저장한 id였다.

 

이게 firebase에 user 정보를 저장하는게 아니고 localstorage에 저장된 id라서 프로필 수정이 불가능했다.

 

여기 콘솔에 찍힌 걸 보면 local 부분이 local storage에 저장된 부분이고, login이 firebase에 저장된 유저 정보를 불러오는 걸로 정했는데 캡처본처럼 login한 유저는 undefined가 나온다.

그냥 아예 유저가 없는 것이다. db에 저장되어 있지 않은 유저이므로 당연히 프로필 수정을 누르면 오류가 발생하고 수정도 안되었다. 심지어 localstorage에 저장된 유저를 불러와야 해서 header와 유저 페이지의 id도 변경해야 했다.

 

혹시 다른 방식으로 로그인한 것도 마찬가지인가 싶었는데,그건 local이든 login한 것이든 잘 불러와졌다. 그냥 카카오가 문제였다...ㅋㅋㅋㅋㅋ firebase에 연결 안한다는 게 이런 문제를 불러올 줄이야.

 

 

그래서 여기까지 구현할 걸 조원들에게 보여주고 아예 카카오/네이버 로그인 기능을 삭제하기로 했다. 어쩔 수 없는 거지만, 그래도 일주일 넘게 매달렸으니 후회는 없다.

이게 가능한거라면 최대한 끝까지 매달리겠는데 백엔드 쪽 구현을 잘 모르기도 하고 백엔드를 맡으신 분들도 없기 때문에 firebase로 한정지어야 하는데, 그럴려면 아예 로직을 다 바꿔야 했다.

 

애초에 로그인/회원가입 할 때 addDoc으로 firebase에 새로운 database로 저장해야 했는데 그러려면 아예 지금 만들어놓은 것들을 바꿔야 해서 그냥 삭제했다.

아쉽지만...그냥 프론트 면에서 로그인 된다는 걸 확인했다는 걸 위안으로 삼으며...ㅋㅋㅋ

네이버/카카오 대신 firebase에 제공하는 구글과 facebook으로 만족해야겠다.

 

 

 

 

 

 

모달 라이브러리 결정하기 (전체 회의)

오늘 회의한 부분이, 바로 모달 라이브러러이다.

사실 정확하게 말하면 모달은 아니고 alert창과 confirm창을 custom해서 통일하려는 회의였다.

 

• 헤더
  • 회원가입 시 확인 alert창 (다시 메인 페이지로 ← 회원가입하면 바로 로그인 완료)
    • 회원가입을 축하드립니다. 이제 Nilili의 서비스를 즐겨보세요! - A custom positioned dialog (3초)
  • 비밀번호 재설정 ⇒ 이메일 전송 시 확인 alert창
    • 이메일이 전송되었습니다. 전송된 링크를 통해 비밀번호를 재설정하세요. - alert
• 글쓰기
  • 장소 삭제 confirm
    • 일정에서 삭제하시겠습니까?
  • 게시글 등록 alert
    • 필수 항목 모두 작성시 → 훌륭한 여정이에요! 여행 후 리뷰도 꼭 부탁드려요!
    • 필수 항목 일부 작성시 ⇒ warning
      • 커버 이미지를 추가해주세요.
      • 여행 전/여행 후 카테고리를 선택해주세요.
      • 하나 이상의 지역을 선택해주세요.
      • 제목을 입력해주세요.
      • 2개 이상의 코스를 등록해주세요.
• 디테일페이지
  • 삭제 확인 confirm창 ⇒ warning
    • 댓글을 정말 삭제하시겠습니까?
    • 여행 코스를 정말 삭제하시겠습니까?
  • 삭제 되었다는 toast ⇒ A custom positioned dialog
    • 댓글이 정상적으로 삭제되었습니다.
    • 여행 코스가 정상적으로 삭제되었습니다.
  • 취소 했다는 toast ⇒ A custom positioned dialog
    • 취소되었습니다.
  • 수정 되었다는 toast ⇒ A custom positioned dialog
    • 댓글이 수정되었습니다.
    • 여행코스가 수정되었습니다.
• 유저페이지
  • 닉네임 변경 확인 toast ⇒ A custom positioned dialog
    • 프로필이 수정되었습니다.
  • 여행 전/후 토글 confirm 창
    • 여행 잘 다녀오셨나요? 소중한 리뷰도 남겨주세요!

 

 

이 정도가 우리 페이지에서 필요한 confirm 창과 alert 창이었다. 지금은 기능이 작동 되는지 안되는지 알기 위해서 뭐 작동할 때마다 alert 를 작성했는데, 이것도 내일 다 삭제해야겠다. 아니면 배포 전에 지우던지.

 

그래서 alert와 confirm 창을 하나하나 커스텀해야 하나 구글링해보는데 sweetAlert2 라는 라이브러리를 발견하고 이 라이브러리를 사용하기로 정했다.

 

https://sweetalert2.github.io/#examples

SweetAlert2

 

여기 공식 홈페이지 들어가보니까 custom도 쉽게 할 수 있어서 요 라이브러리로 결정했는데 icon은 미정이다.

공식에서 제공해주는 icon이 있긴 하지만 우리 프로젝트랑 안 맞는 것 같고, 또 이미지를 custom할 수 있기는 해서 일단 디자이너님께 말씀은 드려뒀다. 사실 이미지가 없어도 괜찮긴 한데...아무튼. 그래도 하나로 통일했다.

 

 

 

 

 

 

 

 

 

 

 

짧은 일기

사실은 최종 프로젝트 하면서 이렇게 많은 걸 회의해야 하나 싶은 순간들이 많았다. 오늘 alert창 통일하는 것도 예전에는 해본 적이 없는 회의였다. 이만큼 alert가 필요하지 않았던 것 같기도 하고, 굳이 넣지도 않았었는데 이번에는 생각보다 넣을 곳이 많다. 이렇게 생각해보면 이전에는 그냥 필요한데 안 넣었던 것 같기도...? ㅋㅋㅋㅋㅋ

 그래도 덕분에 sweetalert라는 라이브러리도 알게 되고, 생각보다 alert가 쓰일 곳이 많다는 것도 알게 되었다. 생각해보면 댓글 삭제 할 때도 confirm창이 뜨는데, 이전에는 그냥 삭제 누르면 바로 삭제되도록 했었던 것 같다. 이제는 그런 것도 생각해야 하는 구나 싶다. 확실히 점점 시간이 지날수록 사소한 것들도 체크해보고 결정하는 중이다. 더 발전한다는 뜻이겠지...?

 

 오늘은 카카오/네이버 로그인 마지막까지 붙잡고 있느라 막상 기능 개발을 많이 한 건 아닌 것 같다. 그리고 회의도 하느라고 더 그런 것 같기도. 아무튼 이번주 금요일이 중간 발표날인데, 수요일까지 기능 구현 완료하고 여유롭게 발표를 준비했으면 한다. 월요일은 지났으니 이제 이틀 남았지만...?ㅋㅋㅋㅋ