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

<알고리즘 단계>

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

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

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

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

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

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

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

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

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

<페이지를 먼저 만들어보자>

src 폴더 안에 새로운 page라는 폴더를 만들어준다. 모든 웹페이지가 여기에 들어있게된다.

파일 ProductAll.js = 전체 상품 페이지

 

엔터를 치면...

1

이런 구성이 나온다.

 

 

필요한 페이지가 하나 더있다!

바로 로그인 페이지~

 

 

마지막으로 필요한 페이지는?

상품 상세(디테일) 페이지!!

 

 

 

<전체>

 

(3 페이지 모두 자동으로 import 된다!)

 

" / = 홈페이지 기본 path" 에서는 ProductAll 페이지를 보여주겠다. 

 

로그인 => Login 페이지를 보여주겠다!

 

상품 상세 페이지는 디테일한... 내가 선택한 그 id를 알아야 하는 디테일한 페이지는 주소를 이런식으로...

/product/:id  = product에 있는 id값을 넘겨주면 내가 이걸 가지고 어떤 product를 들고오고 싶은지 딱 캐치를 하는것!

=> Restful Route의 규칙을 따라서 만듬 (name을 지어봤다.)