[클론코딩] 트위터 만들기

06 Oct 2021

Reading time ~3 minutes

nwitter log

09.15 기본 설정

Git default branch가 master에서 main으로 변경됨 main과 compare 해야 push 되도록 설정되어있어 브랜치를 master에서 main으로 변경해주어야함

git checkout master
git brach main master -f
git checkout main
git push origin main -f

09.17-18 firebase

firebase 기본 셋

09.20

오류 메세지

./src/index.js
Attempted import error: './firebase' does not contain a default export (imported as 'firebase').

export가 설정되지 않았다는 설명에 firebase.js 파일 하단에 export default app; 추가로 해결

09.23

로그인 기능 추가 절대 경로의 아쉬운 점, npm install로 설치한 패키지 이름이 파일 이름과 같으면 오류가 발생한다.

firebase.js->fbase.js jsconfig.json src 폴더를 기준으로 폴더나 파일 경로를 적을 수 있어 import 문의 가독성이 좋아진다

09.25

AppRouter 컴포넌트가 라우터 역할을 하면서도 코드의 가독성까지 챙기기 위해서는 App컴포넌트에서 관리하는 것이 좋다.
JSX에 자바스크립트 코드를 삽입할 때는 코드를 중괄호로 감싸줘야한다.
파이어베이스 초기화를 위한 firevase.initializeApp(firebassConfig)는 다른 파일에서 참조할 필요가 없으니깐 fbase.js 파일 안에서 실행하도록 코드를 수정 로그인을 위해 사용, 다른 파일에서 참조한다.
이때 인증 모듈 외의 파이어베이스 관련 모듈을 더 내보낼 수도 있으니 named export를 적용함

09.27

router 상위 컴포넌트에서 받은 프롭스는 구조 분해 할당으로 사용
코드 실행시 isLoggedIn은 setIsLoggedIn으로 관리하는 상태로 취급, 초깃값은 false, 로그인 값을 변경할 때 사용

패키지 전체를 import하면 프로그램이 무거워지기 때문에 모듈단위로 import한다.
CRA로 만든 리액트 프러젝트를 기본으로 index.js파일에 React.StrictMode를 설정한다. 이 설정을 지우지 않으면 console.log 함수가 2번 실행된다(오류를 쉽게 포착하기 위함).

파이어베이스 오류 수정… auth/invalid-api-key
- .env 파일 REACT_APP_API_KEY를 REACT_APP_API_KET으로 오타, 수정완료 input 엘리먼트에서 email 입력과 password 입력을 구분하기 위해 2가지 함수를 만드는 방법보다 event.target.name으로 input 엘리먼트를 구분하는 방법이 더 효율적

09.29

error는 파이어베이스가 에러와 관련된 여러 내용이 자세히 적혀있는 객체
Auth.js 파일의 onSubmit함수에는 try-catch문으로 에러를 콘솔에 출력하는 코드가 들어있다.
=>setError함수에 error.message를 전달해서 error 상태를 출력한다.

UseState함수에 함수를 인자로 전달하면 인자로 전달한 함수의 첫번째 인자(prev)에 이전의 상태가 넘어온다.
소셜 로그인을 구별하려면 event.target.name속성을 사용한다.
signWithPopup함수에 필요한 값들이 다 provider에 들어있다(소셜 로그인 업체이름, 현재 사용자 정보, 소셜 로그인 요청 주소 등).

09.30

파이어베이스 오류 수정…
오류 메세지

FirebaseError: [code=not-found]: The project undefined does not exist or it does not contain an active Cloud Datastore or Cloud Firestore database

.env 파일 REACT_APP_PROJECT_ID를 REACT_APP_PROJECT_I으로 오타, 수정완료
nweets.map is not a function
- 선언 오류 const [nweets, setNweets] = useState([]);을 const [nweets, setNweets] = useState("");로 오기입, 수정완료
  get 함수로 파이어스토어의 데이터를 받아와 화면을 렌더링할 때만 화면에 반영됨

10.02

타이핑을 정확하게 하자
creatorId와 현재 로그인한 사람의 uid를 비교해서 같으면 <삭제>버튼과 <수정>버튼을 보여준다.

10.03

window.confirm은 확인을 클릭하면 true를, 취소를 클릭하면 false를 반환한다.
doc함수는 문서 경로를 문자열로 입력 받아서 문서를 반환한다.

alert창에서 한글 깨짐(해결)
- 메모장으로 열어서 다른 이름으로 저장->인코딩 ansi에서 utf-8로 변경->저장

10.04

alert창에서 한글 깨짐(해결)
- 메모장으로 열어서 다른 이름으로 저장->인코딩 ansi에서 utf-8로 변경->저장
  FileReader : 업로드한 파일을 웹 브라우져에 출력할 수 있는 브라우저 API
  readAsDataURL 파일 정보를 인자로 받아서 파일 위치를 URL로 반환해준다.
  리액트 생명주기 함수처럼 파일 선택 후 ‘웹 브라우저가 파일을 인식하는 시점’,’웹 브라우저 파일 인식이 끝난 시점’등을 포함하고 있어서 시점까지 함께 관리해 줘야 URL을 얻을 수 있다.
  UUID 라이브러리
  
  범용 고유 식별자(아이디 라이브러리)

10.05

오류 메세지

Uncaught (in promise) FirebaseError: Firebase Storage: No default bucket found. Did you set the 'storageBucket' property when initializing the app? (storage/no-default-bucket)

코드	이유
storage/bucket-not-found	Cloud Storage에 구성된 버킷이 없습니다.

또 오타였을것같아서…fbase.js 파일을 확인했다.
- fbase.js 파일 process.env.REACT_APP_STORAGE_BUCKETREACT_APP_PROJECT_ID를 process.env.REACT_APP_STRAGE_BUCKET으로 오타, 수정완료

10.06

where함수는 필드, 조건, 찾으려는 값 순서로 인자를 전달해서 사용한다.

07-1 에서 작업했던 내용

const getMyNweets = async () => {
      const nweets = await dbService
          .collection("nweets")
          .where("creatorID", "==", userObj.uid)
          .orderBy("createdAt", "asc")
          .get();

      console.log(nweets.docs.map((doc) => doc.data()));
  };

  useEffect(() => {
      getMyNweets();
  }, []);

userObj는 App.js 파일에서 사용한 authService의 onAuthStateChanged에 인자로 전달한 user이다.
user를 userObj상태로 관리
리액트는 상태나 프롭스의 내용물이 너무 많으면 그 안에 있는 작은 변화를 제대로 인식하지 못한다=>userObj 크기 줄이기

npm run build 오류(해결)
- 오류 내역을 보니 NweetFactoy가 정의되어있지 않다 해서 코드를 확인해 보니 몇 가지 import문을 작성하지 않았던걸 발견해 추가했다.

10.06.21 완료