rosie

1. 로그인 폼 기본 구조 만들기 파이어베이스 설정으로 로그인 할 수 있는 서버가 준비되었습니다. routes 폴더에 Auth.js 파일에 로그인 폼을 만듭니다. // ./src/routes/Auth.js const Auuth = () => { return Continue with Google Continue with Github } export default Auth 코드 작성 후 화면을 확인해보면 과 버튼이 만들어집니다. 위에 버튼 두 개는 구글, 깃허브 소셜 로그인을 담당하고 구글, 깃허브 소셜 로그인은 파이어베이스 서버에 요청만 하면 되므로 서버 호출을 할 수 있게 버튼을 만듭니다. 이메일, 비밀번호 로그인의 경우 이메일과 비밀번호를 입력 받아야 하므로 form 엘리먼트와 input 엘리먼트를 사..

1. 파이어베이스 로그인 설정하기 console.firebase.google.com 에 접속한 다음 이전에 만들었던 twitter 파이어베이스 프로젝트를 선택합니다. => 이곳을 파이어베이스 콘솔이라 합니다. Authentication 을 누릅니다. Authentication 화면으로 이동하면 최초 화면에서 시작하기를 누른 다음에 User 탭을 누릅니다. 로그인 방법 설정을 누르면 sign-in method 탭으로 넘어갑니다. 다양한 로그인 방법 중에서 여기서는 이메일, 비밀번호, 구글, 깃허브 소셜 로그인을 사용합니다. 첫 번째로 이메일 / 비밀번호를 클릭합니다. 옵션에서 '사용 설정'을 체크합니다. 이메일 링크(비밀번호가 없는 로그인)는 체크하지 않습니다. => 비밀번호를 사용한 로그인 기능을 구현하..

1. 파이어 베이스 인증 모듈 사용하기 파이어 베이스에서 필요한 것 찾아보는 방법 Authentication 모듈을 사용하기 위해서 Firebase auth 에서 찾아보면 됩니다. 인증 모듈을 사용할 때 알아야 하는 내용 파이어베이스는 특정 모듈을 사용할 때 모듈을 추가로 불러와야 하는 규칙이 있습니다. => 인증 모듈을 사용하려면 firebase/auth 를 추가로 import 해야 합니다. auth 를 firebase.auth() 식으로 호출해줘야 합니다. // ./src/fbase.js import { initializeApp } from "firebase/app" // import "firebase/auth" 가 에러가 나는 이유는 firebase에서 v9(Beta) 버전을 내놓았기 때문에 내용이..

1. useState 함수 위치 이동하기 useState 함수의 위치를 변경하고 appRouter 컴포넌트에 isLoggedIn 프롭스를 추가합니다. AppRouter 컴포넌트가 라우터 역활을 하면서 코드의 가독성까지 챙기려면 상태는 App 컴포넌트에서 관리하는 것이 좋습니다. App 컴포넌트에 footer 엘리먼트도 추가합니다. => footer 엘리먼트는 사이트 아래에 있는 요소 입니다. footer은 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담고 있습니다. // ./src/components/App.js import { useState } from "react" import AppRouter from "./Router" const App = () => { const [isLo..

1. useState 함수 사용하기 useState함수로 로그인 여부를 판단하기 위한 상태를 만들때 [isLoggedIn, setIsLoggedIn] = useState(false) 처럼 useState 함수를 사용해서 상태와 상태 관리 함수로 짝을 만들어 사용할 수 있습니다. => isLogged 의 값은 setIsLoggedIn 함수만 사용해서 변경이 가능합니다. 로그인이 되어 있지 않은 상태일 때 로그인 페이지를 보여주려면 isLoggedIn 상태를 참조해서 렌더링할 컴포넌트를 결정하면 됩니다. => isLoggedIn 이 false 이면 로그인 페이지를 보여주는 Auth 컴포넌트, true 일 경우에는 로그인 후 볼 수 있는 Home 컴포넌트를 렌더링 하면 됩니다. 아래의 코드처럼 Router.j..

1. 라우터 준비하기 리액트에서 프로젝트 구조 구성은 라우터를 적용하기 위해 한다고 생각해도 됩니다. => 라우터란 주소 표시줄에 site.com/a 나 site.com/b 와 같은 주소를 입력했을 때 어떤 컴포넌트를 보여 줄지 결정하는 역활을 함 라우터가 제대로 동작하려면 라우터가 이해할 수 있도록 파일과 폴더를 구성해야 합니다. 라우터를 적용하기 전에 프로젝트의 뼈대를 세워야 합니다. => 페이지는 routes 폴더에 저장하고 페이지를 이루는 구성 요소들은 components 폴더에 나눠서 저장합니다. App.js 파일은 components 폴더에 옮기고, routes 폴더에는 Auth.js, EditProfile.js, Home.js, Profile.js 를 만듭니다. index.js 파일에서 Ap..

1. 파이어베이스의 비밀키 숨기기 firebaseConfig 변수에 apiKey 와 같은 값들은 파이어베이스에 접속하는 비밀키로 사용됩니다. Github에 firebasejs 파일을 업로드 하게 되면 누구나 비밀키를 확인할 수 있는데, 그렇게 되면 비밀키를 본 사람이 데이터베이스에 접근해서 데이터를 바꾸는 등의 보안 문제가 발생할 수 있습니다. => 이러한 상황을 막으려면 환경 변수라는 것으로 비밀키를 숨겨야 합니다. * 환경 변수 : 운영 체제 및 기타 소프트웨어가 컴퓨터에 고유 한 정보를 결정하는 데 사용할 수 있는 동적인 값. 즉 환경 변수는 컴퓨터의 위치, 버전 번호, 객체 목록 등과 같은 다른 것을 나타내는 것 .env 파일을 생성 후 그 파일에 비밀키 변수를 등록한 다음, 비밀키가 필요한 다른..

1. 파이어베이스 설정하기 firebase.google.com 접속하면 처음 화면에서 시작하기 누른 후 프로젝트 만들기 프로젝트 이름을 지정할 수 있는 화면이 생성되면 프로젝트 이름은 리액트 프로젝트 이름과 동일하게 작성합니다. 파이어베이스를 처음 사용한다면 "Firebase 약관에 동의합니다."에 체크 후 계속 버튼을 누릅니다. 다음 화면에서 "이 프로젝트에서 Google 애널리틱스 사용 설정" 을 끄고 프로젝트 만들기를 눌러서 설정을 마칩니다. => 구글 애널리틱스 : 사이트의 사용자 통계 수치 등을 알려주는 구글의 서비스 -> 여기서는 다루지 않기 때문에 사용해제를 권장 "새 프로젝트가 준비되었습니다." 라는 문구가 나오면 계속 버튼을 눌러서 다음으로 갑니다. 프로젝트 만들기가 끝나면 파이어베으스 ..

1. react로 시작하기 폴더를 생성 후 VSCode 로 실행합니다. 터미널을 연 후, 터미널 시작 경로가 VSCode로 연 폴더의 경로인지 확인합니다. create-react-app 을 사용하여 리액트 프로젝트를 생성합니다.create-react-app- twitterClone 생성된 폴더를 기준으로 VSCode를 재실행합니다. 2. Github 저장소와 연결하기 Github에 로그인 후 왼쪽 상단에 보이는 를 눌러서 저장소 만들기 화면으로 이동합니다. Repository name(저장소 이름)에 twitterClone을 입력하고 Description(설명)에는 "Cloneing Twitter with React and Firebase"를 입력합니다. (Description 은 작성을 하지 않아도 상..

1. 서버란? 서버(Server)는 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램 또는 장치를 의미합니다. => 클라이언트가 요청하는 정보를 서버가 받아서 처리하고 응답을 주는 것 서버라는 것은 개념적인 용어입니다. 어떠한 형태의 컴퓨터든 정보제공 역활을 하는 주체이면 서버컴퓨터로 불릴 수 있다. 서버 구축 서비스 BaaS(Backend-as-a-Service) : 구글, 아마존, 마이크로소프트와 같은 대형 IT기업은 대부분 서버 구축 서비스를 제공합니다. 직접 구현하기 까다로운 회원가입, 로그인과 같은 기능을 제공합니다. => 서버 구축 서비스를 사용하면 기능을 구현하는데 필요한 시간을 단축시키고 안정적인 서비스를 제공함 파이어베이스란? 구글(Google)이 ..