Nwitter -2 [Nomard 클론 코딩]

Lumi·2021년 9월 20일
0

Nomard 클론코딩

목록 보기
2/4
post-thumbnail

21-09-20 hook을 공부를 마치고 다시 시작을 하였다.

음 잠시동안 안하다가 하는 거라서 인지 어느 부분부터 정리를 해야할지 모르겠다.

그러기 때문에 최대한 모든것을 싹다 정리해 보겠다.

App.js

  • 모든 컴포넌트중 맨 위에잇는 컴포넌트 이다.

이 컴포넌트가 작동한 뒤에 뒤에 있는 컴포넌트 들이 작동하게 된다.

useEffect를 통해서 최초에만 작동을 하게 하였고 만약 user에 변화가 있을시에

  • user가 로그인 되었을 시에 로그인 처리르 true로 하고 로그인된 유저의 정보를 저장한다.
  • 이후 그 로그인된 사실과 정보를 Router로 전송을 하게 된다.

AppRouter.js

  • App에서 들어오는 값을 받아서 url에 파싱해 주는 역할을 한다.

isLoggedIn은 로그인 되면 true로 처리를 하였고 만약 true값이라면 로직에 있는 위치로 이동을 하게 하였다.

Navigation.js는 단순히 Link로직만 구성해 놓은 js파일이다.

Auth.js

Html

  • Auth.js의 html부분 부터 살펴 보겠다.

일단 form태그로 감싸 놓았고 해당 값이 전송 될때에는 onSubmit핸들러가 작동을 하게 하였다.
그후 input를 활용하여서 아이디와 로그인을 적게 하였다.

  • 실질적으로 로그인 처리를 하는 부분이 이 Auth.js이다.

그후 input태그를 추가하였고 만약 newAccount가 true라면 아이디를 새로 만들어라 아니면 로그인해라로 구성을 하였다.

form이외의 html로직을 설명하겠다.

일단 onclick를 통해서 단순하게 true/false를 바꿔주는 핸들러를 이용하게 하였고

button을 통해서 google, github로그인을 구성 하였다.

  • 단순히 기능만을 구현하였고 css는 적용하지 않았다.

js

  • firebase를 사용하기 떄문에 처음보는 로직이나 함수들이 많으니 주의해서 이해를 해보자

onChange핸들러
아이디와 패스워드를 입력하는 부분을 담당하고 있고 로직이 쉬우니 바로바로 넘어가겠다.

onsubmit핸들러
아이디와 패스워드의 값을 받아서 firebase에 있는 db에 생성자를 생성해 주는 로직이다.
newAccout가 true일떄는 회원가입을 로직을 작동
false일떄는 로그인 로직을 작동 시킨다.

toggleAcount핸들러
화면에 보이는 로그인/회원가입 을 선택할수 있게 해주는 핸들러이다.
단순히 들어오는 값의 반대값을 return하기 때문에 true값이 들어오면 false를 리턴하는 방식으로 작동한다.

onSocialClick핸들러
소셜 로고은 = google, github를 담당하는 핸들러 이다.
로직이 어떻게 작동하는 지는 나도 잘 모른데;;

  • firebase에서 이렇게 사용하라고만 지침이 있을 뿐이다.

후에 만약 이용할 일이 있으면 참고하면 좋을듯 싶다!

home.js

html

이번에도 기능만을 구현을 하였다.
마찬가지로 form태그를 사용하였고
input등등 사용을 하였다.

  • 사실 Auth.js와 비슷한 부분이 많다

다른점은 값을 따로 전송을 한다는 점이다.
Nweet로 내가 만든 글의 정보를 담은 것을 전송을 하고 있다.

  • isOwner는 후에 다루겠지만 작성자만이 만들 글을 삭제, 수정 할수 있게 값을 따로 전송 하는 것이다.

js

getNweets함수
firebase에서 내 데이터베이스에 있는 값을 가져 오는 로직이다.

  • firebase에 있는 로직 이기 때문에 나도 자세히는 잘 모른다... ㅠㅠ

dbService라는 곳에서 nweets 라는 값을 지정해서 꺼내 오게 된다.

  • nweets는 내가 글을 쓰게 되면 만들어지는 저장소?? 라고 생각하면 된다.

이후 값을 States를 통해서 저장을 해준다.

후에 useEffect를 통해서 최초 실행될떄 값을 가져오게 만들어 주었다.

onSubmit핸들러
마찬가지로 firebase로직이다... ㅠㅠ
새로운 게시글을 만들어 주는 로직이며 form에 있는 정보(글의 내용)을 담아서 db에 저장을 해주게 된다.

  • 이후 getNweets함수를 통해서 db에 있는 값을 꺼내 온다.

onchange핸들러
중복이므로 넘어가겠다.

onFileChange핸들러
img파일을 업로드 하면 미리보기를 제공해주기 위한 핸들러 이다.

  • firebase로직은 아니지만 처음 써보는 로직으로 저런식으로 사용한다고만 알고 있자....

Nweet.js

  • 내가 글을 쓰게 되면 해당 글이 화면에 보이게 하는 로직이다.

html

editing을 통해서 버튼을 누르게 되면 수정이 가능하게 만들어 주었다.
그후 수정이 되면 submit하게 만들어 주었고

isOwner값 비교르 통해서 내가 주인일 경우만

  • 내가 만든 게시글인 경우만

수정 및 삭제 버튼이 보이게 해주었다.

js

  • 어지러울수 있는 로직만 살펴보겠다.

onDelete핸들러
window를 통해서 게시글을 삭제하는 버튼을 눌렀을떄 진짜 삭제할지 검증을 하는 방법이다.

  • hook정리할떄 window를 통한 로직 검증을 해본 예시가 있기 때문에 해당 부분을 참고하자

doc부분은 firebase로직이다.

  • db에 있는 게시물에 해당하는 값을 지운다고 생각하면 된다.

onSubmit핸들러
Form태그에 해당하는 핸들러 이다.
수정을 할떄 사용되는 핸들러 이며 firebase에 있는 db값을 수정을 한다.
이후 setEditing을 false로 바꾸어 주어야 다시 button이 보이게 된다.

후기, 느낀점

처음 보는 로직도 많았고 firebase에만 통하는 로직도 있어서 사실 완벽하게 이해를 하고 있지는 않다... ㅠㅠ

아직 완벽하게 완성을 한것도 아니기 떄문에 아쉽기만 하다.. ㅠㅠ

이후 css작업을 조금만... 해보고 내 스스로 직접 블로그?? 같은 것을 한번 만들어 보고자 한다.

이떄는 firebase를 사용해서 db를 직접 사용하지 않고 일단 코드스테이츠 커리큘럼에서 배운정도

  • 이벤트 핸들링 정도??

까지만 진행해보려고 한다.

profile
[기술 블로그가 아닌 하루하루 기록용 블로그]

0개의 댓글