728x90 반응형 타입스크립트13 [TIL] 11/12 styled-components 모르는 것 정리 1. styled-components 모르는 것 정리 1.1. styled-components 의 중첩 스타일링 스타일링 컴포넌트를 작성할 때 이렇게 중첩으로 스타일링을 작성할 수 있다는 것을 알게 되었다. 컴포넌트 구조와 스타일이 일치하기 때문에 어떤 태그(클래스)에 어떤 스타일링이 적용되었는지 쉽게 알아볼 수 있다. const HeaderStyled = styled.header` .logo { img { width: 250px; } margin: -15px; }`; - 중첩 스타일의 동작 방식 styled-components 는 내부적으로 CSS 클래스를 생성할 때 중첩된 스타일을 컴파일한다. 위의 코드를 컴파일하면 아래와 같이 앞에 유니크한 클래스 이름이 붙어서 생성되.. 2024. 11. 12. [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. 이전 1 2 3 4 다음 728x90 반응형
