21-09-14 작성 시작

코드를 천천히 적어가면서 하였는데 글이 모두 날라가서;; 최종 결과물을 통해서 정리를 해보겠다.
-> 이해가 더 어려울것 같다.

Router.js

• 기본적인 Router구문이다.

위에 있는 LoggedIn은 변수를 받는것이다.

• hoop변수

App.js

Router에 주는 isLoggedIn은 여기에서 정의를 하였다.
이곳에서 정의한 이유는 역할을 나누기 위함이다.

• Router은 단순히 Router역할만 하게 만들어준 것이다.

useEffet의 역할

• firebase의 초기화가 너무 빨라서 로직이 적용되지 않기 떄문에 조금 지연해 주는 역할을 한다고 생각하면 된다.

새로운 계정을 만들어서 회원가입을 하게 되면 DB에 쌓이게 되고 이것은 로그인이 되었다고 인식을 하게 된다 그렇게 된다면 그렇게 된다면 authService.onAuthStateChanged 자동으로 값의 변화를 확인한뒤 로직을 적용 시켜 주는 것이다.

이후 만약 값이 있다면 isLOggedIn을 true로 변화시켜서 home페이지를 반환하는 로직이다.

setInit은 홈페이지 로딩에 관한것이다.

firbase는 초기화가 너무 빨라서 isLoggedIn을 인식을 못하기 떄문에 useEffect를 통해서 먼저 isLoggedIn을인식한뒤 setInit를 통해서 초기화를 하는 것이다.

이 부분은 실제로 영상으로 보면 좋은데 후에 추가해 보도록 하겠다.

Auth.js

• 로직이 길어서 한번에 설명이 될지 모르겟다.

html

html과 이벤트 핸들러 부분을 이해하는데에는 큰 어려움이 없을 것 같다.

이벤트 핸들러들

onChange

• 두가지 onChange를 처리하기 위한 핸들러 이다

보통은 한개만 처리하지만 이 코드에서는 같은 기능을 하는 두가지를 처리하기 위해서 변수 선언을 저렇게 하였다.

변경되는 target이 name인지value인지를 인식한후에 이벤트를 발생시키는 원리를 이용하였다.

value에는 내가 입력하는 값이 들어가게 된다(email,password)

onSubmit

• 회원가입, 로그인 버튼을 눌렀을떄 작동하는 핸들러 이다.

preventDefalt는 새로고침 및 화면이 재로딩 될떄에 default설정을 막는 것이다.

• default설정은 모든 값의 초기화 이다.
• 저렇게 설정을 해주게 된다면 새로고침이 되어도 입력해놓은 값이 사라지지 않는다.

data를 초기화 해주는 저 함수들은 모두 firebase함수 이기 떄문에 지속해서 firebase를 이용하려면 익숙해 지는 것이 좋다.

if 문을 통해서 newAccount를 만들시에는 새로운 값을 받게 해주었고
newAccount가 false = 로그인을 해야 할떄에는 로그인이 되게 해주었다.

mybase.js

• firebase를 사용하기 위한 기본 설정이라고 생각하면 된다.

후기, 느낀점

이런 식의 코드 짜는 것은 나도 처음이고 처음보는 방법도 많아서 나도 글만 읽었을떄는 이해가 잘 안되었다;;

후에 시간이 나면, 아마도 내일? 가능하다면 다시 복습하면서 영상을 돌려볼것이다.

그후 어느정도 이해가 된다면 진도를 더 나가보도록 하겠다.

2021.09.16
내가 hook에 대한 개념이 많이 부족한것 같다.

영상을 보면서도 빠르게 이해하지 못하고 따라가기만 벅차기 때문에 일단
hook에 관한 내용을 더 학습한후 계속해서 작업해 보겠다.