728x90 반응형 리액트26 [TIL] 11/8 React.ts 살펴보기 1. 리액트 프로젝트 생성: CRA vs ViteCRA 는 초기설정과 구성을 자동화해서 개발자가 빠르게 리액트 앱을 생성할 수 있도록 도와준다. 웹팩과 바벨을 사용해서 개발 서버를 실행하고 HMR(Hot Mode Reloading)을 제공해준다. 웹팩을 통해 빌드시 코드를 컴파일하고 압축하는 역할도 해준다. (가장 대중적으로 많이 쓰임)+ 환경변수: process.env.KEY Vite 는 빠른 속도와 효율로 최근에 많이 주목 받고 있다. 웹팩 대신 롤업을 사용해서 빌드하는데, 웹팩에 비해 속도가 크게 개선된 버전이다. 또 HMR 에서 굉장히 빠른 속도를 자랑한다. CRA 는 HMR 을 할 때 소스 전체를 빌드하지만 Vite 는 모듈 단위로 빌드해서 브라우저에 제공하기 때문에 CRA 보다 속도가 빠르다... 2024. 11. 8. [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. [React] Redux 사용하기 (feat. TypeScript) 1. redux 1.1. 리덕스란?단일 저장소(store): 리덕스는 하나의 중앙 저장소를 통해 애플리케이션의 상태를 관리 -> 상태의 일관성을 유지하고 디버깅이 쉬움불변성(Immutability): 리덕스는 상태를 직접 변경하는 것을 금지하고, 상태가 갱신될 때는 새로운 객체를 반환 -> 직접 상태를 변경하는 것이 아니기 때문에 예측 가능성을 높이고 상태 관리의 안정성을 제공액션(Actions) & 리듀서(Reducers): 상태를 변경할 때는 액션 객체를 디스패치하고, 리듀서는 이 액션에 따라 새로운 상태를 반환 -> 이를 통해 상태 변경 로직이 예측 가능하고 테스트하기 쉬움 - 리액트에서는 이미 state 랑 props 로 상태 관리 잘하고 있는데 (feat. 리덕스를 쓰는 이유)? 리액트에서 데이.. 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. 이전 1 2 3 4 5 ··· 7 다음 728x90 반응형
