안녕하세요, 오늘 해볼 것은 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..
안녕하세요, 피터팬입니다! 오늘은 동기 처리와 비동기 처리에 대해 알아볼건데요! https://peter-coding.tistory.com/264 [React] fetch를 통해 HTTP 요청 보내기 안녕하세요, 피터팬입니다! 오늘은 fetch에 대해 배워볼건데요. fetch는 서버에 HTTP요청을 보내 데이터를 받을 수도, 보낼 수도 있습니다. JS는 필요할 때 서버에 네트워크 요청을 보내고 새로운 정 peter-coding.tistory.com 위 fetch글에서, async와 await를 이용해 fetch(비동기 함수)를 동기 처리하도록 바꾸었는데요. 그럼 동기 처리와 비동기 처리가 무엇일까요? 동기 처리 ; 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있음 비동기 처리 ; 요..
안녕하세요, 피터팬입니다! 오늘은 fetch에 대해 배워볼건데요. fetch는 서버에 HTTP요청을 보내 데이터를 받을 수도, 보낼 수도 있습니다. JS는 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다. 이는 HTTP 요청에 최적화 되어있고 상태도 잘 추상화 되어있고, Promise를 기반으로 되어있기 때문에 상태에 따른 로직을 추가하고 처리하는데 최적화 되어 있기 때문입니다. fetch의 기본 문법은 다음과 같습니다. let promise = fetch(url,[options]) .then(response => response.json()) // 정보 받는 방식 (아래는 JSON) .then(response => data.filter(item=>item.isReq..
오늘은 Visual Studio Code 단축키들을 정리해볼 건데요! 아래 Reference에서 자주 쓰일 것 같은 것들만 정리해보겠습니다. Ctrl+Enter ; 커서가 위치한 곳 아래 줄에 빈 행 삽입 Alt + 방향키(위/아래) ; 커서 위치한 행이 방향으로으로 이동 Ctrl + BS ; 단어 부분 삭제(커서 왼쪽) Ctrl + DEl ; 단어 부분 삭제(커서 오른쪽) Ctrl + Shift + \ ; 대응하는 괄호에 점프 Ctrl + L ; 행을 선택하여 커서를 아래 행으로 이동 요즘은 어떤 프로그램을 쓰든 어느정도 익숙해지면 단축키부터 검색해서 익히는 거 같아요. 단축어만 알면 자주 사용하는 프로그램일수록 프로그램 사용의 질이 올라가고, 그에 따라 삶의 질이 올라간답니다. 처음 2~3번만 메모해..
안녕하세요, 피터팬입니다! 오늘 배워 볼 것은 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..
안녕하세요, 피터팬입니다! 오늘은 localStorage에 대해 배워볼건데요. localStorage는 개발자 도구(F12 혹은 ctrl+shift+i)에서 보실 수 있습니다. 개발자 도구 > 애플리케이션 > 로컬 스토리지 > chrome-extension/.... 브라우저가 열려있는 동안 유지되는 sessionStorage와 달리, localStorage는 브라우저를 닫았다 열어도 데이터가 남아있습니다. localStorage ; 유효기간 없이 데이터를 저장하고, JS를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라짐 - localStorage환경에 객체를 저장하려면 JSON.stringify를 통해 직렬화를 시켜주어야 함 - localSotrage환경에서 객체를 가져오려면 JSON...
