하루하루 날씨가 레전드..
오늘은 Firebase에 Authentication으로 로그인 인증 기능을 만들어 보겠습니다!
firebase에 signInWithEmailAndPassword API를 이용해서 로그인하는 방식입니다.
로그인에 성공하면 firestore에서 데이터를 불러와서 state에 밀어넣게 만들었습니다.
함수에 인자를 보시면 email과 password가 있는데
여기서 옵니다.
비구조화 할당으로 매개변수에 넣기 쉽게 만들었습니다.
Q. 근데 저기 async랑 await이란건 왜 붙어있는거죠?
좋은 질문입니다!
왜 저걸 사용하는지 설명하기 전에 비동기와 동기를 먼저 설명드리겠습니다.
비동기?동기?
비동기는 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식이고
동기는 종료되지 않은 상태라 해도 다음 태스크를 바로 실행하는 방식을 말합니다.
그냥 말로 보니까 조금 어렵죠?
다들 놀이공원 가보셨죠?
여자친구가 있어야 가죠..
놀이공원 입구에 가면 티켓확인하고 들어가잖아요. 거기서 티켓확인하는데 뒤에 사람들이 줄을 서고 있으면 옆 개찰구에서 “뒤에 분들 여기로 와주세요~”라고 하고 표를 확인하는 일들이 분산됩니다.
티켓 확인하는 동안 뒷 사람은 기다려야 하잖아요ㅜㅜ 이런걸 동기(synchronous)라고 하고 옆 개찰구에서 멈춤없이 확인하고 바로바로 들어가는 것처럼 먼저 실행한 함수가 있더라도 다음 함수를 동작하게 만드는 방식을 비동기(asynchronous)라고 합니다.
설명이 길었네요..ㅎ 그래서 firebase는 기본적으로 비동기적으로 동작합니다. 그래서 그냥 실행해버리면
이런식으로 에러가 뜹니다.
“title에 읽을 수 있는 프로퍼티가 없습니다”라고 하는데 왜 그렇냐면 위에서 설명한 signInWithEmailAndPassword API가 동작하는데 밑에 코드가 기다리지 않고 바로 실행되어서 아직 받아오지도 못한 데이터를 state에 넣고 동작해버리기 때문입니다. 이를 방지하기 위해서 async/await을 사용합니다!
이 친구는 간단하게 비동기를 동기적처리처럼 동작하도록 구현해줍니다.
제가 동기적처리”처럼”이라고 설명했는데 이거는 async가 프로미스를 기반으로 동작ㅎ..
점점 산으로 가는 것 같아 자세한건 다음에 설명하겠습니다.
그래서 async/await을 사용하면 코드가 차곡차곡 정직하게 실행되서 로그인 인증을 하고 데이터를 받아오는 아주 착한 함수가 만들어집니다.
다음에는 프로미스에 대해 알아보겠습니다.
Done! 👋
