뉴히의 개발 로그

웹서비스를 만들때 종종 gif와 같은 움직이는 애니메이션을 넣고싶을때가 많다! 이때 간단한 애니메이션인데 전부 gif로 넣게되면 용량도 크고 퍼포먼스도 저하시키는 문제들이 생긴다. lottie는 이러한문제를 해결하면서 웹서비스를 예쁘게 꾸며줄수 있는 애니메이션을 사용할수있게 해준다!! Lottie란?Lottie는 After Effects 애니메이션을 JSON 파일로 변환해 웹/앱에서 가볍게 사용할 수 있도록 해주는 라이브러리이다.React에서도 쉽게 사용할 수 있다!! Lottie의 장점🎥 고퀄리티 애니메이션을 가벼운 JSON 파일로 제공해서 퍼포먼스에 부담이 적음🛠️ 코드로 세밀한 제어가 가능 (루프, 속도 조절, 특정 타이밍 이벤트 등)📱 반응형, 모바일 최적화도 편리하게 적용 가능🎨 Afte..

1. CRAnpx create-reat-app [프로젝트명]npx create-react-app [프로젝트명] --template typescript2. Vitenpm create vite@latest [프로젝트 명] npm create vite@latest [프로젝트 명] --template react-ts프로젝트 주요 파일과 폴더 구조public/: 정적 파일(HTML, 이미지 등)을 저장하는 폴더.src/: React 컴포넌트와 JavaScript 파일을 저장하는 폴더.package.json: 프로젝트의 메타데이터와 의존성을 관리하는 파일.├── public├── src│ ├── @types # 전역타입 정의│ ├── assets # 정적 자..

React-router-dom -> React Router v7React 프로젝트에서 라우팅을 쓸 때, react-router-dom을 당연하게 깔고 시작했었다., , 등 DOM 전용 라우팅 컴포넌트가 이미 준비되어 있다.뒤로가기 버튼이나 페이지 전환 시 전체 리프레시가 없으니 SPA스럽게 딱 좋다.위 두개의 이유만으로도 리액트로 SPA 웹사이트를 만드려면 React-Router-Dom 을 냅다 설치해왔던 것이다.💪 강해진 코어 의존성기존에는 아래와 같이 Link 태그를 불러와서 SPA 라우팅을 시켜주려면 당연히 너무나도 당연히 react-router-dom 에서 불러왔을 것이다.하지만 이제는 세상이 바뀌었다. 이제는 Link 태그를 포함 그동안 react-router-dom 에서 제공해주던 태그 및..