728x90
반응형
(심층)리액트트위터 클론코딩(with firebase) - 06
(심층)리액트2023. 2. 18. 18:09(심층)리액트트위터 클론코딩(with firebase) - 06

7. EDIT PROFILE 7-1. Get My Own Nweets 이제 해야 할 것은 프로필을 가져오는 것. => 프로필 화면을 만들 거임. 기존에 만들어뒀던 EditProfile.js은 없애고 Profile에서 작업을 해줄 거임. 7-2. Update Profile 7-3. Update Profile Bugfix

[ 2023-02-13 ] 코딩 WIL 일지 (일주일을 돌아보면서 쓰는 일지)
1일1 스터디 후기2023. 2. 13. 04:28[ 2023-02-13 ] 코딩 WIL 일지 (일주일을 돌아보면서 쓰는 일지)

이번주는 정신이 너무 없었다... 아니, 정신이 없었다라는 것보다는 많이 멍했다는 표현이 더 맞는 것 같다. 요 근래 나는 열심히 트위터 클론 코딩을 하고 있었다. 계속해서 공부를 이어나가다 보니 여러 가지 의문점이 생겼던 거 같다. 파이어베이스는 정말이지, 손 쉽게 로그인, 회원가입, CRUD 등의 기능을 쓸 수 있게 해준다. 프론트엔드 개발자들이 복잡하게 로직을 짤 일이 없다는 뜻이다. 난 말 그대로, 파이어베이스를 쓰는 방법을 익히면서 로직을 짜는 방법도 함께 공부하려고 트위터 클론 코딩을 시작했다. 그런데, 웃기는 것은 정작 파이어베이스 덕에 로직을 많이 다룰 일이 없다는 것이었다. 그때부터 머리가 아파오기 시작했다. 공부를 잘못하고 있다는 생각이 자꾸만 들었다. 그때부터 불안함에 정보를 열심히 ..

트위터 클론코딩(with firebase) - 하나의 이메일로 여러 계정 생성이 안되는 문제 해결
(심층)리액트2023. 2. 9. 20:08트위터 클론코딩(with firebase) - 하나의 이메일로 여러 계정 생성이 안되는 문제 해결

- 하나의 이메일로 여러 계정 생성이 안되는 문제 firebase는 사용자가 다른 ID 공급업체를 사용하여 로그인하는 경우 로그인 시 계정을 자동 병합하도록 기본값이 설정. 그렇기 때문에 ID 공급업체 별로 계정을 생성할 수 있도록 설정을 변경해주면 동일한 이메일을 가지고 구글과 깃허브 계정 모두 생성할 수 있음. * 설정 경로: 콘솔 → 프로젝트 → authentication → settings → ID 공급업체 별로 여러 계정 만들기 클릭 후 저장

트위터 클론코딩(with firebase) - 04
(심층)리액트2023. 2. 7. 10:13트위터 클론코딩(with firebase) - 04

5. NWEETING 5-1. Form and Database Setup - Home.js에 input랑 useState 추가. 새로 생성해준 form 태그 내부에 input을 생성해줌. 하나는 text type의 input을, 하나는 submit type의 input을 생성해줌. - text type의 input : 최대 글자수를 120자로 제한해둠. 그리고 onChange event 실행시 onChange 함수가 함께 실행되도록 함. value는 nweet로 설정하여 nweet 값이 input에 들어오도록 함. useState를 하나 생성해줌. const [nweet, setNweet] = useState(""); 그리고 onChange 함수를 선언해준 후 매개변수로 event를 넣어줌. 함수 내부에..

트위터 클론코딩(with firebase) - 03
(심층)리액트2023. 2. 3. 00:21트위터 클론코딩(with firebase) - 03

4. Authentication 4-1. Using Firebase Auth Router.js에 있던 useState를 App.js로 옮겨줌.(Router로서의 기능만 하도록 하기 위해서) App.js에 useState를 import한 후, Router에 isLoggedIn을 prop으로 전달해줌. App,js 안에 Router.js를 배치시켜주는 이유는? 다른 컴포넌트도 함께 사용 가능하기 때문. 페이지가 바뀌는 Router.js 영역과 계속하여 고정되어 있는 컴포넌트 영역을 같이 배치할 수 있음. (ex. Header, Footer) 이런 식으로 사용 가능. import { useState } from "react"; import "./App.css"; import Router from "./shar..

728x90
반응형
image