React6 파이어베이스 이용해서 로그인 기능 구현하기 로그인 적용 순서 firebase.js에 만들어둔 auth 가져오기 리덕스에서 loginFB 함수 만들기 auth.signInWithEmailAndPassword()로 로그인 Login 컴포넌트에서 loginFB를 호출! 리덕스의 user 정보 업데이트 후에 메인 페이지로 이동하기 파이어베이스 로그인처리 가이드링크 후..로그인 구현할 차례 덕스구조 const loginFB=(id,pwd)=>{ return function (dispatch,getState,{history}){ auth .signInWithEmailAndPassword(id, pwd) .then((user) => { console.log(user); dispatch( setUser({ user_name:user.user.displayNam.. 2022. 4. 2. 파이어베이스 이용해서 회원가입 기능 구현하기 회원가입은 일단 어떻게 쓰는지 순서를 아는 것이 중요하다. 적용 순서 firebase.js에 만들어둔 auth 가져오기 리덕스에서 signupFB 함수 만들기 auth.createUserWithEmailAndPassword()로 가입 시키기 Signup 컴포넌트에서 signupFB를 호출! 가입한 후, display_name 바로 업데이트하기 사용자 정보 업데이트 후에 메인 페이지로 이동하기 가입을 시키는 것 => 비동기작업 음 강의 보면서 따라했더니 에러가 나서.. 파이어스토어 임포트를 아래와 같이 바꿔줬더니 에러가 사라졌다 ! import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat.. 2022. 4. 2. React 기초반 강의내용 정리 (4-5주차) 우선 강의자료 부터 !!! 4주차 강의자료 링크 Click 🧚♀️ 🤩 [스파르타코딩클럽] 리액트 기초반 - 4주차 매 주차 강의자료 시작에 PDF파일을 올려두었어요! teamsparta.notion.site 1. keyframes 사용하기 keyframes는 styled-components안에 이미 들어있다. 웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용한다. import styled,{keyframes} from "styled-components"; function App() { return ( ); } const boxAni = keyframes` 0% { border-radius:0px; top:20px; } 50%{ border-radius:.. 2022. 3. 21. React 기초반 강의내용 정리 (1-3주차) 음..1주차 강의자료 ..전부 정리하고 있었는데 임시저장 안해서 다 날라갔다.ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 젠장. 그냥 강의자료로 보자 !!! 다시 작성하기엔 ... ;;;; 1주차 강의자료 링크 Click👻 🤩 [스파르타코딩클럽] 리액트 기초반 - 1주차 매 주차 강의자료 시작에 PDF파일을 올려두었어요! teamsparta.notion.site 아....정말 ~~~~ 다 날라가버려서 ...화딱지가 나지만. . . 고고.. 1. JSX 란? 👉 그럼 리액트에서 어떻게 뷰를 그릴까요? App.js 파일에서 보이듯, JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다. 👉 리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html.. 2022. 3. 19. nvm으로 nodejs 설치하기 첫 react 프로젝트 만들기 vsc 터미널에서 설치해줄 게 좀 있다 ! 1. nvm으로 노드js를 설치해줬다. nvm install [설치할 버전] 나는 16.14.2버전을 설치해줬다. nvm install 16.14.2 이렇게 vsc 터미널에 적어주면 된다. nvm ls # nvm으로 설치한 노드 버전 리스트 확인 명령어 node -v # 노드 버전 확인 명렁어 +) nvm에서 사용 중인 노드 버전 바꾸기 nvm use [사용할 노드 버전] 이렇게 간단하게 노드 버전도 터미널을 통해 변경해줄 수 있따. 2. npm으로 yarn설치하기 # npm으로 패키지를 설치할 때는 아래 명령어를 사용해요! # 옵션은 필요한 경우에만 적어줍니다. # npm install [옵션] [설치할 패키지 이름] npm in.. 2022. 3. 18. React 환경설정가이드 및 command not found: brew /command not found: nvm 에러 해결방법 나중에 내가 다시 보기 위한 환경설정 가이드 포스팅 시작 ! (📌해당내용은 스파르타 코딩클럽 리액트 기초강의에 다 있습니다. ) 👻 환경설정 가이드 👻 1. VSC를 설치 (맥 윈도우 공통) 설치링크 click 🤩👉 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building an.. 2022. 3. 18. 이전 1 다음
