전체 글 (218) 썸네일형 리스트형 [노마드 코더] ReactJS 트위터 클론 코딩 - Pfofile page 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co Profile Image 이제 텅 비어있는 프로필 페이지를 만들어보자. 프로필 페이지는 사용자의 프로필 이미지와, 사용자 이름 그리고 마지막에는 사용자가 쓴 트윗내용들이 정리돼서 보일 것이다. export default function Profile() { return ( Wrapper> AvatarUpload> AvatarImg /> AvatarUplo.. [노마드 코더] ReactJS 트위터 클론 코딩 - Edit tweet(code challenge) 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co 이번에는 코드 챌린지로 이미 작성된 트윗을 수정해 보는 걸 도전해 보자. 이미 쓰인 트윗이 있기 때문에 변경할 트윗을 선택한 후에 변경된 내용을 수정하는 방식으로 구성해 볼 생각이다. 먼저 delete와 같은 버튼을 하나 복사해 준다.return (Wrapper> Column> Username>{username}Username> Payload>{tweet}Payload> {user?.uid === .. [노마드 코더] ReactJS 트위터 클론 코딩 - Realtime Tweets & Delete 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co 이번에는 Firestore DB에서 실시간으로 쿼리의 변경 사항을 수신하는 방법을 적용해 보자. timeline.tsx의 fetchTweets()에서 기존에 사용하였던 getDeocs() 구문을 주석 처리 하고 onSnapshot()으로 대체할 것이다.const fetchTweets = async() => { const tweetsQuery = query( collection(db, "tweets"), orde.. [노마드 코더] ReactJS 트위터 클론 코딩 - Fetching Timeline 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co 먼저 components에 timeline.tsx파일을 생성해 준다. 그리고 interface를 하나 만들어 주고, 기본적인 Tweet의 구성을 담아주도록 한다.export interface ITweet { id: string; photo : string; tweet: string; userId: string; username: string; createdAt: number;}export default fun.. [노마드 코더] ReactJS 트위터 클론 코딩 - Uploading Images with S3 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co 이번에는 트윗에 같이 나타날 이미지를 업로드해 볼 것이다. firebase의 Storage를 사용해도 좋지만, 정책변경으로 요금제를 업그레이드를 해야 사용할 수 있게 변경되어서 예전에 백엔드 프로젝트에서 사용했던 Amazon의 S3(Simple Storage Service)를 이용해 볼까 한다. post-tweet-form.tsx에서 onSubmit() 함수 안의 addDoc() 함수가 document를 업로드한 이후에, 사용자가 file.. [노마드 코더] ReactJS 트위터 클론 코딩 - Tweeting 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.coNavigation Bar 이제 기본적인 골격은 완성되었으니 본격적으로 내용물을 채워볼 것이다. 기본적인 UI를 구성하기 위해 내비게이션 바와 트윗을 작성할 텍스트 상자를 만들 것이다. 먼저 layout.tsx를 열어서 기본적인 골격을 잡아준다.import { Outlet } from "react-router-dom";import styled from "styled-components";const Wrapper = styled.div``;c.. [노마드 코더] ReactJS 트위터 클론 코딩 - Github Login 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co 이번에는 소셜 로그인을 추가할 것이다. 먼저 firebase의 Authentication 페이지에서 - 로그인 방법 - 새 제공업체 추가를 눌러보자. 그러면 firebase에서 제공하는 여러 가지 로그인 방식을 볼 수 있다. 여기서 github을 클릭해 준다.사용 설정을 눌러주고 https://github.com/settings/developers로 이동한다. New OAuth App을 클릭해서 OAuth application을 만들어준다... [노마드 코더] ReactJS 트위터 클론 코딩 - Authentication 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co Setup 기본 적으로 firebase는 수많은 기능들이 있는데, 처음에는 전부 다 off 된 상태로 앱이 만들어진다. 따라서 우리가 필요에 의한 기능들을 선택해서 적용시켜 주어야 한다. 먼저 왼쪽에 있는 빌드 카테고리에 있는 Authentication을 선택한다.다음으로 시작하기를 눌러준다.이제 어떤 방식으로 로그인을 할지 선택지를 고를 수 있다.이메일과 비밀번호를 활성화한 후 저장을 눌러준다. 이제 코드로 돌아가서 firebase.ts에.. 이전 1 2 3 4 ··· 28 다음
