본문 바로가기

전체 글

 (166)
Firebase Firebase Firebase는 모바일 및 웹 애플리케이션을 만들기 위해 Google에서 개발한 플랫폼입니다. 대부분의 앱을 만들 때 필요한 부분들을 자동으로 만들어 줍니다. 기본적으로 벡앤드를 firebase로 간단한 기능을 실현할 수 있습니다. Firebase와 app 연결하기 1. firebase사이트로 이동 => https://firebase.google.com/ 2. 회원 가입 & 로그인 => go to console → create project → web선택 → register app → 순서대로 작업 3. 프로젝트 생성 프로젝트 루트 경로에 firebase.js 파일 만들고 방금 SDKs를 복붙한 후, export default app를 추가하면 됩니다. Auth 활성화 1. 해당 프로젝..
상세 페이지 생성하기(3) Sprites 가져오기 DetailPage의 index.jsx에서 pokemonData중 sprites 데이터를 불러옵니다. 해당 데이터들을 정리하겠습니다. const formatPokemonSprites = (sprites) => { const newSprites = {...sprites} Object.keys(newSprites).forEach(key => { if(typeof newSprites[key] !== 'string') { delete newSprites[key] } }) return Object.values(newSprites) } 기존에 있는 데이터 손상하지 않게 새로운 배열을 만들겠습니다. {pokemon.sprites.map((url,index) => ( ))} html부분에 보여주..
React Portal로 모달 생성하기 Portal은 부모 컴포넌트의 DOM계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. ReactDOM.createPortal(child, container) 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식입니다. 두 번째 인자(container)는 DOM엘리먼트입니다. 1. Container 생성 위 코드처럼, 기본 root밖에 portal을 생성하고 위에 createPortal의 두번째 인자로 사용할 예정입니다. 2. createPortal 이용하기 import ReactDOM from 'react-dom' const Modal =({ open, children, onClise }) => { if..

티스토리툴바