4. 쇼핑몰 웹사이트 만들기 (3)

<알고리즘 단계>

//1. 전체 상품 페이지, 로그인 페이지, 상품상세 페이지 - 3개의 페이지 (가 필요) - 완료!!!-

//1-1. 네비게이션 바 (만들기.생성) !!!

//2. 전체 상품 페이지에서는 전체 상품을 볼 수 있다.

//3. 로그인 버튼을 누르면 로그인 페이지가 나온다.

//4. 상품 디테일을 눌렀으나, 로그인이 안되어있을 경우에는 로그인 페이지가 먼저 나온다.

//5. 로그인이 되어있을 경우에는, 상품 디테일(상세) 페이지를 볼 수 있다.

//6. 로그아웃 버튼을 클릭하면 로그아웃이 된다.

//7. 로그아웃이 되면 상품 디테일(상세) 페이지를 볼 수 없고 다시 로그인 페이지가 보인다.

//8. 로그인을 하면 로그아웃이 보이고 로그아웃을 하면 로그인이 보인다.(상단 오른쪽)

//9. 상품을 검색할 수 있다.

 

잠깐!!

//2. 전체 상품 페이지에서는 전체 상품을 볼 수 있다." 들어가기 전에...

//1-1. 네비게이션 바 만들기!!(생성하기!!)

 

<Navbar>는 어떤 페이지에 가도 상단에 고정되어 있다! 

 

<Navbar>라는 컴포넌트, 즉 공통적으로 들어가는 것들은 <Routes> 밖에서 만들어주기!

<Routes>에 있는 내용은 바뀌지만 위의 <Navbar>은 바뀌지 않는다.

<Navbar>=Navigation Bar는 그대로 있을 예정,상단에 고정될 예정이고, 그 안에 있는 내용만 <Routes>에 의해서 바뀔 예정!

 

이제 Navigation Bar을 만들어보자!!

 

Navigation Bar는 페이지가 아니다. 하나의 일부분, 그것은 컴포넌트로 정의한다

 

<아이콘>

 

https://docs.fontawesome.com/web/use-with/react/

Set Up with React | Font Awesome Docs

 

 

 

3개를 설치해준다.

faCoffee라는 아이콘을 불러오겠다~

 

 

속이 너무 까맣다.

 

 

주의!!

fontawesome(X)

fo"r"tawesome(O)