쇼핑몰 프로젝트 02 프로젝트 설정 순서

git에 놀러오세용
🥳 WITHWITH shoppingmall project

라우터 설정하기
✅ 라우터

테일윈드 설정
✅ tailwind

---

firebase 설정
✅ fire base docs
** 개인정보는 .env에 꼭 저장해서 process.env.로 불러오기

1. 로그인/로그아웃 구현
   ✅ signInWithPopup

--

2. 로그인 유지하기
   😫 onAuthStateChanged

Set an authentication state observer and get user data

For each of your app's pages that need information about the signed-in user, attach an observer to the global authentication object. This observer gets called whenever the user's sign-in state changes.

Attach the observer using the onAuthStateChanged method. When a user successfully signs in, you can get information about the user in the observer.

유저가 성공적으로 사인인 했다면 옵저버를 통해 유저의 정보를 얻을 수 있다.
useEffectd로 onAuthStateCahgned를 설정해서 새로고침해도 옵저버가 유저 상태 유지하게 할 수 있도록 한다.

hint / callback

--

3. 어드민 페이지 구현
   ✅ Read and Write Data

• 계획 : firebase에 admin 설정하고 불러오기
  

🍯 어드민 키는 user를 콘솔에 찍었을 때 나오는 Uid로 설정!

firebase의 val()

✅ firebase / val() method
You can extract the contents of the snapshot as a JavaScript object by calling the val() method.
val()를 통해 스탭샷의 콘텐츠를 자바스크립트 오브젝트로 뽑아낼 수 있다.

--

4. context로 user정보 전역에 공유

기본 구성 요소

• NameContext = createContext() => 콘텍스트 생성
• NameContextProvider => 공유하고 싶은 내용 적기
• useNameContext => 필요한 곳에서 부를 수 있는 함수 호출 커스텀

//AuthContext.js//

import { createContext, useContext } from "react";

const AuthContext = createContext();
export function AuthContextProvider({ children }) {
  return (
    <AuthContext.Provider
      value={전역에 공유하고싶은 싶은 value}
    >
      {children}
    </AuthContext.Provider>
  );
}
export function useAuthContext() {
  return useContext(AuthContext);
}

내용 공유가 필요한 곳에 provider씌우기

//App.js//

<HeaderSection/>
<AuthContextProvider value={value}>
  <MainSection/>
</AuthContextProvider>

--

5. 라우터로 경로보호
   ✅ Navigate

🍯 replace 설정으로 admin이 아닌 사용자 히스토리에 기록 남기지 않게 하기
🍯 state설정으로 정보 넘기기 (필요한 곳에서 location()으로 정보 받기)

6. 상품 수정 페이지 설정
   ✅ input 입력요소 / MDN
   ✅ input type="file" / MDN
   ✅ URL.createObjectURL() / MDN
   ✅ 웹 어플리케이션에서 파일 사용하기 ✨

7. 상품 정보 저장
   ✅ cloudinary
   ✅ firebase setting

8. 상품 보여주기
   ✅ TanStack - useQuery

   hint / Object.values()