나디아 성장 일기

📌 Tailwind CSS : 유틸리티 기반의 CSS 프레임워크 미리 정의된 클래스를 활용해 빠르고 쉽게 스타일링할 수 있다. tailwindcss가 정해놓은 클래스 이름을 가져다가 쓰면 되기 때문에 네이밍에 대한 고민을 하지 않아도 된다. 컴포넌트마다 CSS 파일을 생성하지 않아도 된다.   ⏩ 설치 크로스 브라우징을 대응 해주는 postcss autoprefixer를 함께 설치 npm install -D tailwindcss postcss autoprefixer Tailwind CSS 패키지를 함께 설치할 경우https://tailwindcss.com/docs/guides/vitepnpm add postcss autoprefixer tailwindcss postcss-import -D   ✅ 사용 ..

📌 react-hot-toast: React에서 사용하는 토스트 메시지 라이브러리  react-hot-toast - The Best React Notifications in Town - react-hot-toastAdd beautiful notifications to your React app with react-hot-toast. Lightweight. Smoking hot by default.react-hot-toast.com   ✨ 토스트 메시지(Toast Message): 사용자에게 간단한 정보를 잠깐 보여주는 UI 요소토스트처럼 화면의 특정 위치에서 떠오르고, 일정 시간이 지나면 자동으로 사라진다. 보통 정보나 작업 결과를 사용자에게 간단하게 알려줄 때 사용한다.    ⏩ 설치pnpm add ..

📌 useReducer(): 복잡한 상태(state) 로직을 처리하는 상태 관리 훅 useState와 유사하지만, 상태(state) 업데이트 로직을 더 명확하게 분리하고 다양한 상태(state) 변화를 처리한다. 현재 상태와 액션을 받아 새로운 상태를 반환하는 리듀서 함수를 사용한다.➡︎ 상태 변화는 액션에 의해 일어나며, 이 액션은 리듀서 함수에 전달된다. useReducer에서 사용하는 리듀서 함수는 순수해야 한다. ➡︎ 사이드 이펙트 코드가 들어가면 안된다. 사용상태(state) 변화가 복잡하고, 여러 가지 액션에 따라 다양한 상태 변경이 필요할 때상태(state)와 관련된 로직을 분리하여 관리하고 싶을 때리덕스(Redux)와 같은 상태 관리 패턴을 작은 컴포넌트 내에서 구현하고 싶을 때  ⏩ ..