반응형 포켓몬도감8 [React] 포켓몬도감 만들기8 - Typescript로 변경하기 완성한 포켓몬도감 배포 주소이다. 완성된 포켓몬도감 01. 타입 스크립트를 사용하기 위한 준비하기 typescript 설치 npm install -D typescript @types/react @types/react-dom vite.config.js -> vite.config.ts 확장자 변경 tsconfig.json, tsconfig.node.json, vite-env.d.ts(/src/) 가져오기 vite로 typescript + 리액트 프로젝트 생성하면 기본으로 생성되는 파일을 가져온다. main.tsx 확장자 변경 index.html에서 main.tsx로 변경 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).r.. 2023. 12. 8. [React] 포켓몬도감 만들기7 03. 로그인 페이지 생성하기 01. Firebase에 대해서 Firebase란? 모바일 및 웹 애플리케이션을 만들기 위해 구글에서 개발한 플랫폼이다. 대부분의 앱을 만들때 필요한 부분들 인증 / 데잉터베이스 / 스토리지 / 푸시알림 / 배포 등등 을 자동으로 만들어주는 플랫폼이다. firebase를 이용한 앱 구조 02. Firebase와 애플리케이션 연결하기 firebase 사이트 firebase 바로가기 회원가입 & 로그인 콘솔로 이동 프로젝트 생성 firebase연결하기 npm install firebase firebase.js 파일 생성 export default app;추가 03. 로그인 페이지를 위한 경로 생성 및 Navbar 생성하기 router, Layout 생성 const Layout .. 2023. 12. 8. [React] 포켓몬도감 만들기6 16. React Portal 로 모달 생성하기 Portals란 ? Portal은 부모 컴포넌트의 DOM 계층구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공한다. ReactDOM.createPortal(child, container) 첫번째 인자 child는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식이다. 두번째 인자 container는 DOM 엘리먼트이다. Portal을 이용한 모달 생성 테스트 프로젝트 생성 npx create-react-app react-portal-modal 실행npm run start 문제점 첫번째 div와 두번째 div가 같은 z-index(1)가지고 첫번째 div안에 자식인 모달이 z-index 100.. 2023. 12. 8. [React] 포켓몬도감 만들기5 11. Damage Relations 컴포넌트 생성하기 데미지 관계 데이터 포켓몬의 타입이 어떤 타입에 강한지, 약한지 관계를 표현하는 부분 앞서 받아온 DamageRelations데이터를 살펴보자. console.log(pokemon?.DamageRelations); 한 포켓몬이 가진 타입에 따라서 더블데미지를 주는 타입(double damage to), 더블데미지를 받는 타입(double damage from), 하프데미지를 주는 타입(half damage to), 하프데미지를 받는 타입(half damage from), 데미지를 안주는 타입(no damage to), 데미지를 안받는 타입(no damage from) 여섯가지 관계를 시각화한다. UI에 넣어주기 위한 가공된 데이터 최종 형태 가공 첫.. 2023. 12. 8. [React] 포켓몬도감 만들기4 01. React Router Dom App.jsx에서 라우팅 설정 import { BrowserRouter, Route, Routes } from 'react-router-dom'; ... 02. React Router Dom APIs 중첩라우팅(Nested Routes) 리액트 라우터의 가장 강력한 기능중 하나. 복잡한 레이아웃 코드를 어지럽힐 필요가 없다. 대부분의 레이아웃은 URL의 세그먼트에 연결되며 React Router는 이를 완전히 수용한다. Outlet 자식 경로 요소를 렌더링하려면 부모 경로 요소에서 Outlet을 사용해야한다. 이렇게 하면 하위 경로가 렌더링될때 중첩된 UI가 표시될 수 잇다. 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트.. 2023. 12. 8. [React] 포켓몬도감 만들기3 15. AutoComplete 기능 생성하기 검색을 했을때 그에 관련된 검색어를 가져올 수 있게 서버에서 포켓몬 이름을 전달해주면 좋지만 그런 API는 없다. 따라서 이 기능을 구현하려면 프론트엔드에서 먼저 모든 포켓몬의 데이터를 가지고 있어야 한다. 현재는 포켓몬 데이터 limit을 20으로 설정하고있기 때문에 소스 코드의 수정이 필요하다. refactoring function App() { // 모든 포켓몬 데이터를 가지고 있는 State const [allPokemons, setAllPokemons] = useState([]); // 실제로 리스트로 보여주는 포켓몬 데이터를 가지고 있는 State const [displayedPokemons, setDisplayedPokemons] = useStat.. 2023. 12. 8. [React] 포켓몬도감 만들기2 ## 08. API를 통해 포켓몬 데이터 가져오기 ### Axios란 무엇인가? * Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. * 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게 하기위해 Ajax와 더불어 사용한다. Client Poke API 서버 (fetch()) (fetch => response => json) ### Axios 사용방법 * axios 모듈설치 `npm i axios` ```js const [pokemons, setPokemons] = useState([]); const url = 'https://pokeapi.co/api/v2/pokemon/?limit=100&offset=0'; useEffect(() => { .. 2023. 12. 8. [React] 포켓몬도감 만들기1 02. Vite을 이용한 리액트 생성 npm init vite npm install axios react-router-dom npm i -D autoprefixer postcss tailwind-scrollbar tailwindcss vite프로젝트는 dependency의 패키지들이 설치되어있지 않은 상태이기 때문에 한번 npm install을 해줘야함! 03. Vite이란? Vite는 💡 즉각적인 서버 시작 네이티브 ESM을 이용해 번들링 없이 온디맨드로 파일을 제공할 수 있어요! ⚡️ 번개처럼 빠른 HMR 앱 크기에 상관없이 Hot Module Replacement(HMR)는 언제나 빠르게 동작해요. 🛠️ 풍부한 기능 추가적인 모듈의 설치 없이 TypeScript, JSX, CSS 등을 사용할 수 있.. 2023. 12. 8. 이전 1 다음 반응형 최근댓글 최근글 인기글 © Copyright 2024 ttutta
최근댓글