안녕하세요, 오늘 해볼 것은 React로 로그인 기능을 구현해보는 건데요! Fireabase의 API로는 아래 기능들이 있습니다. 1. Authentication ; 회원가입, 로그인, 비밀번호 변경 등 계정 기능 2. FireStore ; firebase의 대표기능, 1달에 문서 쓰기 60만번까지 무료 3. 실시간 데이터베이스 ; 작은 데이터를 여러 번 보내는 서비스에 유리 4. Storage ; 파일 저장 가능, 5GB까지 무료 오늘 사용할 것은 1번 째의 Authentication기능입니다. 공식 문서는 아래 링크에 있습니다. https://firebase.google.com/docs/reference/rest/auth Firebase 인증 REST API FirebaseVisionOnDeviceA..
안녕하세요, 피터팬입니다! 오늘은 fetch에 대해 배워볼건데요. fetch는 서버에 HTTP요청을 보내 데이터를 받을 수도, 보낼 수도 있습니다. JS는 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다. 이는 HTTP 요청에 최적화 되어있고 상태도 잘 추상화 되어있고, Promise를 기반으로 되어있기 때문에 상태에 따른 로직을 추가하고 처리하는데 최적화 되어 있기 때문입니다. fetch의 기본 문법은 다음과 같습니다. let promise = fetch(url,[options]) .then(response => response.json()) // 정보 받는 방식 (아래는 JSON) .then(response => data.filter(item=>item.isReq..
안녕하세요, 피터팬입니다! 오늘 배워 볼 것은 React의 메모이징 기법인데요. React의 메모이징 기법에는 React.memo, useCallback, useMemo 이렇게 3가지가 있습니다. 1. React.memo React.memo란? 부모 컴포넌트가 렌더링 될 때 해당 컴포넌트에 속하는 모든 자식 컴포넌트 또한 렌더링됩니다. 하지만, 부모 컴포넌트에서 자식 컴포넌트로 내려주는 props가 바뀌지 않았다면, 해당 자식 컴포넌트를 리렌더링하지 않아도 될 것입니다. 컴포넌트에서 리렌더링이 필요한 상황에서만 해주도록 설정할 수 있는데 이 때 사용하는 함수가 바로 React.memo 함수입니다. 사용 예시 const Output = () => {return()}; export default **Reac..
안녕하세요, 피터팬입니다! 오늘은 Modal을 작성해볼건데요. 모발(Modal)이란 화면 위에 하나의 작은 화면을 만들어 부가적인 일들을 처리할 수 있게 만드는 기능입니다. vs 팝업 ; 현재 화면에 다른 화면을 하나의 창으로 보여주는 기능 예시 index.js Modal.js import { Fragment } from 'react'; import ReactDOM from 'react-dom'; import classes from './Modal.module.css'; const Backdrop = (props) => { return ; }; const ModalOverlay = (props) => { return ( {props.children} ); }; const portalElement = do..
안녕하세요, 피터팬입니다! 오늘은 useContext를 이용하여 전역 props를 전달할 건데요 https://peter-coding.tistory.com/218 [React] useContext를 이용해 전역 props전달하기 기존 컴포넌트 간에 데이터를 전달하려면 props를 이용해야 합니다. A>B>C 각각 부모자식관계일 때, A->C로 데이터를 props로 전달하려면 A>B, B>C로 전달해야하는 불편함이 있습니다. 이를 해결하게 위 peter-coding.tistory.com 위에서는 App.js에 data를 만들어, data를 App에서 전달하였습니다. 이번에는 index.js에서 App Component를 AuthContextProvider로 둘러싸, App.js에서는 오로지 App내용만 담..
안녕하세요, 피터팬입니다! 오늘은 useEffect에 대해 알아볼건데요. useEffect는 side effect(컴포넌트 안에 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업)를 수행할 수 있게 해줍니다. 적용법 import { useEffect } from "react"; 사전 지식 Component의 LifeCycle ; Mount -> Update(Rerendering) -> Unmount 사용법 값이 변경되면 callback function 실행 useEffect(()=>{ callback function }, [ 값 ]); 상황에 따른 사용법입니다. 1. mount되면 실행 ; x useEffect(() => { console.log("Mount!") }) 2. count값이 변경되..
안녕하세요, 피터팬입니다! 오늘은 Reducer에 대해 알아볼 건데요 useRedcuer는, State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook입니다. useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 적용법 import { useReducer } from "react"; 사용법 1. reducer 선언 const reducer = (state,action){ switch(action.type){ case "INCREMENT": return (~) default: return (~) } } state ; reducer가 불리는 시점의 data action ; 업데이트를 위한 정보를 가짐(type,value 등) 2..
