오늘배운것

리액트를 이용하여 회원가입,로그인,로그인상태유지,로그아웃기능을 리덕스와 firebase Authentication(소셜 로그인기능)을 이용하여 구현하는 방법을 배웠다. 리덕스 config파일을 구성하는 과정에서 이전과 추가된사항으로는 리덕스의 상태를 좀더 눈으로확인할 수있게해주는 redux-logger가 추가되었고, 리덕스에서도 라우터를 활용할 수있게해주는 history를 스토어를만드는데 추가되었다. 이번 내용만큼은 코드를 따라치는것보단 전체적인 흐름을 이해하는것이 중요하다하여 코드는 복붙으로 해결하고 강의자료와 강의내용을보면서 최대한 이해하는데 노력했다. 결국엔 리덕스에서 미들웨어함수를통해 firebase Authentication에서 제공하는 함수들을통해 회원가입을하고,로그인시 세션스토리지에 로그인정보를등록하고, 세션스토리지에 들어있는 로그인정보에 존재하는 파이어베이스api키값을 통해 새로고침되었을떄 리덕스에서 데이터가(유저정보 포함) 사라지는현상을 app.js에서 useEffect를 사용하여 새로고침될떄마다 파이어베이스api키값을통해 세션스토리지에 로그인정보가 들어있는지 확인한다. 만약 들어있다면, 파이어베이스에서 제공하는 onAuthStateChanged() 함수를통해 로그인이 되어있는지,안되어있는지를 확인하고,로그인이 되어있다면 그 로그인정보를 가져와 리덕스로 dispatch해준다.

어려웠던점.

로그인의 상태를 인지하는 방법이 헷갈렸었다. 우선 우리가만든 웹을 구성하는 코드단에서는 리덕스에 로그인이 되어있는지 안되어있는지를 판단하여 컴포넌트를 보여주고 안보여주고를 결정한다. 근데 리덕스는 새로고침을하게되면 데이터가 초기화가됨으로 지속적인 업데이트를 해줄필요성이 있게된다. 그래서 이번 강의에서 사용했던 방법으로는 세션스토리지에도 추가적으로 로그인상태를 저장시키는 방법을 이용했다. 세션스토리지에 로그인상태를 저장하게되면 창이 닫히지않는이상 로그인정보를 가지고있기떄문이다. 그래서 새로고침을 했어도 리덕스에선 데이터가 날아가지만, 세션스토리지엔 남아있으므로, 이를가지고
onAuthStateChanged() 함수를통해 실제로 파이어베이스에서 로그인이 되어있는지를 확인하는것이다. 강의를 들으면서 이해했던내용으로는 세션스토리지에 로그인정보가 들어있다는 의미가 파이어베이스에서도 로그인이 되어있다 라는 내용으로 잘못 이해하고있었다. 이렇게 알고서 강의를 계속듣다보니 점점 이해가안가 주변 팀원분들꼐 질문을드렸었고, 세션과 리덕스에 존재하는 로그인정보는 로그인했을당시에 저장된정보이며, 실제로 로그인을 담당하는 파이어베이스에서 로그인을 유지하고있는지는 확인이 어렵다는것을 알았다.