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

오늘 일과 간단 요약

1. 오전 스크럼
2. 소셜 로그인 (구글) 구현
3. 로그인/로그아웃 토글 구현 완료
4. 비밀번호 재설정 기능 추가
5. 소셜 로그인 (카카오, 네이버) 구현 시도

 

 

 

 

 

 

 

 

 

오전 스크럼 + 오전 기능 개발

계속해서 기획을 위해 회의를 오래 해서 오늘 조원들 모두가 피곤에 쩔어 있었다 (ㅋㅋㅋ)

그래서 오전 스크럼도 빨리 끝났고, 디자이너님과의 회의도 없었기 때문에 회의 없이 오전부터 기능 개발을 시작했다.

 

어제 이메일과 비밀번호로 로그인 구현하는 건 완료했고 어제 하다만 로그인/로그아웃 토글을 구현했다.

로그인 안 했을 때는 로그인 버튼만 나오면 되지만,

로그인 했을 때는 유저페이지로 가는 링크와 글쓰기로 바로 가는 링크 그리고 유저관련 글도 있어야 했기 때문이다.

 

그래서 어제 구현했던 삼항연산자에서 링크들만 좀 추가해주었다.

어제 navigate에 관련된 에러를 마주하고 router 안으로 바꿨기 때문에...ㅋㅋㅋㅋ 순조롭게 navigate로 링크 구현완료했다.

 

그리고 나서 user 페이지에서도 user의 닉네임이 나오게 하고...사실 그건 그렇게 어렵지 않아서.

대신에 이메일에서 @ 뒤를 다 지우는게 갑자기 생각이 안나서 구글링해서 구현했다.

 

const auth = getAuth();
const user = auth.currentUser;
const userName = user?.email?.split("@")[0];

userName으로 따로 변수 설정해줬는데, split만 해놓고 나니까 @만 사라졌다.

그래서 뭔가 하다가 뒷부분을 아예 지워야 한다는 걸 생각하고 [0]을 추가해주었더니 아이디만 잘 나왔다.

 

원래 의도는 닉네임을 따로 설정하는 것이었는데, firebase 공식 문서에는 나와있는데 우리 프로젝트에 어떤 식으로 구현해야 할지 감이 안 잡혀서 우선은 이메일의 아이디를 유저의 아이디로 만들었다.

나중에 시간이 된다면 바꾸고 아니면 아예 프로필 수정을 만들어야지...예전에 뉴스피드 프로젝트에서 했었는데 그 때는 vanila js로 했었어서 좀 다를 것 같긴 한데...그걸 참고하면서 해야겠다.

 

 

 

 

 

 

 

소셜로그인 (카카오, 네이버) 삽질

firebase에서 기본적으로 제공해주는 기능에는 카카오와 네이버 소셜 로그인이 없어서 따로 구현해야 했다.

그래서 찾아보는데 react + 카카오 로그인 기능이 많아서 다 살펴보는데 이걸 데이터베이스에 저장하고 하는 데 백엔드 지식이 필요한 것 같았다. (내가 무지했을 수도, 몰랐을수도...)

 

아무튼 먼저 카카오 developers에 들어가서 내 앱을 만들어야 한다고 해서 만들었다.

redirect URL도 미리 설정해야 한다고 해서 설정하고, api_key도 설정하고 index.html에 script도 추가하고 등등...

다른 수많은 글들을 잘 참고해서 만들었고 버튼을 눌렀더니 카카오 로그인하기로 잘 연결되었다.

그래서 잘 연결한줄 알았는데...? 아니었따!

 

이 페이지에서 로그인했다는 기록은 뜨지만 firebase에 그 아이디와 비밀번호가 저장되지 않았다.

그러고 보니 firebase에 연결하는 법을 몰랐다는 엄청난 사실이.....ㅋㅋㅋㅋㅋ

 

사실 카카오 devlepers에서 설정하는 것도 몰라서 버벅거리고 rest_api가 뭔지도 한참 찾고 등등....

그럴듯한 코드들을 따라해서 참고했었는데 제일 중요한 firebase에 저장을 하지 않어서...ㅋㅋㅋ

이게 거의 몇 시간이 걸려서 한 것이었는데 허무하게 실패....ㅠ

다시 구글링해서 찾아봐도 정확하게 잘 모르겠어서 결국 조원들에게 sos쳤다.

 

그리고 저녁에 튜터님이랑 기술 멘토링할 때도 질문했었는데,

다른 소셜 로그인은 우선순위를 뒤로 미루고 firebase에서 제공하는 구글과 facebook 로그인 먼저 구현하라고 하셨다.

그래서 저녁에는 facebook 로그인만 구현했다.

 

네이버도 마찬가지...ㅎ

네이버 developer에 들어가서 앱 설정은 끝내고 연결까지는 되었는데, 카카오랑 마찬가지로

firebase에 이용자를 저장하는 걸 도통 모르겠어서....아련하게 끝나게 되었다...

 

튜터님이 참고하라고 블로그 링크를 주셔서 내일 그거 보면서 한번 다시 해봐야겠다.

오늘은 몇 시간 동안 비슷한 내용 찾고 firebase 문서 읽다가 머리가 굳어버렸다 ㅋㅋㅋㅋ

 

 

완전히 다 안건 아니지만, 카카오와 네이버 로그인을 연동하려면 내 앱을 설정해야 한다.

 

https://developers.kakao.com/

Kakao Developers

카카오는 여기서 로그인하고 앱을 만들고 REST API 키와 JavaScript 키를 알아야 하고,

index.html에

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js" integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>

이것도 추가해줘야 한다.

그리고 링크를 통해 카카오 로그인을 할 수 있다.

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&prompt=none

위에서 REST_API_KEY와 REDIRECT_KEY가 필요한 것이다.

사용자가 필수 동의 항목에 동의하고 로그인을 요청하면, 카카오 인증 서버는 인가 코드(Authorization Code)를 발급해 서비스 앱에 등록된 Redirect URI로 전달하기 때문에 미리 Redirect URL도 설정해주는 것이 좋다.

 

나는 여기까지 해서 로그인까지는 성공했는데....firebase와 연결하는 걸 못했다 ㅠ

 

 

https://developers.naver.com/main/

NAVER Developers

마찬가지로 네이버 역시 여기서 설정하면 된다.

네이버 로그인을 완전히 성공한건 아니고 오류가 떠서 잘 되는지는 모르겠지만 여기서는 client ID와 Client Secret이 필요하다.

 

 

어쨋든 여기까지는 다 해보긴 했는데...흠...할 수 있으면 하는 거고 정 모르겠으면 다시 튜터님께 질문하러 가거나

아예 추가 기능으로 뺄 것 같다. 몇시간이나 삽질한 결과가 이거라서 좀 아쉽지만....재밌는 시간이었다.

 

 

 

 

 

 

 

비밀번호 재설정하기 (firebase)

firebase에는 굉장히 편하고 신기한 기능들이 많은데 오늘 처음 써본게 비밀번호 재설정이다.

다른 사이트들을 보면 비밀번호를 까먹었을 때 가입한 이메일로 비밀번호 재설정하는 링크를 보내주는데,

firebase에는 이게 간편하게 잘 되어 있었다.

그래서 문서만 읽고도 잘 할 수 있어서 문서를 읽고 다른 블로그들 글을 좀 보다가 바로 기능 구현을 했다.

 

sendPasswordResetEmail()이라는 함수를 쓰면 간단하게 해결이 되었다.

const sendEmailBtn = async () => {
    if (error !== "") setError("");

    setSending(true);

    await sendPasswordResetEmail(auth, email)
      .then(() => {
        alert("이메일에 링크를 보냈습니다");
        setSent(true);
        setSending(false);
      })
      .catch((error) => {
        alert("이메일 보내기 실패");
        setError(error.message);
        setSending(false);
      });
  };

이런 식으로 코드를 구현하고 이메일을 입력하고 전송 버튼을 누르면 바로 이메일이 왔다.

test로 로그인한 이메일 대신 구글 로그인을 해보고 비밀번호 기능이 제대로 실행되나 실험해봤는데 제대로 잘 작동되었다.

 

 

이런 메일이 오는 것이다!

firebase는 확실히 이런 점이 강점이라고 생각한다. 문서도 잘 정리되어있고 간단하게 구현 가능하기 때문에....

이걸 생으로도 한번 해봐야 할 것 같지만 우선은 firebase로 구현하는 걸로 만족하는 걸로.

이미 이걸로도 시간을 제법 썼다 ㅋㅋ

 

그런데 문제점이 우리는 로그인을 모달창으로 구현했는데, 어떤 식으로 컴포넌트를 구성할까 고민하다가 이것저것 해봤는데 오늘은 해결 못하고 새로운 페이지를 만들어서 거기에서 비밀번호 재설정하는 컴포넌트를 구현했다.

 

모달창 안에서 버튼을 누르면 비밀번호 바꾸는 걸로 해보고 싶은데, 오늘은 여기까지만 구현했다.

삼항 연산자를 안쓰고 if 문을 쓰던지 아니면 다른 방법이 있을 것 같긴 한데, 쉽지 않다.

다르게 구현했다가 아예 화면이 나오지 않아서 우선은 다른 페이지로 이동하는 방식으로 구현하고 push했다.

 

적어도 주말 안에는 PR 날리고 merge하고 싶은데, 좀 더 고민해봐야겠다.

 

 

 

 

 

 

 

 

 

짧은 일기

딱히 언급하지는 않았지만 디자이너님이 메인 페이지를 디자인해주셔서 그걸 보면서 우리끼리 다시 회의하는 시간을 가졌다. 디자인을 보면 다 좋다고 할 줄 알았는데 그건 나만의 착각이었다.

디자인과 개발 사이의 절충안을 찾기 위해서 끊임없는 회의가 필요했다. 이것저것 디자이너님께 전달할 사항도 많았고 디자이너님의 요구사항에 대해서도 생각해보고...그래도 소통이 원만하게 잘되어가고 있어서 다행이다. (선형님 최고)

 

일주일 내내 회의를 반복하다가 이제서야 기능 개발할 시간이 조금 많아졌는데, 계속 할수록 기획 회의는 줄어들지 않을까...? 우리 조원들은 필기왕(!)들이어서 매번 스크럼과 회의 내용을 잘 정리해주셔서 나중에 다시 보기 아주 좋다.

오늘도 회의 내용이 엄청 많았는데 노션에 잘 정리되어 있었다. 진짜 이번 조 잘 만났다...

 

주말에는 조금 쉬기도 하면서 오늘 구현하면서 못한 것들을 생각해봐야겠다.

튜터님이 지난 프로젝트들과는 달리 5주동안 진행하기 때문에 좀 쉬면서 해야 한다고 해서 주말에는 좀 널널하게 공부하지 않을까 싶다.