본문 바로가기

React26

#0 INTRODUCTION nomadcoders.co/nwitter/lobby 이메일을 통한 인증 비밀번호를 통한 인증 구글을 통한 인증 그리고 회원가입 -> 로그인과 같은 실시간 처리 트윗, 파일업로드 같은 많은 기능들을 담을거다. (백엔드 코드를 작성하지 않고 만들거다.) Firebase는 웹사이트를 통해 제공해주는 백엔드 서비스다. Firebase는 처음에는 데이터베이스였다. 나중에 구글에 의해 확장되기 시작했다. firebase.google.com/products?hl=ko Firebase Products Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com Firebase를 언제 사용해야 되는가? Firebase는 아주 .. 2020. 9. 18.
[Hooks] 6. useTitle / useClick 이제 useEffect를 사용한 첫 번째 hooks을 작성해보자. 문서의 제목을 업데이트 시켜주는걸 담당하는 hooks을 작성할거다. 제목을 업데이트할 수 있게 setTitle을 return 해줄거다. useEffect는 component가 mount 될 때 updateTitle을 부를거고, title이 업데이트되면 updateTitle을 다시 부를거다. 아직 updateTitle을 부르지 않았기 때문에 지금 바로 무슨 일이 생기진 않는다. titleUpdater를 어딘가에서 부르면 title이 바뀌게 된다. [title]이 바뀌면 updateTitle이 다시 불러지게 된다. 시간지연을 줘서 변화를 확인해보자. dependency는 매우 좋다. 하나의 value가 바뀌면 아래처럼 setTitle을 이용할.. 2020. 8. 22.
[Hooks] 5. Introduction to useEffect useState의 첫 번째는 state를 초기화 시켜주고 두 번째는 첫 번째 아이템인 currentIndex는 index가 될거고, setCurrentIndex는 value를 바꿔줄거다. 다시 말하자면 useState의 value를 초기화해주고 현재 value와 value를 변경해주는 것. 이제 useEffect를 알아보자. componentWillUnmount와 componentDidMount, compoentWillUpdate와 비슷하다. component가 mount 되자마자 우리는 function을 실행시킬건데 component가 mount 되는 즉시 hello를 볼 수 있다. number와 aNumber를 클릭하면 componentDidUpdate의 역할도 하기 때문에 콘솔창에 sayhello가.. 2020. 8. 22.
[Hooks] 4. useTabs API나 다른 어떤것으로부터 무언가를 가져오려고 한다. 그건 내 content가 될거다. section1, section2의 버튼을 만들어주자. 선택한 section의 content만 보여주고 싶다면? 그 다음에는 useState가 항상 initalTab을 갖게할거다. 내가 현재 선택한 탭의 content의 인덱스를 얻고 싶다면? useTab(0)일 때 즉, 배열의 인덱스가 0 일 떄, 첫 번째 요소를 가져온다는 것. currentItem은 allTabs(currentIndex)가 될거다. function이 시작될 때 에러를 확인하려고 한다. Array.isArray() 메서드는 해당 인자가 Array인지 알려준다. allTabs가 true가 아니거나 배열이 아니라면 리턴되고 끝날거다. 여기 tab이 없.. 2020. 8. 21.