아이콘 및 라우터 만들기

favicon 따오기

react icon에서 마음에 드는 아이콘 골라서 개발자 도구에서 svg 복사 !

<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1" viewBox="0 0 48 48" enable-background="new 0 0 48 48" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="19" fill="#CFD8DC" width="38" height="19"></rect><rect x="5" y="38" fill="#B0BEC5" width="38" height="4"></rect><rect x="27" y="24" fill="#455A64" width="12" height="18"></rect><rect x="9" y="24" fill="#E3F2FD" width="14" height="11"></rect><rect x="10" y="25" fill="#1E88E5" width="12" height="9"></rect><path fill="#90A4AE" d="M36.5,33.5c-0.3,0-0.5,0.2-0.5,0.5v2c0,0.3,0.2,0.5,0.5,0.5S37,36.3,37,36v-2C37,33.7,36.8,33.5,36.5,33.5z"></path><g fill="#558B2F"><circle cx="24" cy="19" r="3"></circle><circle cx="36" cy="19" r="3"></circle><circle cx="12" cy="19" r="3"></circle></g><path fill="#7CB342" d="M40,6H8C6.9,6,6,6.9,6,8v3h36V8C42,6.9,41.1,6,40,6z"></path><rect x="21" y="11" fill="#7CB342" width="6" height="8"></rect><polygon fill="#7CB342" points="37,11 32,11 33,19 39,19"></polygon><polygon fill="#7CB342" points="11,11 16,11 15,19 9,19"></polygon><g fill="#FFA000"><circle cx="30" cy="19" r="3"></circle><path d="M45,19c0,1.7-1.3,3-3,3s-3-1.3-3-3s1.3-3,3-3L45,19z"></path><circle cx="18" cy="19" r="3"></circle><path d="M3,19c0,1.7,1.3,3,3,3s3-1.3,3-3s-1.3-3-3-3L3,19z"></path></g><g fill="#FFC107"><polygon points="32,11 27,11 27,19 33,19"></polygon><polygon points="42,11 37,11 39,19 45,19"></polygon><polygon points="16,11 21,11 21,19 15,19"></polygon><polygon points="6,11 11,11 9,19 3,19"></polygon></g></svg>

텍스트 파일에 svg 확장자로 저장

ico 를 다운 받고 그 파일을 favicon.ico으로 이름을 변경하고 public 폴더 밑에 넣어준다.

그리고 index.html에서 SEO를 위해 title도 변경해준다.

<title>React firebase shop</title>

 

그러면 위와 같이 헤더의 title과 아이콘이 변경된걸 확인할 수 있다.

 

 

라우터 

yarn add react-router-dom react-icons

 

기본적인 라우팅 큰틀

<App>

/ 👉 <Home>

/products 👉 <AllProducts>

/products/new 👉 <NewProduct>

/products/:id 👉 <ProductDetail>

/carts 👉 <MyCart>

 

페이지들 및 컴포넌트 생성

 

index.js 라우트 설정 

Outlet 설정

react icon 을 사용해서 navbar 큰틀

 

 

yarn add -D tailwindcss

npx tailwindcss init

tailwindcss 설정 및 옵션 추가

전체 최대, 정렬   css