rosie

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. 자바스크립트의 타입 프로그래밍 언어는 값을 특정 유형으로 분류하는데 특정 유형을 다른 말로 하면 자료형이나 타입(type)이라 부릅니다. 모든 프로그래밍 언어는 내장 자료형이 있지만 내장 자료형은 언어마다 다릅니다. JavaScript 는 느슨한 타입(loosely typed)언어, 혹은 동적(dynamic) 언어입니다. => 변수의 타입을 미리 선언할 필요가 없다는 뜻으로 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이고 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻입니다. 자바스크립트의 타입 종류 원시 타입(Primitive Data Type, 기본 타입) 값이 변수에 할당될 때 메모리 상에 고정된 크기로 저장합니다. 원시 타입의 값은 병경 불가능한 값, 불변 값(Immutabel ..

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. switch 형태 switch (표현식) { case 값1: 명령문1 break case 값2: 명령문1 break default 명령문3 } 중괄호 {} 로 둘러싸인 블록 형태를 띠고 있고, 중괄호 안에는 case문이 있습니다. switch 의 표현식은 case 의 값과 일치 여부를 확인하고 이때 === 일치 연산자를 사용합니다. === 일치 연산자는 값과 자료형을 모두 비교하고, 결과 값으로 true 또는 false를 반환합니다. case문이 있는 경우, 위에서 부터 순차적으로 일치한 값이 나올 때까지 case 값을 확인하면서 내려갑니다. case값이 일치하면 해당 명령문을 실행합니다. break는 다음의 코드들을 더 이상 실행하지 않고, switch 조건문을 끝내는 역할을 합니다. 일치하는 c..

1. 조건문 어떤 조건이 참인지 거짓인지에 따라 실행 여부를 결정하는 구문을 말합니다. 조건문은 대표적으로 if, switch가 있습니다. 2. if 조건문 형태 if (표현식) { 명령문 } if 조건문은 표현식을 소괄호 () 로 둘렀나 형태를 가집니다. 표현식에는 의사결정을 할 수 있는 조건문을 작성합니다. 결과 값은 항상 불린형 값으로 반환되며 if 조건문의 결과 값이 true인 경우에만 명령문이 실행됩니다. const result = true if (result) { cosole.log("result가 참 입니다.") } // result가 참 입니다. if (!result) { console.log("실행되지 않습니다.") } if (result) { console.log("result의 결과"..

1. 자바스크립트 문장 구조 코드(Code) 문법을 토대로 단어의 조합으로 하나의 문장을 만들어내는 사람의 언어처럼 프로그래밍 언어도 문장을 구성하는 문장을 코드라 합니다. 코드를 구성하는 가장 작은 기본단위는 값, 변수, 연산자, 키워드입니다. => 이 요소가 모여서 하나의 문장을 만듭니다. 구문 패턴 표현식(Expressions) 값을 생성합니다. 표현식은 모두 어떤 값을 이행하지만, 개념적으로는 두 가지로 나뉩니다. 부수 효과가 있는 표현식 ex) x = 7 평가하면 어떤 값으로 이행하는 표현식 ex) 3+4 명령문(Statements) 일종의 행동 또는 행우를 수행하게 하는 코드입니다. if, if-else, for 등이 있습니다. 표현식 명령문(Expression Statement) 프로그래밍에..

1. eslint 적용하기 eslint란 코드의 규칙을 검사하는 오픈 소스 프로젝트 입니다. 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 유지해 줍니다. VSCode 에 확장 기능에서 ESLint 를 검색 후 설치 합니다. 설치 후 터미널에 아래의 코드를 입력합니다. npm i -D babel-eslint eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard​ .eslint 라는 파일을 생성됩니다. parser: eslint 의 입맛에 맞게 코드를 읽고 변환해줍니다. parserOptions: 읽어올 코드에 대한 정보를 나타냅니다. plugins: 기본 규칙외에 부가..

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..