리액트 시작하기

핵심은 디자인 참고 자료를 먼저 모으고 → 스타일 방향을 잡고 → Tailwind나 UI 프레임워크로 구현하는 흐름입니다.

■ CSS / UI 프레임워크

Tailwind CSS 외에도 다른 CSS 프레임워크를 추가 설치해서 사용할 수 있다.

예시:
- Bootstrap
- MUI
- Chakra UI
- Ant Design
- DaisyUI
- Styled Components

------------------------------------------------

■ 아이콘 라이브러리

Lucide React 설치 명령어

npm add lucide-react

사용 예시

import { Search, Heart, Menu } from "lucide-react";

function IconEX() {
return (
<div>
<Search />
<Heart />
<Menu />
</div>
);
}

export default IconEX;

------------------------------------------------

■ 스타일 자산 만들기

디자인 작업 전에 참고 이미지를 수집해서 스타일 방향을 정한다.

참고 사이트:
Pinterest

검색 예시:
music ui
golf website ui
mobile app ui
dashboard ui
landing page design

------------------------------------------------

■ Pinterest 검색 링크

https://kr.pinterest.com/search/pins/?q=music%20ui&rs=typed