clone toy projects/react-firebase-shop-app 썸네일형 리스트형 리액트 쿼리 및 리팩토링 쿼리를 담당하는 custom hook 제작 및 적용 product에 적용 cart도 위와 같이 적용. 더보기 쇼핑카트 필요한 firebase를 사용한 함수 작성 context를 이용해서 사용자의 정보를 받아온 뒤 저장에 사용 저장이 잘 되는것을 확인 쇼핑카트 뱃지 보여주기 장바구니 상태 컴포넌트 생성 나의 장바구니 더보기 제품들 상세 페이지 . use navigate로 인자 받은거 기억 ! 더보기 제품들 보여주기 미리 여러 상품들 업로그 해놓기 ! UseQuery를 이용해서 firebase 데이터베이스에 있는 모든 정보를 가져온다. yarn add @tanstack/react-query 쿼리 우산 씌우기 Home with banner UI bg-banner는 tailwindcss에서 설정한 파일 더보기 새로운 제품 등록 기본적인 ui 기본적인 ui 완성 이후 firebase의 공식문서 사용해서 차근차근 진행 이미지 업로드 cloudinary의 Medial Library 에 들어가 보면 잘 저장된걸 확인 ! 새제품 등록 yarn add uuid 데이터 베이스에 저장된걸 확인 제품이 잘 동록됬는지 UI 로 확인시켜주기 더보기 어드민 사용자 [firebase Realtime Database] 콘솔에서 admin 권한을 부여하고싶은 사용자의 uid를 가져와 value로 넣기 firebase의 Realtime Database로 가서 아래와같이 저장 isAdmin 이 true로 나오는걸 확인 isAdmin인 경우에서 쓰기 아이콘이 보이도록 버튼 컴포넌트 만들어서 중복 없애기 경로 보호 사용자의 로그인 정보와 권한 정보가 다른 컴포넌트에 있으니 context로 가져와보자 context를 사용해서 로그인 및 권한 유무를 관리 더보기 로그인 [Firebase] 설정 모양 클릭 그리고 아래로 내리면 firebase를 사용해서 google 소셜 로그인을 하는 법이 나와있다. 환경 변수를 사용해서 셋업 이후 공식문서의 Web google 로그인 관련 자료를 찾아서 그대로 진행 그러면 login 버튼을 누르면 구글 쇼셜 로그인 화면이 뜬다. 개발자 도구의 쿠키를 보면 로그인한 정보도 확인할 수 있다. 또한 콘솔에도 사용자의 정보를 확인가능 로그아웃 로그 아웃 버튼을 누르면 로그인으로 잘 바뀐다. 하지만 새로고침을 하면 로그인이 풀린다. 그 이유로는 새로고침을하면 초기 const [user, setUser] = useState(); 로 설정한 null이 다시 오기 때문이다. ( 즉, 세션이담긴 쿠기를 사용하지않고 로직으로 작성한 state로 login을 구현해서 그렇다.. 더보기 아이콘 및 라우터 만들기 favicon 따오기 react icon에서 마음에 드는 아이콘 골라서 개발자 도구에서 svg 복사 ! 텍스트 파일에 svg 확장자로 저장 ico 를 다운 받고 그 파일을 favicon.ico으로 이름을 변경하고 public 폴더 밑에 넣어준다. 그리고 index.html에서 SEO를 위해 title도 변경해준다. React firebase shop 그러면 위와 같이 헤더의 title과 아이콘이 변경된걸 확인할 수 있다. 라우터 yarn add react-router-dom react-icons 기본적인 라우팅 큰틀 / 👉 /products 👉 /products/new 👉 /products/:id 👉 /carts 👉 페이지들 및 컴포넌트 생성 index.js 라우트 설정 Outlet 설정 react ic.. 더보기 이전 1 2 다음
