clone toy projects 썸네일형 리스트형 새로운 제품 등록 기본적인 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.. 더보기 Cloudinary 셋업 pricing 클릭 해 보면 free로 사용하더라도 정말 대규모의 프로젝트 아니면 무난히 돌아가는 것을 확인 구글 계정으로 회원가입. 설정으로 들어오면 뮤료 계정인것과 사용 횟수 제한에 대해서도 확인가능 upload로 들어가서 이미지를 컨트롤 할 때마다 Cloudinary에 로그인 안하도록 설정 (보안을 위해 preset을 사용해야한다.) 하지만 unsigned 할때는 왼쪽에 파란색의 모자이크 처리된 key를 사용해야한다. 또한 Add upload preset을 클릭하면 이미지를 업로드 할 때마다 어떤 trasformaion을 줄지 설정할 수 있다. 좌측과 같이 4종류의 관련 목록이 있다. Add Eager transformation 클릭 위와 같이 이미지의 크기 및 필터를 적용 docs으로 와서 Med.. 더보기 Firebase 셋업 기본적으로 빌드, 배포, 모니터링, 배포스 사용자들의 정보 통계를 활용 가능. docs 로 들어가서 firebase fundamentals클릭하면 좌측에 기본적인 사용법이 나와있다. (엄청 양이 많으니 필요한걸 찾아서 공부하는게 좋다) 기본적으로 사용할 꺼냐 물어보는걸 다 체크 해서 생성. 위와같이 프로젝트가 만들어진걸 확인 프로젝트로 들어가서 사용할 기능 중 하나인 Authentication 선택 다양한 방식의 로그인을 지원한다. 구글을 선택해보자. 그리고 저장 그러면 아래와 같이 왼쪽 사이드바에 Authentication이 추가 된걸 확인할 수 있다. 그리고 사이드바를 더 내려보면 Realtime Database로 들어 가기 데이터 베이스 만들기 클릭 후 나의 장소에서 가장 가까운 나라를 선택해서 셋.. 더보기 상품 디테일 페이지 상품 디테일 페이지 생성하기 UI 완성본 npm install react-image-gallery --save 상세페이지 UI 및 백엔드에서 해당 데이터 가져오기 reactGallery을 사용해서 사진 UI 띄우기 Product Info 컴포넌트 생성하기 productinfo 페이지 컴포넌트 유저관련 데이터는 redux로 상태관리를 하고 있다. 그래서 dispatch를 사용해서 thunk함수를 만들어 갯수에 대한데이터를 받아온다. 카트에 상품이 있던건지 새로 장바구니에 넣은것 인지 확인하고 카트의 객체를 반환한다. 쇼핑 카트 페이지 데이터 가져오기 위와같은 구조를 만들기 위해 쿼리의 키와 벨류를 추가하여 데이터 베이스에 있는 상품들 정보 가져오기 아래와 같이 분기 처리 추가 if (type === "ar.. 더보기 랜딩 페이지 랜딩 페이지 생성하기 완성본 예시 기본적인 UI 완성 state 생성 몽고 DB에 저장되 있는 데이터들 가져오기 ( 아직 백엔드 라우트 안만듬) 상품 데이터 가져오는 Route 생성하기 product 콜렉션에는 writer 에 유저의 id가 있다. populate를 쓰면 그 해당 유저의 모든 정보(객체)를 가져 올 수 있다. 브라우저 새로고침을 하고 개발자 도구의 네트워크를 보니 proudct 콜렉션 의 속성으로 writer가 속성으로 있고 그 writer안에 해당 user id 를 가진 user 콜렉션 정보가 있는것을 확인 가져올 상품 카드의 예시 기본 UI 틀 완성 npm install eact-responsive-carousel 더 보기 기능 생성하기 더보기 버튼 만들기 이전에 더 많은 상품들 넣기.. 더보기 이전 1 ··· 4 5 6 7 8 다음
