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

6. FILE UPLOAD 6-1. Preview Images - 게시글에 글과 함께 사진도 올리고 싶음. 이럴 때 쓰는 게 Storage. Storage는 이미지, 오디오, 동영상 같은 사용자가 생성한 파일을 저장하고 가져올 수 있게 하는 저장소. test mode로 해서 bucket 생성. bucket은 파일을 넣는 곳임. 이제 사진을 함께 올릴 것이기 때문에 Nweet하는 방법을 바꿔야 함. Home.js에 코드 추가. 이 input은 모든 이미지로 된 파일만 받아들인다는 의미. 그럼 화면에 이렇게 나타남. 우리가 원하는 것은 파일을 선택하고 이미지 선택을 눌렀을 때 사진을 미리보기 하는 것. 고로 우리는 파일이 string 형식으로 들어왔을 때 그걸 읽어올 수 있어야 함. onFileChange라..

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를 넣어줌. 함수 내부에..

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