본문 바로가기

React/E-commers App27

의류 쇼핑몰 33 | Cart Icon | Dropdown Cart icon 설치하기 assets 폴더에 아이콘 svg를 입력한다. components에 cart-icon 폴더, 파일 만들기 cart-icon 내용을 채워준다. import { ReactComponent as ShoppingIcon } from '../../assets/shopping-bag.svg'; import './cart-icon.scss'; const CartIcon = () => { return ( 0 ) } export default CartIcon; cart-icon.scss .cart-icon-container { width: 45px; height: 45px; position: relative; display: flex; align-items: center; justify-con.. 2022. 7. 1.
의류 쇼핑몰 32 | product-card 만들기 shop 컴포넌트에서 따로 product-card를 만들어 보자. component에서 product-card.jsx, scss 파일 만들기 ProductCard 내용을 채운다. import './product-card.scss'; import Button from '../button/button' const ProductCard = ({ product }) => { const { name, price, imageUrl } = product; return ( {name} {price} ADD TO CARD ) } export default ProductCard; Shop에서 ProductCard 쓰기. import { useContext } from 'react'; import { ProductsCont.. 2022. 7. 1.
의류 쇼핑몰 31 | products.context.jsx 만들기 context 폴더에 products.context.jsx 파일을 만든다. products.context.jsx 파일 index.js에서 Provider로 감싸주기 shop 으로 가서 shop-data.json에서 바로 받아오던 것을 지우고 context로 받아와 본다. 데이터를 그대로 볼 수 있다. 2022. 7. 1.
의류 쇼핑몰 30 | shop-data.json src 폴더 안에 shop-data.json 파일을 만들고 내용을 넣었다. [ { "id": 1, "name": "Brown Brim", "imageUrl": "https://i.ibb.co/ZYW3VTp/brown-brim.png", "price": 25 }, { "id": 2, "name": "Blue Beanie", "imageUrl": "https://i.ibb.co/ypkgK0X/blue-beanie.png", "price": 18 }, { "id": 3, "name": "Brown Cowboy", "imageUrl": "https://i.ibb.co/QdJwgmp/brown-cowboy.png", "price": 35 }, { "id": 4, "name": "Grey Brim", "imageU.. 2022. 6. 30.
의류 쇼핑몰 28 | Auth Listener 하나의 listener 안에 authentication 관련 코드를 모아보자. 일단 이 전에 한 코드를 지워준다. sign-in-form에 있는 setCurrentUser를 지워준다. sign-up-form에서도 useContext 관련을 지운다. 이제 context value가 업데이트 될 때마다 계속 re-run 할 필요가 없어졌다. 자동으로 performance가 좋아졌다. navigation에서도 매뉴얼로 설정해 놓은 이제 sign out을 하면 onAuthStateChangeListener가 catch하기 때문에 signOutHandler 버튼이 필요가 없다. onClick 했을 때 signOutUser만 호출해주면 된다. 이제 context로 돌아와서 listner에서 sign-in 되면 se.. 2022. 6. 29.
의류 쇼핑몰 25 | Context 2 | context에 데이터 입력과 출력 context 파일 만들기 언제든 유저가 sign-up, sign-in 했을 때 들어온 user 데이터를 context에 담아야 한다. src 폴더에 context 폴더, 파일을 만든다. context를 만들기 위해 리액트에서 createContext 메소드를 불러온다. userContext의 이름으로 storage 역할을 하는 context를 만들어 export 한다. default value는 일단 null로 하고 뒤에서 자세히 보자. 이제 functional component 를 만든다. Provider component로 value를 쓰길 원하는 모든 컴포넌트를 감싸줘야 한다. 전달하고자 하.. 2022. 6. 18.
의류 쇼핑몰 24 | Context 1 | 쓰는 이유 sign-in 할 때 user object를 왜 킵해야 할까? profile 페이지에서 회원 정보 수정하거나 유저의 return 페이지나 history 페이지를 보려면 user object가 필요하다. 그럼 어떻게 sign-in, sign-up에 있는 user data를 떠서 다른 페이지에서 사용할 수 있을까? user data를 다른 컴포넌트에서 사용하는 방법은 2가지가 있다. 1. props drilling - 안씀 2. Context - 이 거씀 리액트 컴포넌트를 생각해 보자. 컴포넌트 트리에서 user data를 받는 페이지는 sign-in과 sign-up 페이지이다. 이 user data를 사용하는 페이지는 user profile, returns, history에서 user data가 필요하다.. 2022. 6. 18.
의류 쇼핑몰 23 | Authentication 끝 | 로그인시 에러처리 | Authentication Styles 에러 발생 1. Sign In 시 비밀번호가 틀리긴 경우 Sign In 시 비밀번호가 틀긴 경우에는 콘솔 error.code에서 auth/wrong-password 메세지가 뜬다. 그러면 error.code가 auth/wrong-password가 같은 아닌지에 따라 에러인지를 체크할 수 있다. 잘못된 비번을 입력하였더니 alert 창이 떴다. 2. 이메일이 없는 경우 회원가입이 안된 이메일을 입력한 경우 auth/user-not-found 에러가 뜬다. 3. switch / case로 간단히 적어주기 if/else if 로 쓰는 방법도 있지만 switch / case로 적어준다. break가 읽히면 그 뒤 코드를 보지 않고 나간다. 에러 코드 전체 리스트는 아직 구글에서 제공하고 있지 않고 있다. 구글 .. 2022. 6. 17.
의류 쇼핑몰 22 | 새 sign-in-form authentication 파일 만들기 이 전에 만들었던 sign-in 은 내용이 authentication에 더 가깝다. 폴더와 파일명을 바꿔준다. sign-in에서 Authentication으로 이름을 바꿔주었다. App.js에도 path, element 와 import 의 이름을 바꿔준다. navigation 파일에서도 내용을 바꿔준다 http://localhost:3001/auth 으로 route를 바꿔주면 이 전 모습 그대로 나오는 것을 볼 수 있다. 새 sign-in 파일 만들기 이제 sign-in 컴포넌트를 만들어보자. 1. sign-in-form 폴더와 파일을 만든다. 2. 모습은 sign-up-form과 상당히 유사하므로 이 sign-up-form 폴더와 파일을 복사해서 컴포넌트로 붙여넣.. 2022. 6. 17.
의류 쇼핑몰 21 | 버튼 컴포넌트, 스타일 버튼을 컴포넌트로 만들어 사용해 보자. component에 button 폴더와 파일을 만든다. button.jsx 파일 내용을 채운다. Button 탬플릿을 만들고 그 안에 세부적인 변경 사항은 children을 만들어 변경한다. 버튼 안에 children을 넣는다. 우리는 3 가지 버튼 타입이 필요하다. - default button - Inverted button - google sign in button 위 3 개의 버튼 타입 class를 만들어 오브젝트에 저장해준다. const BUTTON_TYPE_CLASS = { google: 'google-sign-in', inverted: 'inverted ' } BUTTON_TYPE_CLASS를 정하고 buttonType 클래스를 호출한다. buttonT.. 2022. 6. 17.
의류 쇼핑몰 20 | Input을 탬플릿으로 만들기 Sign-up-form 에 있는 input 부분을 따로 떼서 탬플릿으로 만들어 보자. components 폴더 안에 form-input 폴더와 jsx, scss 파일을 만든다. sign-up-form.jsx에서 첫 번째 input 세트를 form-input.jsx로 옮긴다. [방법 1 ] 기본 props 사용 form-input.jsx 로 내용을 붙여넣기 했다. input의 attribute를 일일이 적었다. sign-up-form 에서 FormInput 태그로 바꿨다. [방법 2] ...otherProps 사용 - 간단 ! sign-up-form 에서 FormInput 태그를 그대로 쓰고 input-form을 더 간단하게 만들 수 있다. label은 다른 태그라 따로 써주고, spread operato.. 2022. 6. 16.
의류 쇼핑몰 18 | Sign Up 1 | 이메일 sign-up-form 만들기 Email provider 추가 Firebase Authentication에 가서 Email provider를 추가한다. Email/Password 를 Enable로 체크해준다. sign-up-form 만들기 sign-up-form 폴더와 파일을 만들어 준다. components 폴더 안에 sign-up-form 폴더와 파일을 만든다. 다음과 같이 sign-up-form.jsx에서 보일러 플레이트를 만든다. 이 sign-up-form을 sign-in에서 import하여 같은 페이지에서 보이도록 한다. sign-in 과 sign-up이 같은 페이지에 있다. 이제는 sign-up 내용을 채운다. form 태그를 써서 4개의 input을 받을 것이다. required는 빈 칸으로 남겨 놓으면 안되고 꼭 내용을.. 2022. 6. 11.
의류 쇼핑몰 17 | Redirect 구글 로그인 앞에서 연습으로 만들어본 users collection을 지운다. collection을 없앤 상태에서 Authentication에서 user도 지워서 초기화된 상태에서 구글 사인인을 redirect로 연결해보자. SignInWithRedirect 연결하기 이 전까지는 popup으로 로그인 페이지가 나왔었는데, 이제는 redirect로 새 페이지가 열리며 로그인 페이지가 나오도록 해보자. provider는 정확히는 google provider 이기 때문에 googleProvider로 바꿔주자. 이제는 sign-in 페이지로 가서 SignInWithGoogleRedirect을 import 한 후 Sign-in component로 가서 Sign in with Google Redirect 버튼을 새로 만든다. .. 2022. 6. 11.
의류 쇼핑몰 15 | 구글 계정으로 로그인 | Authentication with Firebase Firebase api와 내 웹이 교류하여 구글 계정으로 로그인을 해보자. 구글 로그인 버튼 만들기 일단은 routes 폴더에 sign-in.jsx 을 파일을 만든다. 구글 로그인 버튼을 추가하였다. 만든 화면은 다음과 같다. 이제는 Google Sign In 버튼을 눌렀을 때 구글 api가 연결되어 구글 로그인 페이지가 뜨도록 해보자. 1. firebase 와 내 웹 연결하기 1. firebase에서 내 웹 instance 만들기 firebase와 내 웹을 연결해야 한다. firebase에서 config를 받아와 내 웹 코드에 붙이면 된다. 1. 내 app 등록을 한다. 구글 firebase 프로젝트 안으로 들어가서 버튼을 누른다. 원하는 이름을 입력하고 Register app 버튼을 누른다. Host.. 2022. 6. 6.
의류 쇼핑몰 14 | Authentication Flow | UI - Google -Firebase Firebase는 email과 password authentication도 제공하지만 Google sign-in authentication도 제공한다. UI와 서버의 관계는 다음과 같다. 웹사이트에서 이메일과 비번을 새로 등록해 회원가입을 하지 않고 사용 중인 지메일로 로그인을 하는 것이다. 보통 서버와 UI의 관계는 이러하다. 한 유저가 로그인을 했을 때 그 유저의 개인 정보, 카드 정보가 든 data를 서버에서 주게되는데 그 유저가 맞는지 확인하는 절차가 아주 중요하다. 그래서 Authentication이 중요하다. 이미 가지고 있는 구글 이메일로 어떻게 Authentication이 되는지 살펴보자. 구글 로그인으로 웹사이트에서 로그인 하면 구글 서버에서 자체 Authentication을 돌려서 본인.. 2022. 6. 6.
의류 쇼핑몰 13 | sign-in 페이지 만들기 1. sign-in 파일 만들기 router 폴더 안에 sign-in 폴더와 파일을 만든다. sign-in.jsx 에 보일러 플레이트로 만들어 준다. 2. path 설정 App.js에 가서 Route path를 설정해준다. 3. link 걸기 이제 navigation.jsx로 가서 Link를 걸어주어야 한다. 결과 보기 sign in 버튼을 클릭했을 때 해당 페이지로 잘 가는 것을 볼 수 있다. 2022. 6. 6.
의류 쇼핑몰 12 | Firebase 시작 | Firebase에 로그인을 하면 현재 사용하고 있는 프로젝트들이 나온다. + 버튼을 눌러 이름을 입력하고 새로운 프로젝트를 생성한다. Google Analytics는 지금 프로젝트에서 필요없으니 disable 해놓는다 다 되었다. build 메뉴 안 Authentication과 Firestore Database 이 2가지를 집중해서 사용하게 될 것이다. 다음은 로그인시 구글로 연결이 되도록 해보자. 2022. 6. 6.
의류 쇼핑몰 11 | Routing 5 | Logo Styles 진짜 Logo 로 바꿔보자. assets 폴더를 만들고, 폴더 안으로 이미지를 드래그 드랍해서 폴더 안으로 넣는다. svg 이미지를 누르면 html 로 되어 있는데, 화면 사이즈에 상관없이 항상 이미지의 깔끔한 라인을 유지한다. 이미지를 Navigation으로 import 해온다. 이미지가 생겼다. 이미지를 클릭하면 home으로 간다. index.scss에 전체적에 적용시킬 내용을 적어준다. 태그는 색과 밑줄이 있는 것이 기본형이다. 밑줄을 없애고, 검은색 글자로 바꿔야 한다. 색상이 바뀌었다. 또 box-sizing을 border-box로 설정해준다. navigation.scss .logo { width: 60px; } .navigation { height: 70px; width: 100%; displ.. 2022. 6. 6.
의류 쇼핑몰 9 | Routing 3 | Navigation Bar | index 지금은 한 페이지에 모든 내용이 나오고 있다. Navigation Bar 를 이용해서 한 페이지에 해당 내용만 나오게 해보자. App.js에 Navigation component를 만들어 준다. Navigation을 가장 부모 태그로 만들고 path는 / 로 지정해준다. Navigation component에 Outlet로 자식 태그의 위치를 지정해 준다. 일단 Outlet을 import한 후 Outlet을 h1 아래에 위치시킨다. 안의 path도 일단 home과 shop으로 이름을 바꿔주고, 서로 silbling으로 만들어 준다. localhost:3000/ 로 가니 Navigation component가 나오고 localhost:3000/home 로 가니 부모 Navigation과 home이 같이 나.. 2022. 6. 5.
의류 쇼핑몰 8 | Routing 2 | Outlet | Nested Route App.js에서 Route를 Shop으로도 연결되도록 해보자. 일단 간단하게 Shop component를 만들고 Route를 설정해 준다. 주소창에 localhost:3000/shop을 넣으면 Shop component에 입력한 내용이 나온다. Nested Route Home Route 안에 Shop Route를 넣어 nested Route로 바꿔준다. 예를 들어 home 안에 shop(/없음)이 들어가면 url 주소는 localhost:3000/home/shop 이렇게 되어야 해당 페이지로 갈 수 있다. 하지만 home component가 나오고 shop페이지는 나오지 않는다. nested route에서 parent component는 없어지지 않고 그대로 있는다. 또 자식인 shop component.. 2022. 6. 5.
의류 쇼핑몰 7 | Routing 1 시작 Routing 란? https://www.crown-clothing.com 웹사이트에서 navigation bars 또는 side panel을 만들어 어떤 페이지를 렌더할 지 정한다. 바에 있는 버튼을 누르면 https://www.crown-clothing.com/route-1 route 1을 적어주면 그에 해당하는 컴포넌트들이 보이게 한다. 항상 있는 컴포넌트들 중에 어떤 컴포넌드를 렌더해 페이지에 보이게 할 지 정하는 일을 routing이라고 한다. sub-route도 가능 route 안에 sub-route로 또 연결을 해야 할 수 있다. 라우팅 라이브러리 routing에서 2 개의 유명한 라이브러리가 있다. 1. React Router 2. Reach Router 이 둘 중에 React Route.. 2022. 6. 4.

티스토리툴바