전체 글 (166) 썸네일형 리스트형 여행상품 프로젝트(1) 프로젝트 구조 만들기 프로젝트 시작 react-context-app 폴더를 만들겠습니다. 해당 프로젝트 안에 client와 server두 폴더를 더 만듭니다. cd client npm create-react-app ./ 위 명령어를 terminal에 실행해 client폴더 안에 react를 설치합니다. 프로젝트 구조 참고해서 폴더과 파일들 미리 만듭니다. Summary 페이지 Form 구현하기 import React, { useState } from 'react' const SummaryPage = () => { const [checked, setChecked] = useState(false) return ( setChecked(e.target.checked)} />{" "} 주문하려는 것을 확인하셨나요.. Context React Context란? React에서 한 컴포넌트 안에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법은 여러 가지가 있습니다. react에서 데이터 흐름 컨트롤 하는 법(state관리하는 법) state와 props를 사용해서 컴포넌트 간에 전달 react context 사용 mobx 사용 redux를 사용 react context는 component 트리의 깊이에 관계없이 props를 전달하지 않고도 component에 데이터를 제공합니다. context는 전역 데이터를 관리하는 데 사용됩니다. ex) 전역 상태, 테마, 서비스, 사용자 설정 등... context는 모든 수준에서 수동으로 props를 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수.. useRef 타입스크립트 ① 매개 변수의 타입과 제네릭의 타입이 T로 일치 (current 프로퍼티 직접 변경 가능) function useRef(initialValue: T): MutableRefObject; ==> interface MutableRefObject { current: T; } 위의 경우, useRef의 타입과 initialValue(변수)의 타입이 일치합니다. 이런 경우 current property를 변경 가능합니다. const numberRef = useRef(3) 위 코드를 보겠습니다. 매개 변수가 3이며 useRef의 타입도 number로 지정했습니다. 둘이 일치해서 numberRef의 타입이 MutableRefObject로 반환합니다. ② 매개 변수의 타입이 null을 허용하는 경우 RefObject .. 타입스크립트로 변경하기(2) BaseStat.tsx 타입 변경 interface BaseStatProps { valueStat: number; nameState: string; type: string; } components폴더 안에 BaseStat.tsx에 타입을 명시합니다. 에러난 부분의 타입을 명시해주면 됩니다. Damage Relations 컴포넌트 타입 변경 import { DamageRelations as DamageRelationsProps } from '../types/DamageRelationOfPokemonTypes'; interface DamageModalProps { damages: DamageRelationsProps[]; setIsModalOpen: React.Dispatch } DamageModal.tsx.. 타입스크립트로 변경하기(1) typescript 설치 npm install -D typescript @types/react @types/react-dom 위 명령어대로 ts를 설치합니다. vite.config.js를 .ts로 변경합니다. 루트 경로에 tsconfig.json, tsconfig.node.json 파일을 생성하며, src폴더 안에 vite-env.d.ts파일을 생성합니다. 이거는 npm init vite를 하고 typescript를 선택하면 자동적으로 생성한 시스템파일입니다. 새로운 ts프로젝트를 생성 후, 가져와서 붙여넣기해도 좋습니다. type전환 방법 간단한 변수는 직접 작성해도 됩니다. 좀 길고 복잡한 데이터 같은 경우 console.log에서 JSON.stringify(type.data)를 해서 console에.. Styled Component Styled Component란? Styled Component란 Css-in-JS라고 하는 JS파일 안에서 CSS를 처리할 수 있게 해주는 대표적인 라이브러리입니다. Styled Component 문서 설치방법 npm install styled-components 위 코드를 통해 설치합니다. package.json파일에 위와 같이 추가합니다. 로그인 페이지 생성하기 경로 생성 및 NavBar 생성 Outlet 중첩 개념을 사용합니다. 위 코드는 App.jsx파일입니다. components폴더 안에 NavBar.jsx 파일 생성한 후, pages폴더 안에 LoginPage폴더 생성 후, index.jsx파일 생성합니다. 로그인 페이지 UI 생성하기 Pokemon 포켓몬 사이트에 오신걸 환영합니다. 로그인 해주세요 LoginPage폴더 안에 index.jsx내용입니다. NavBar 컴포넌트 UI 생성하기 const [show, setShow] = useState(false) const listener = () => { if(window.scrollY > 50) { setShow(true) }else { setShow(false) } } useEffect(() => { .. 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.. 이전 1 2 3 4 5 6 ··· 17 다음
