본문 바로가기

React96

의류 쇼핑몰 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.
React and ReactDOM | HTML안에 리액트 코드 바로 작성해보기 pure react pure-react 폴더를 만들고 그 안에 index.html을 만든다. vs code에서 열어보자. html 파일에서 html을 치면 html:5가 뜬다. html:5를 눌러 보일러 플레이트를 완성한다. div 태그에 id를 root으로 하고 React is NOT rendered 문구를 넣는다 터미널로 html 을 열어보면 html이 브라우저가 열린다. 여기서 React와 ReactDOM 라이브러리를 불러온다. React Library는 엔진이다. 무엇을 렌더링하고 어떻게 렌더링 할 것인지 결정한다 ReactDOM도 우리가 무엇을 렌더하려고 하는지 정한다. React는 ReactDOM을 써서 브라우저에 React Native면 Native element를 써서 폰에 React VR.. 2022. 6. 1.
React v18: Strict Mode | render 4번 되는 이유 | StrictMode Changes Index.js를 보면 strict mode가 생긴 것을 볼 수 있다. 는 이제 곧 deprecated 되거나 이미 deprecated 된 메소드를 찾아서 콘솔 로그에 warning을 준다. 그래서 이제는 render가 더 늘어나는 이유 예를 들어 input에 타이핑을 했을 때 render가 기본으로 2번 된다. 하지만 strictMode가 적용되면 문제가 있나 잡아내는 과정을 한 번 더 하기에 render가 4번씩 된다. 좀 더 보기 편하게 chrome extension으로 React Developer Tools를 연결한 후 콘솔을 확인하면 render가 4 번 된 것을 알 수 있다. 1, 3번 째는 App.js에서 된 것이고 2, 4번 째는.. 2022. 5. 31.
Monsters-Rolodex 2-4 | destructuring | 끝 props 자리에 바로 destructring할 수 있다. card-list.jsx 파일 props를 생략하고 바로 filteredMonsters만 보이게 할 것이다. 자바스크립트 { } 를 써서 filteredMonsters를 argument 자리에 바로 넣어준다. return도 삭제한다. import Card from '../card/card'; import './card-list.css'; const CardList = ({ filteredMonsters }) => {filteredMonsters.map((monster) => { return ( ) })} export default CardList; search-box.jsx 정리 import './search-box.css'; const Sear.. 2022. 5. 31.
Monsters-Rolodex 2-3 | useEffect | Fetch API 외부 API에서 몬스터 이름을 불러와 useState를 사용해 array 안에 담는 작업을 해보자. 외부 API를 불러오기 위해 fetch 함수를 이용해 데이터를 불러온다. 아래 처럼 fetch 함수를 바로 사용해서 데이터를 불러오면 문제가 발생한다. render가 얼마나 일어나고 있는지 콘솔로그로 확인하면 render가 끝없이 일어나는 것을 볼 수 있다. 이유는 fetch로 외부의 데이터를 불러오는데 매번 불러올 때마다 리액트는 렌더를 다시 한다. 그 때마다 데이터를 새로 저장하여 가리킨다. 이미 똑같은 데이터가 있다하더라도 같은 메모리로 보지 않는다. 값이 같은 게 중요한 게 아니라 같은 곳을 포인팅하고 있어야 하는데 그렇지 않다는 것이다. 더 문제는 fetch 함수 자체만 따로 isolate해서 렌.. 2022. 5. 29.
Monsters-Rolodex 2-2 | useState 설치 useState를 사용하여 input에 입력한 내용이 setState에서 받도록 해보자. setSearchField 에서 searchField가 아닌 searchFieldString을 넣는 이유는 searchField는 useState에서 이미 기본값으로 설정이 되어 있다. setState에 넣어봤자 같은 값을 가지고 변화가 되지 않는다. input으로 들어온 searchFieldString을 setState에 넣어야 계속 변화를 감지하고 re-render를 한다. 일단 input에 아무 것도 입력하지 않고 console.log에 searchField를 나오게 하면 기본으로 입력되어 있는 abc가 나온다. searchFieldString --> searchField 값이 이동하고 console.log에 .. 2022. 5. 29.
[React] Object 특징 object는 메모리에 포인팅을 한다. 변수 obj1은 {name: 'Jane'} 오브젝트를 포인팅하고 있다. obj2 변수를 만들어 obj1으로 설정하면 obj1이 포인팅하는 오브젝트에 obj2도 같이 {name: 'Jane'}으로 포인팅하고 있는다. strict equality 를 써서 같은지 물어보면 같다고 나온다. 이 두 포인터가 같은 메모리에 포인팅하고 있는가? 라고 묻는 것이다. obj 1이 이름을 바꿔도 obj2도 같은 이름으로 동시에 바뀐다. 벨류가 변해도 메모리는 같은 곳을 포인팅하게 된다. 메모리가 새로 생기는 경우 1. obj3는 obj1과 모양은 같지만 메모리를 따로 써서 만든 경우 이 둘은 같은 메모리가 아니기에 같지 않다고 나온다. 2. obj 4에 벨류를 직접 입력하여 메모리를.. 2022. 5. 18.
[React] Lifecycle Method 라이프 사이클 Lifecycle Method 라이브러리, 프레임워크들은 라이프 사이클을 가지고 있는데 라이브러리가 동작하는 순서를 의미한다. will 접두사가 붙은 함수는 어떤 작업을 처리하기 직전에 호출되는 함수 예를 들어 혹시 마운트 되기전 해야 하는 작업이 있으면 componentWillMount() 에 내용을 넣어준다. did 접두사가 붙은 함수는 어떤 작업을 처리한 후에 호출되는 함수이다. 컴포넌트 라이프 사이클은 크게 Mount, Update, UnMount 3가지로 분류된다 1. Mount 페이지에 컴포넌트가 최초 심어지는 것을 말한다. 컴포넌트 라이프에서 딱 한 번만 일어난다. 같은 앱 컴포넌트가 있더라도 같은 것이 아니라 새 인스턴스가 생성된 것이다. Mounting is the first time a.. 2022. 5. 18.
의류 쇼핑몰 만들기 6 | package-lock.json vs yarn.lock npm을 사용하면 package-lock.json yarn을 사용하면 yarn.lock 이 lock file안에서 모든 dependency들을 볼 수 있다. yarn을 사용하면 둘 다 생기는데 둘 다 가지고 있을 필요가 없으니 package-lock.json을 삭제하면 된다. 2022. 5. 12.
의류 쇼핑몰 만들기 5 | SASS 2 | 구글 폰트 연결 | 구글 폰트를 검색해 들어가 원하는 폰트를 찾는다. 원하는 폰트에 Select this style을 클릭하면 링크가 뜨는데 그 링크를 복사한다. index.html 안에 붙여넣기 한다. href를 복사해서 주소창에 넣으면 링크에 같이 오는 내용들 즉 font definition이 css 스타일로 나온다. 이 부분을 참고해서 css, scss에 넣는다. 일단은 전체적으로 일관성을 위해서 index.css 파일을 index.scss 파일로 바꾸고 index.scss에 font-family에 폰트 이름을 추가해 준다. index.js에서도 './index.scss'로 바꿔준다. Sass 더 알아보기 Elements를 보면 head 태그에 3개의 style이 있는 것을 볼 수 있다. 그 안을 보면 우리가 작성한 .. 2022. 5. 11.

티스토리툴바