21-09-20 hook을 공부를 마치고 다시 시작을 하였다.
음 잠시동안 안하다가 하는 거라서 인지 어느 부분부터 정리를 해야할지 모르겠다.
그러기 때문에 최대한 모든것을 싹다 정리해 보겠다.
이 컴포넌트가 작동한 뒤에 뒤에 있는 컴포넌트 들이 작동하게 된다.
useEffect를 통해서 최초에만 작동을 하게 하였고 만약 user에 변화가 있을시에
isLoggedIn은 로그인 되면 true로 처리를 하였고 만약 true값이라면 로직에 있는 위치로 이동을 하게 하였다.
Navigation.js는 단순히 Link로직만 구성해 놓은 js파일이다.
일단 form태그로 감싸 놓았고 해당 값이 전송 될때에는 onSubmit핸들러가 작동을 하게 하였다.
그후 input를 활용하여서 아이디와 로그인을 적게 하였다.
그후 input태그를 추가하였고 만약 newAccount가 true라면 아이디를 새로 만들어라 아니면 로그인해라로 구성을 하였다.
form이외의 html로직을 설명하겠다.
일단 onclick를 통해서 단순하게 true/false를 바꿔주는 핸들러를 이용하게 하였고
button을 통해서 google, github로그인을 구성 하였다.
onChange핸들러
아이디와 패스워드를 입력하는 부분을 담당하고 있고 로직이 쉬우니 바로바로 넘어가겠다.
onsubmit핸들러
아이디와 패스워드의 값을 받아서 firebase에 있는 db에 생성자를 생성해 주는 로직이다.
newAccout가 true일떄는 회원가입을 로직을 작동
false일떄는 로그인 로직을 작동 시킨다.
toggleAcount핸들러
화면에 보이는 로그인/회원가입 을 선택할수 있게 해주는 핸들러이다.
단순히 들어오는 값의 반대값을 return하기 때문에 true값이 들어오면 false를 리턴하는 방식으로 작동한다.
onSocialClick핸들러
소셜 로고은 = google, github를 담당하는 핸들러 이다.
로직이 어떻게 작동하는 지는 나도 잘 모른데;;
후에 만약 이용할 일이 있으면 참고하면 좋을듯 싶다!
이번에도 기능만을 구현을 하였다.
마찬가지로 form태그를 사용하였고
input등등 사용을 하였다.
다른점은 값을 따로 전송을 한다는 점이다.
Nweet로 내가 만든 글의 정보를 담은 것을 전송을 하고 있다.
getNweets함수
firebase에서 내 데이터베이스에 있는 값을 가져 오는 로직이다.
dbService라는 곳에서 nweets 라는 값을 지정해서 꺼내 오게 된다.
이후 값을 States를 통해서 저장을 해준다.
후에 useEffect를 통해서 최초 실행될떄 값을 가져오게 만들어 주었다.
onSubmit핸들러
마찬가지로 firebase로직이다... ㅠㅠ
새로운 게시글을 만들어 주는 로직이며 form에 있는 정보(글의 내용)을 담아서 db에 저장을 해주게 된다.
onchange핸들러
중복이므로 넘어가겠다.
onFileChange핸들러
img파일을 업로드 하면 미리보기를 제공해주기 위한 핸들러 이다.
editing을 통해서 버튼을 누르게 되면 수정이 가능하게 만들어 주었다.
그후 수정이 되면 submit하게 만들어 주었고
isOwner값 비교르 통해서 내가 주인일 경우만
수정 및 삭제 버튼이 보이게 해주었다.
onDelete핸들러
window를 통해서 게시글을 삭제하는 버튼을 눌렀을떄 진짜 삭제할지 검증을 하는 방법이다.
doc부분은 firebase로직이다.
onSubmit핸들러
Form태그에 해당하는 핸들러 이다.
수정을 할떄 사용되는 핸들러 이며 firebase에 있는 db값을 수정을 한다.
이후 setEditing을 false로 바꾸어 주어야 다시 button이 보이게 된다.
처음 보는 로직도 많았고 firebase에만 통하는 로직도 있어서 사실 완벽하게 이해를 하고 있지는 않다... ㅠㅠ
아직 완벽하게 완성을 한것도 아니기 떄문에 아쉽기만 하다.. ㅠㅠ
이후 css작업을 조금만... 해보고 내 스스로 직접 블로그?? 같은 것을 한번 만들어 보고자 한다.
이떄는 firebase를 사용해서 db를 직접 사용하지 않고 일단 코드스테이츠 커리큘럼에서 배운정도
까지만 진행해보려고 한다.