728x90 반응형 KDT59 [TIL] 11/7 프론트엔드 심화4 - React Beautiful Dnd, firebase 로그인 구현, 배포하기 1. React Beautiful Dnd 2. 로그인 구현하기 2.1. firebase 연결하기 파이어베이스 설치npm i firebase /src/firebase.ts 에 붙여 넣어주기 (사실 더 자세한 건 파이어베이스 홈페이지에서 웹 만들면서 직접 참고하기)// Import the functions you need from the SDKs you needimport { initializeApp } from "firebase/app";// TODO: Add SDKs for Firebase products that you want to use// https://firebase.google.com/docs/web/setup#available-libraries// Your web app's Firebase.. 2024. 11. 7. [TIL] 11/5 프론트엔드 심화2 - 몰랐던 부분 정리 1. useState 상태 변경 함수의 타입 정의 isFormOpen, setIsFormOpen 을 props 를 이용해 다른 컴포넌트로 보내어 사용해야 하는 상황에서는 props 의 타입을 정해줘야 한다. const [isFormOpen, setIsFormOpen] = useState(false);import React, { FC } from 'react'import { FiPlusCircle } from 'react-icons/fi'type TFormProps = { isFormOpen: boolean, setIsFormOpen: React.Dispatch>}const SideForm: FC = ({isFormOpen, setIsFormOpen}) => { return ( /.. 2024. 11. 5. [TIL] 11/4 프론트엔드 심화1 - 모르는거 정리 리액트 리덕스 정리본 상태의 일관성을 유지하고 디버깅이 쉬움불변성(Immutability): 리덕스는 상태를 직접 " data-og-host="everydayc0ding.tistory.com" data-og-source-url="https://everydayc0ding.tistory.com/entry/React-Redux-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-feat-TypeScript" data-og-url="https://everydayc0ding.tistory.com/entry/React-Redux-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-feat-TypeScript" data-og-image="https://scrap.kakaocdn.net/d.. 2024. 11. 4. [TIL] 11/1 props, 모달창 만들기 1. props일반 함수의 매개변수와 비슷하다고 생각하면 된다. props 는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘길 때 사용한다. (역방향, 자식 -> 부모로는 불가능) 1.1. 함수형 컴포넌트에서 props 사용하기 부모 컴포넌트에서 "맑음" 을 넘겨주면 자식 컴포넌트에서 받아서 사용할 수 있다. 타입스크립트는 타입이 존재하기 때문에 자바스크립트와는 다르게 props 의 타입을 지정해줘야 한다. // App.tsx -> 부모 컴포넌트function App() { return ( );}export default App;// MyWeather.tsx -> 자식 컴포넌트interface MyProps { weather: string; children: Re.. 2024. 11. 1. 이전 1 2 3 4 5 ··· 15 다음 728x90 반응형
